Question

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

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

更新：

以下是一些代码的概念

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

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

Answer 1

我实际上已经发现了最好的方法，它在插件中使用了一个未记录的方法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 2

jQuery Validate Plugin Documentation: Form Method

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

我找不到验证插件的成功回调，所以我认为你使用了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>

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

Answer 3

更优雅和快速的解决方案是简单地覆盖默认的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类）：

<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

使用silent：

初始化插件

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

Answer 4

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

$(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，我可以帮助您更多。

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

4 个答案: