Question

在表单中，我希望在传递表单上的验证后删除属性disabled =“disabled”。

验证本身有效，但我的提交按钮不起作用。只有当所有字段都是绿色时，它才必须处于活动状态。

jsfiddle中的代码：

我做错了什么？

Answer 1

对于冗长的代码感到抱歉，但这似乎有效（已移除return并检查empty，并将blur替换为bind('blur keyup')）

$(document).ready(function() {
    var name_error = 1;
    var email_error = 1;
    var message_error = 1;

    // Check name field
    $('#name').bind('blur keyup', function() {
        $('#name_msg').html("");
        var name = $('#name').val();

        if (name === '') {
            name_error = 1;
            $('#name-group').addClass('error');
            $('#name_msg').append('Field is empty');
        } else if (name.length < 2) {
            name_error = 1;
            $('#name-group').addClass('error');
            $('#name_msg').append('Must be at leas 2 characters long');
        } else {
            name_error = 0;
            $('#name-group').removeClass('error');
            $('#name-group').addClass('success');
        }
        enableButton();
    });

    // check email field
    $('#email').bind('blur keyup', function() {
        $('#email_msg').html("");
        var email = $('#email').val();

        var reEmail = /^[A-Za-z0-9._-][a-zA-Z0-9._-][A-Za-z0-9._-]+@([a-zA-Z0-9.-]+\.)+[a-zA-Z0-9.-]{2,4}$/;

        if (email === '') {
            email_error = 1;
            $('#email-group').addClass('error');
            $('#email_msg').append('Field is empty');
        } else if (!reEmail.test(email)) {
            email_error = 1;
            $('#email-group').addClass('error');
            $('#email_msg').append('Email is not valid');
        } else {
            email_error = 0;
            $('#email-group').removeClass('error');
            $('#email-group').addClass('success');
         }
        enableButton();
    });

    // check message field
    $('#message').bind('blur keyup', function() {
        $('#message_msg').html("");
        var message = $('#message').val();

        if (message === '') {
            message_error = 1;
            $('#message-group').addClass('error');
            $('#message_msg').append('Field is empty');
        } else if (message.length < 6) {
            message_error = 1;
            $('#message-group').addClass('error');
            $('#message_msg').append('Must be at leas 6 characters long');
        } else {
            message_error = 0;
            $('#message-group').removeClass('error');
            $('#message-group').addClass('success');
        }
        enableButton();
    });

    // verzendknop pas activeren nadat alles is ingevuld en gecontroleerd
    function enableButton() {
        if (name_error!== 0 || email_error!== 0 || message_error !== 0) {
            $('#sendit').attr('disabled', 'disabled');
        } else {
            $('#sendit').removeAttr('disabled');
        }
    };
});

Answer 2

问题是您对keyup绑定的选择器：$（'form＆gt; input'）该选择器将应用于表单标记正下方的所有输入字段。有关子选择器的更多信息，请阅读http://api.jquery.com/child-selector/

如果你改成它，它应该有效：

// verzendknop pas activeren nadat alles is ingevuld en gecontroleerd
    $('form  input').keyup(function() {
        var empty = 0;
        $('form  input').each(function() {
            if ($(this).val() === '') {
                empty = 1;
                return empty;
            }
        });

        if (empty || name_error || email_error || message_error !== 0) {
            $('#sendit').attr('disabled', 'disabled');
        } else {
            $('#sendit').removeAttr('disabled');
        }
    });

验证字段后，从Twitter Bootstrap中的“提交”按钮中删除属性“已禁用”

2 个答案: