jQuery 禁用按钮（不提交），直到字段验证 + 验证插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/882406/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery disable button (NOT Submit) until field validates + Validation Plugin
提问by Phill Pafford
I have 4 buttons on my form, a Submit, Cancel, Add and Remove button. All are working as expected but I would like to disable the Add button until the input field validates. I'm using the Validation plug-in and I think this can be done with a required validation with a callback but I'm not sure.
我的表单上有 4 个按钮，一个提交、取消、添加和删除按钮。一切都按预期工作，但我想禁用“添加”按钮，直到输入字段验证为止。我正在使用 Validation 插件，我认为这可以通过带有回调的必需验证来完成，但我不确定。
Could someone point me in the right direction?
有人能指出我正确的方向吗？
UPDATE:
更新：
Here is an idea of some code
这是一些代码的想法
required: function(element) {
return($('#chargeamtaddButton').attr('disabled', ? '','disabled');
}
Looking for that true/false option flag to set the disabled attribute
寻找真/假选项标志来设置禁用属性
采纳答案by KyleFarris
I've used the validation plugin before but I can't remember all the details. I'm pretty sure it's something like this:
我以前使用过验证插件，但我不记得所有的细节。我很确定它是这样的：
$(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...
});
});
Since there are so many ways to use the validation plugin, it's hard to give you perfect advice but I hope what I've shown gives you a better idea of how to move forward. Maybe if you gave some more code and HTML, I could help you out more.
由于使用验证插件的方法有很多种，因此很难为您提供完美的建议，但我希望我所展示的内容能让您更好地了解如何继续前进。也许如果您提供更多代码和 HTML，我可以为您提供更多帮助。
回答by Michael Irigoyen
I've actually discovered the best way to do this, and it's using an undocumented method checkForm()within the plugin.
我实际上发现了做到这一点的最佳方法，它checkForm()在插件中使用了一种未记录的方法。
Add this code to the $(document).ready()function on the page your form is on.
将此代码添加到$(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);
}
});
In this case, it will add the class button_disabledto the button and then add the disabled attribute. You can apply a disabled style to the button via CSS.
在这种情况下，它将类添加button_disabled到按钮，然后添加禁用属性。您可以通过 CSS 将禁用样式应用于按钮。
回答by hornairs
jQuery Validate Plugin Documentation: Form Method
The above method of the validate plugin allows you to check if a form is valid. So if you can't get the callback to work then I would run a timer and check to see if the form is valid every so often, and if so enable your button. This sucks though.
验证插件的上述方法允许您检查表单是否有效。因此，如果您无法使回调工作，那么我会运行一个计时器并检查表单是否经常有效，如果有效，请启用您的按钮。不过这很糟糕。
I can't find a success callback for the validation plug in, so I think you are stuck using the submitHandler method. However, you aren't actually ready to submit the form yet, as you still want to add fields. So my proposed solution is leaving the add button enabled all the time, but having it call a function when clicked to see if the form is valid. If so, then add your field or whatnot, and if not then pop up the errors. So:
我找不到验证插件的成功回调，所以我认为您使用 submitHandler 方法卡住了。但是，您实际上还没有准备好提交表单，因为您仍然想添加字段。因此，我提出的解决方案是始终启用添加按钮，但在单击时调用函数以查看表单是否有效。如果是这样，则添加您的字段或诸如此类，如果不是，则弹出错误。所以：
<body onload="formValidator = $('#form').validate();">
...
<input value='add' name='add' onclick='addIsValid();'>
...
<script type='text/javascript' language='javascript'>
function addIsValid() {
if(formValidator.numberOfInvalids() > 0) {
formValidator.showErrors();
} else {
addElementToFormOrWhatever();
}
}
</script>
Or at least something to that effect. Good luck!
或者至少是那种效果。祝你好运！
回答by user3709159
A more elegant and fast solution is to simply override the default on-click and on-keyup events adding the code you need as follows instead of adding another listen event
一个更优雅和快速的解决方案是简单地覆盖默认的点击和按键事件，添加您需要的代码，如下所示，而不是添加另一个监听事件
$("#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
}
}
})
With the following css code for the submit trigger - initially disabled (bootstrap 3 classes):
使用以下提交触发器的 css 代码 - 最初禁用（引导程序 3 类）：
<a onclick="if(!$(this).hasClass('disabled')) { $('#form').submit(); }" class="submit btn btn-danger disabled">button_save</a>
This can very easy be used with jquery plug-in areYouSureto only enable the submit when actual changes are made:
这可以很容易地与 jquery 插件areYouSure一起使用，以仅在进行实际更改时启用提交：
if (this.checkForm() && $('#form').hasClass('dirty')) { // checks form for validity
initializing the plug-in using silent:
使用silent初始化插件：
$('#form').areYouSure( {'silent':true} );
