成功进行jQueryvalidation后启用禁用按钮

我有以下代码，其中我有2个电子邮件输入字段，我需要validation它们是相同的，使用jQueryvalidationequalTo成功。

 Email Address 
  
 Confirm Email Address 
  
 
 Credit Card Checkout »  

validation成功后，我希望启用该按钮，但似乎无法弄清楚如何执行此操作。

  $('#ccSelectForm').validate({ rules: { inputEmail: { required: true, email: true }, inputEmailConfirm: { required: true, email: true, equalTo: '#inputEmail' }, } }); 

理想情况下，作为奖励，我想设置表单控件以利用Bootstrap3中的validation状态，详细信息请参见http://getbootstrap.com/css/#forms-control-validation

小提琴在这里http://jsfiddle.net/4wU5m/

Answer 1

没有jQuery Validate插件回调选项/函数，当所有字段都有效而没有先单击提交按钮时触发。

您需要创建一个外部keyup blur事件处理程序，检查表单的有效性并相应地启用/禁用该按钮; 每次按下一个键或离开一个字段。

演示： http ： //jsfiddle.net/p628Y/1/

 $(document).ready(function () { $('#ccSelectForm').validate({ rules: { inputEmail: { required: true, email: true }, inputEmailConfirm: { // required: true, // <-- redundant // email: true, // <-- redundant equalTo: '#inputEmail' } // <-- removed trailing comma } }); $('#ccSelectForm input').on('keyup blur', function () { // fires on every keyup & blur if ($('#ccSelectForm').valid()) { // checks form for validity $('button.btn').prop('disabled', false); // enables button } else { $('button.btn').prop('disabled', 'disabled'); // disables button } }); }); 

由于jQuery Validate插件动态地禁用了浏览器的HTML5validation，因此我从标记中删除了required属性，并将type="email"更改为type="text" 。 （ 您已经在插件中指定了这些validation规则 。）

使用equalTo规则时，您也不需要指定所有规则两次，因为第二个字段必须始终与第一个字段匹配。

---

编辑：

在上面的场景中，您的页面完全依赖于JavaScript。 换句话说，如果没有JavaScript，则始终禁用该按钮。

如果您已经进行了服务器端validation并希望您的页面独立于JavaScript，则需要从按钮标记中删除disabled="disabled" ，并将其添加到DOM ready事件处理程序内的JavaScript中。

 $('button.btn').prop('disabled', 'disabled'); 

在这种情况下，如果没有JavaScript，您仍然会有一个工作按钮，并且使用JavaScript，在页面加载时以编程方式禁用该按钮。

Answer 2

更优雅和快速的解决方案是简单地覆盖默认的on-click和on-keyup事件，添加所需的代码，如下所示，而不是添加另一个listen事件

 $("#form").validate({ submitHandler: function(form) { form.submit(); }, onkeyup: function( element, event ) { if ( event.which === 9 && this.elementValue(element) === "" ) { return; } else if ( element.name in this.submitted || element === this.lastElement ) { this.element(element); } this.checkForm(); if (this.valid()) { // checks form for validity $('a.submit').attr('class', 'submit btn btn-success'); // enables button } else { $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button } }, onclick: function( element ) { // click on selects, radiobuttons and checkboxes if ( element.name in this.submitted ) { this.element(element); // or option elements, check parent select in that case } else if ( element.parentNode.name in this.submitted ) { this.element(element.parentNode); } this.checkForm(); if (this.valid()) { // checks form for validity $('a.submit').attr('class', 'submit btn btn-success'); // enables button } else { $('a.submit').attr('class', 'submit btn btn-danger disabled'); // disables button } } }) 

使用以下用于提交触发器的css代码 – 最初禁用（bootstrap 3类）：

 button_save 

这可以很容易地与jquery插件一起使用areYouSure仅在实际更改时启用提交：

 if (this.valid() && $('#form').hasClass('dirty')) { // checks form for validity 

使用silent初始化插件：

 $('#form').areYouSure( {'silent':true} );