成功 jQuery 验证后启用禁用按钮

Question

我有以下代码，其中有 2 个电子邮件输入字段，我需要验证它们是否相同，使用 jQuery validate equalTo 可以成功运行。

<div class="control-group">
 <label class="control-label" for="inputEmail"><strong>Email Address</strong></label>
   <div class="controls">
    <input type="email" name="inputEmail" placeholder="jane.smith@email.com" id="inputEmail" required>
   </div>
    <label class="control-label" for="inputEmailConfirm"><strong>Confirm Email Address</strong></label>
     <div class="controls">
    <input type="email" name="inputEmailConfirm" placeholder="jane.smith@email.com" id="inputEmailConfirm" required>
    </div>
    </div>
  <button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Click me to buy">Credit Card Checkout &raquo; </button>

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

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

理想情况下，我想设置表单控件以利用 Bootstrap3 中的验证状态，详细信息在这里 - 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 插件动态禁用浏览器的 HTML5 验证，我从您的标记中删除了 required 属性并将 type="email" 更改为 type="text"。 （您已经在插件中指定了这些验证规则。）

<input type="text" name="inputEmail" placeholder="jane.smith@email.com" id="inputEmail" />
<input type="text" name="inputEmailConfirm" placeholder="jane.smith@email.com" id="inputEmailConfirm" />

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

---

编辑：

在上述场景中，您的页面完全依赖于 JavaScript。换句话说，没有 JavaScript，按钮总是被禁用。

如果您有服务器端验证并希望您的页面独立于 JavaScript，则需要从按钮标记中删除 disabled="disabled"，并将其添加到 DOM 就绪事件处理程序中的 JavaScript 中。

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

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

Answer 2

一个更优雅和快速的解决方案是简单地覆盖默认的点击和按键事件添加您需要的代码如下而不是添加另一个监听事件

$("#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 代码 - 最初禁用（引导 3 类）：

<a onclick="if(!$(this).hasClass('disabled')) { $('#form').submit(); }" class="submit btn btn-danger disabled">button_save</a>

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

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

使用静默初始化插件：

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