javascript - html 表单验证(使用 jquery.validate.js)在某些情况下不起作用

Question

我想创建一个 html 表单，其中必须填写电子邮件地址、一些文本以及条款和条件协议(protocol)。当所有 3 个字段均有效时，应启用提交按钮。到目前为止，我创建了脚本，几乎一切正常。 html代码很简单:

<form id="myform">
    <input id="email" name="email" class="textox" placeholder="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="750c1a0007351018141c195b161a18" rel="noreferrer noopener nofollow">[email protected]</a>" />
    <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 。要在控件失去焦点之前对任何更改使用react，您需要监听表单中所有文本输入控件上的 input 事件:https://developer.mozilla.org/en-US/docs/Web/Events/input 。请注意 IE - 这只适用于 9+。要对复选框中的更改使用react，您仍然应该使用 change 事件。

文本控件的替代方案是使用 keyup 和 paste 事件组合的更肮脏的解决方案。

更新

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

1. 将匿名函数包装成命名函数，例如updateButtonState
2. 使用change绑定(bind)复选框

3. 使用input绑定(bind)文本控件

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