HTML表单验证（使用jquery.validate.js）在某些情况下不起作用

Question

我想创建一个HTML表单，其中必须包含电子邮件地址，一些文本和条款及条件协议。 当所有三个字段均有效时，应启用提交按钮。 到目前为止，我已经创建了脚本，并且几乎所有工作都正常。 html代码很简单：

<form id="myform">
    <input id="email" name="email" class="textox" placeholder="your@email.com" />
    <br/>
    <textarea maxlength="140" style="resize:none" class="textoxarea" placeholder="zbzbzxcbcx" name="field2"></textarea>
    <br>

        <input type="checkbox" class="required" value="None" name="check">
        I accept terms</input>
    <input type="submit" disabled />
</form>

js代码如下：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        errorElement: 'div',
        rules: {
            email: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            },
            terms: {
                required: true,
                maxlength: 2
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
    $('#myform').find('input, textarea').on('change', function () {
        var btn = $('#myform').find('input[type=submit]');
        if ($('#myform').valid()) {
            btn.removeAttr('disabled');
        } else {
            btn.attr('disabled', 'disabled');
        }
    });



});

在此示例中不起作用的情况是：首先，禁用提交按钮。 当用户输入电子邮件地址并检查条款和条件时，该按钮仍处于禁用状态，因为用户尚未填写文本区域。 当他用超过5个字符填充时，该按钮应更改为启用。 但事实并非如此。 仅当用户首先单击页面上的其他位置时，它才会更改-然后按钮更改其条件。 但是，如果不单击鼠标，它仍然处于禁用状态，该如何解决？ 我的jsfiddle代码在这里： http : //jsfiddle.net/xvAPY/263/

Answer 1

问题在于输入HTML控件失去焦点后会触发change事件。 有关change事件的更多信息： https : //developer.mozilla.org/en-US/docs/Web/Events/change 。 要在控件失去焦点之前对任何更改做出反应，您需要侦听表单中所有文本输入控件上的input事件： https : //developer.mozilla.org/en-US/docs/Web/Events/input 。 注意IE-仅适用于9+。 要对复选框中的更改做出反应，您仍应使用change事件。

文本控制的替代方案是更脏使用溶液组合keyup和paste事件。

UPDATE

在上述情况下，我认为最干净的方法是：

1. 将匿名函数包装到一个命名函数中，例如updateButtonState
2. 使用change绑定复选框

3. 使用input绑定文本控件

    $('#myform').find('input:text, textarea').on('input', updateButtonState); $('#myform').find(':checkbox').on('change', updateButtonState); 

Answer 2

这可以快速修复，但可以使用。...再添加一个事件键盘。

用下面的代码更改代码。

$('#myform').find('input, textarea').on('change keyup', function () {

这可能会有所帮助。

Answer 3

代替'change'使用'keyup paste'作为事件。 摆弄 。