javascript - JQuery 验证禁用按钮，直到所有字段都处于事件状态，但每次按键时不应显示错误

Question

这是我的 Fiddle

这是 html

<form action='includes/pgd_cc.php' METHOD='POST' id="ccSelectForm">
    <div class="control-group">
        <label class="control-label" for="inputEmail"><strong>Email Address</strong>

        </label>
        <div class="controls">
            <input type="text" name="inputEmail" placeholder="jane.smith@email.com" id="inputEmail" />
        </div>
        <label class="control-label" for="inputEmailConfirm"><strong>Confirm Email Address</strong>

        </label>
        <div class="controls">
            <input type="text" name="inputEmailConfirm" placeholder="jane.smith@email.com" id="inputEmailConfirm" />
        </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>

这是脚本

$(document).ready(function () {

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

    $('#ccSelectForm input').on('keyup blur', function () {
        if ($('#ccSelectForm').valid()) {
            $('button.btn').prop('disabled', false);
        } else {
            $('button.btn').prop('disabled', 'disabled');
        }
    });

});    

正如我正在做的

    $('#ccSelectForm input').on('keyup blur', function () {
        if ($('#ccSelectForm').valid()) {
            $('button.btn').prop('disabled', false);
        } else {
            $('button.btn').prop('disabled', 'disabled');
        }
    });

我的表单总是经过验证并显示错误。

我不想在用户自己键入单个单词时在表单中显示错误。

我只想在转到下一个字段后显示错误，并且它应该只验证当前字段的输入。

我怎样才能改变这个代码来实现这个..

Answer 1

最好将其绑定(bind)到submit。因此，当 keyup 被触发时，它只会验证所有内容一次，而不是每次输入时都验证一次。试试这个:

$('#emailSubmit').on('click', function () {
  return $('#ccSelectForm').valid();
});

fiddle :http://output.jsbin.com/valiwetese