我的表单上有 4 个按钮，一个提交、取消、添加和删除按钮。一切都按预期工作，但我想禁用添加按钮，直到输入字段验证。我正在使用验证插件，我认为这可以通过带有回调的所需验证来完成，但我不确定。
有人能指出我正确的方向吗？
更新：
这是一些代码的想法
required: function(element) {
return($('#chargeamtaddButton').attr('disabled', ? '','disabled');
}
寻找那个真/假选项标志来设置禁用属性
【问题讨论】：
标签： jquery
我实际上发现了最好的方法，它在插件中使用了一个未记录的方法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 添加到按钮，然后添加禁用属性。您可以通过 CSS 将禁用的样式应用于按钮。
【讨论】：
jQuery Validate Plugin Documentation: Form Method
上面的 validate 插件方法可以让你检查一个表单是否有效。因此，如果您无法使回调起作用，那么我将运行一个计时器并检查表单是否经常有效，如果是则启用您的按钮。不过这很糟糕。
我找不到验证插件的成功回调，所以我认为您在使用 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>
或者至少是这样的。祝你好运！
【讨论】：
一个更优雅和快速的解决方案是简单地覆盖默认的点击和按键事件添加你需要的代码如下而不是添加另一个监听事件
$("#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 代码 - 最初禁用（引导 3 类）：
<a onclick="if(!$(this).hasClass('disabled')) { $('#form').submit(); }" class="submit btn btn-danger disabled">button_save</a>
这可以很容易地与 jquery 插件 areYouSure 一起使用，以便仅在进行实际更改时启用提交：
if (this.checkForm() && $('#form').hasClass('dirty')) { // checks form for validity
使用静默初始化插件：
$('#form').areYouSure( {'silent':true} );
【讨论】：
我以前使用过验证插件，但我不记得所有细节了。我很确定它是这样的：
$(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...
});
});
由于使用验证插件的方法有很多，很难给你完美的建议，但我希望我所展示的内容能让你更好地了解如何继续前进。也许如果您提供更多代码和 HTML，我可以为您提供更多帮助。
【讨论】：
success 方法不能在rules 方法下。此外，success 方法仅在第一次提交表单后才开始触发。每当表单上的任何内容发生更改时，它也会被触发，这意味着如果您所在的特定字段验证，即使您表单上的其他字段没有，它也会返回 true。这意味着更改当前字段标签或添加有关当前字段的消息。简单阅读手册就可以解释这种行为。 docs.jquery.com/Plugins/Validation/validate