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

Question

在表单中，我想在表单验证通过后删除属性 disabled="disabled" 。

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

jsfiddle中的代码：

http://jsfiddle.net/7FYPY/

我究竟做错了什么？

Answer 1

对不起，冗长的代码，但这似乎工作（删除returns 并检查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 > 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');
        }
    });