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

Question

我有以下代码,其中我有2个电子邮件输入字段,我需要验证它们是相同的,使用jQuery验证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 ready事件处理程序内的JavaScript中.

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

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