Question

我想创建一个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/

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事件组合的更脏的解决方案。

<强>更新

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

将匿名函数包装到命名函数中，例如updateButtonState
使用change

使用input

绑定文本控件

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

Answer 2

这可以快速修复，但它可以工作....再添加一个事件键。

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

SC.stream

这可能有所帮助。

Answer 3

而不是'change'使用'keyup paste'作为事件。 fiddle

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

3 个答案: