客户端JavaScript字段验证

我有一个特殊的场景，就客户端验证而言，我需要一些帮助。客户端JavaScript字段验证

我有一些需要的输入字段（不需要HTML），但它们使用名为“requiredInput”的类标识为需要，并在用户单击提交按钮时在服务器端进行评估。

但是，我想验证输入字段的客户端，当用户从该字段移开并禁用提交，直到所有需要的字段填写。

我怎么去这个场景为了完全处理这个客户端而不是等待服务器端提交来执行验证？

<input type="text" name="lastName" id="lastName" class="requiredInput" tabindex="3">

注：我不想执行的有效性提出，我想验证的onblur和禁用提交直到所有的必填字段填写

来源

2016-11-23 Neophile

你好@DurgpalSingh，我不想执行上提交验证，而我想要做的是的onblur一个输入字段。 – Neophile

html5有一个'required'属性，工作得很好。否则就是这样的：https：//jqueryvalidation.org/ – axlj

你有一大堆的JS验证包，你可以找到accros互联网。

现在我认为最好的之一是ParsleyJS。你可以使用少量的内置（和一些额外的）验证器，在客户端完美地工作。 Ypou可以自己设计一次。如果您不想将整个表单发送到服务器，那么也有可能验证远程远程，这也很好。

来源

2016-11-23 13:11:06

另一个是jQuery Valitation插件，包含在一些Bootstrap模板中。它非常易于使用。它基于输入的id进行验证。它有一些内建方法，在StackOverflow中有一个标记，并允许您创建自定义方法。 –

你好@菲利普：ParsleyJS看起来很有希望，但是，它不给我验证onblur字段的选项吗？我目前已经具有验证提交功能。 – Neophile

嗯，是的，我给你验证模糊 –

如果您wan't一个纯粹的JS解决方案，并且希望的究竟是有效的完全控制，你可能想要做这样的事情：

创建validateInput()函数得到所有的输入字段，检查他们是否有内容（以及您可能想要执行的任何其他检查），并在一切如预期时继续启用提交按钮。将该函数附加到每个输入字段的onblur事件。

function validateInput(){ 
    let validInput = true; 
    let field1Content = document.getElementById('field1').value; 
    let field2Content = document.getElementById('field2').value; 
    if(field1Content.length === 0 || field2Content === 0) 
     validInput = false; 

    if(validInput) 
    //enable submit button 
}

来源

2016-11-23 13:12:40 ThatBrianDude

你可以伊斯利做到这一点，如果你有jQuery的，请尝试以下

<input type="text" name="lastName" id="txtbox1" class="requiredInput clsValidate" tabindex="3"> 
<input type="text" name="lastName" id="txtbox2" class="requiredInput clsValidate" tabindex="3"> 
<input type="text" name="lastName" id="txtbox3" class="requiredInput clsValidate" tabindex="3"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 

<script type="text/javascript"> 
     $(document).ready(function() { 
    ValidateInput(); 
}); 

$(document).on('change', 'input.clsValidate[type=text]', function() { 
    ValidateInput(); 
}); 

function ValidateInput() { 
    var cnt = 0; 
    $('input.clsValidate[type=text]').each(function (i, obj) { 
     if ($(this).val().trim().length <= 0) { 
      cnt++; 
     } 
     if (cnt > 0) { 
      $('#btnsubmit').attr('disabled', 'disabled') 
     } else { 
      $('#btnsubmit').removeAttr('disabled'); 
     } 
    }); 
} 
</script>

来源

2016-11-23 13:34:22

你好，这很好，但这只是启用和禁用提交按钮。我能不能只触发域上的验证，因为一旦它进行服务器端往返，它确实会显示基于该类的错误。 – Neophile

客户端JavaScript字段验证

回答

相关问题