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

【问题标题】：html form validation (with jquery.validate.js) in some cases doesn't workhtml 表单验证（使用 jquery.validate.js）在某些情况下不起作用
【发布时间】：2015-06-21 13:58:56
【问题描述】：

我想创建一个必须填写电子邮件地址、一些文本以及条款和条件协议的 html 表单。当所有 3 个字段都有效时，应启用提交按钮。到目前为止，我创建了脚本，几乎一切正常。 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/

【问题讨论】：

标签： javascript jquery ajax forms validation

【解决方案1】：

问题是change 事件在输入 HTML 控件失去焦点后被触发。有关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 事件组合的更脏的解决方案。

更新

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

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

使用input绑定文本控件

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

【讨论】：

谢谢，你能给我举一些关于键盘和粘贴的肮脏黑客的例子吗？为什么它是脏的？ :)
是的 - 你可以这样编码： $('#myform').find('input, textarea').on('change keyup paste', function () { ... . });它很脏，因为keyup 实际上会在控件具有焦点时触发您按下的任何键（箭头、ESC 等）。在您的情况下，这将起作用，但我认为更好的是绑定到 input 和 change: $('#myform').find('input, textarea').on('input change', function () { .... });

【解决方案2】：

这可以快速解决，但它会起作用....再添加一个事件键。

使用以下代码更改您的代码。

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

这可能会有所帮助。

【讨论】：

【解决方案3】：

使用'keyup paste' 代替'change' 作为事件。 fiddle.

【讨论】：