HTML表单验证（使用jquery.validate.js）在某些情况下不起作用

我想创建一个必须填写电子邮件地址，一些文本和协议条款和条件的HTML表单。当所有3个字段都有效时，应该启用提交按钮。到目前为止，我创建了脚本，几乎一切正常。 HTML代码很简单：HTML表单验证（使用jquery.validate.js）在某些情况下不起作用

<form id="myform"> 
    <input id="email" name="email" class="textox" placeholder="[email protected]" /> 
    <br/> 
    <textarea maxlength="140" style="resize:none" class="textoxarea" placeholder="zbzbzxcbcx" name="field2"></textarea> 
    <br> 

     <input type="checkbox" class="required" value="None" name="check"> 
     I accept terms</input> 
    <input type="submit" disabled /> 
</form>

和JS代码如下：

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     errorElement: 'div', 
     rules: { 
      email: { 
       required: true, 
       email: true 
      }, 
      field2: { 
       required: true, 
       minlength: 5 
      }, 
      terms: { 
       required: true, 
       maxlength: 2 
      } 
     }, 
     submitHandler: function (form) { // for demo 
      alert('valid form submitted'); // for demo 
      return false; // for demo 
     } 
    }); 
    $('#myform').find('input, textarea').on('change', function() { 
     var btn = $('#myform').find('input[type=submit]'); 
     if ($('#myform').valid()) { 
      btn.removeAttr('disabled'); 
     } else { 
      btn.attr('disabled', 'disabled'); 
     } 
    }); 



});

并不在这个例子的情况下工作是：在开始提交按钮被禁用。当用户输入电子邮件地址并检查条款和条件时，该按钮仍处于禁用状态，因为用户尚未填充文本区域。当他用超过5个字符填充它时，该按钮应该变为启用。但事实并非如此。只有当用户首先在页面上的其他地方点击 - 然后该按钮才会改变其状态。但没有点击 - 它仍然被禁用 - 我该如何解决它？我的jsfiddle代码是在这里：http://jsfiddle.net/xvAPY/263/

来源

2015-06-21 randomuser1

问题是，change事件在输入HTML控件失去焦点后被解雇。有关change事件的更多信息：https://developer.mozilla.org/en-US/docs/Web/Events/change。要在控件失去焦点之前对任何更改做出反应，您需要在窗体上的所有文本输入控件上收听input事件：https://developer.mozilla.org/en-US/docs/Web/Events/input。注意IE浏览器 - 这仅适用于9+。要对复选框中的更改做出反应，您仍应使用change事件。

文本控件的替代方法是使用keyup和paste事件组合的更为肮脏的解决方案。

UPDATE

在上述情况下，我认为最干净的方法是：

包住匿名函数到一个名为例如updateButtonState
使用change

绑定文本控件使用input

$('#myform').find('input:text, textarea').on('input', updateButtonState); 
$('#myform').find(':checkbox').on('change', updateButtonState);

来源

2015-06-21 14:08:39 andy250

谢谢，你能给我一些关于粘贴和粘贴的肮脏破解的例子吗？为什么它很脏？ :) – randomuser1

是的 - 你可以这样编码：$（'＃myform'）。find（'input，textarea'）。on（'change keyup paste'，function（）{....}）;它很脏，因为当控件具有焦点时（箭头，ESC等），“keyup”实际上会触发您按下的任何按键。在你的情况下，这将工作，但我认为更好的是绑定到'input'和'change'：$（'＃myform'）。find（'input，textarea'）。on（'input change'，function（） {...}）; – andy250

这可能是速战速决，但它会工程....再添加一个事件KEYUP绑定复选框。

用下面的代码更改您的代码。

$('#myform').find('input, textarea').on('change keyup', function() {

这可能有所帮助。

来源

2015-06-21 14:12:49 Pratik

而不是'change'使用'keyup paste'作为事件。 fiddle。

来源

2015-06-21 14:13:48

HTML表单验证（使用jquery.validate.js）在某些情况下不起作用

回答

相关问题