JQuery验证禁用按钮,直到所有字段都处于活动状态,但它不应该在每次按键时都显示错误


JQuery validate disable button until all fields are active, but it should not show error on every key press

这是我的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');
        }
    });

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

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

我只想在转到下一个字段后显示错误,它应该只验证当前字段的类型。

我如何更改此代码以实现此目的。。

最好将其绑定到submit。因此,当keyup被激发时,它只验证所有内容一次,而不是每次都对每个输入进行验证。试试这个:

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

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