jQuery禁用按钮（不提交），直到字段validation+validation插件

我的表单上有4个按钮，一个提交，取消，添加和删除按钮。 所有都按预期工作，但我想禁用添加按钮，直到输入字段validation。 我正在使用Validation插件，我认为这可以通过回调进行必要的validation，但我不确定。

有人能指出我正确的方向吗？

更新：

这是一些代码的概念

required: function(element) { return($('#chargeamtaddButton').attr('disabled', ? '','disabled'); } 

查找true / false选项标志以设置disabled属性

Answer 1

我之前使用过validation插件，但我记不起所有细节了。 我很确定它是这样的：

 $(function() { $('#myForm').validate( rules: { 'elementToWatch': { success: function(element) { if($("#myform").validate().element("#myselect")) { $('#chargeamtaddButton:disabled').removeAttr('disabled'); } else { $('#chargeamtaddButton').attr('disabled','disabled'); } }, // etc... }, // etc... }, // etc... }); }); 

由于有很多方法可以使用validation插件，因此很难给出完美的建议，但我希望我所展示的内容能让您更好地了解如何向前发展。 也许如果你提供更多的代码和HTML，我可以帮助你更多。

Answer 2

我实际上发现了最好的方法，它在插件中使用了一个未记录的方法checkForm() 。

将此代码添加到表单所在页面上的$(document).ready()函数中。

 $('#yourform').bind('change keyup', function() { if($(this).validate().checkForm()) { $('#submitbutton').removeClass('button_disabled').attr('disabled', false); } else { $('#submitbutton').addClass('button_disabled').attr('disabled', true); } }); 

在这种情况下，它会将类button_disabled添加到按钮，然后添加disabled属性。 您可以通过CSS将禁用的样式应用于按钮。

Answer 3

jQuery Validate插件文档：表单方法

validation插件的上述方法允许您检查表单是否有效。 因此，如果您无法使回调工作，那么我会运行一个计时器并检查表单是否经常有效，如果是，请启用您的按钮。 这很糟糕。

我找不到validation插件的成功回调，所以我认为你使用了submitHandler方法。 但是，您实际上还没准备好提交表单，因为您仍然想要添加字段。 因此，我提出的解决方案是始终启用添加按钮，但在单击时调用函数以查看表单是否有效。 如果是这样，那么添加你的字段或诸如此类，如果没有，则弹出错误。 所以：

  ...  ...  

或者至少是那种效果。 祝好运！

Answer 4

更优雅和快速的解决方案是简单地覆盖默认的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); } if (this.checkForm()) { // 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); } if (this.checkForm()) { // 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.checkForm() && $('#form').hasClass('dirty')) { // checks form for validity 

使用silent初始化插件：

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