验证字段后，从 Twitter 引导程序的提交按钮中删除属性"disabled"

Question

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

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

JSFIDDLE 中的代码：

http://jsfiddle.net/7FYPY/

我做错了什么？

Answer 1

很抱歉代码冗长，但这似乎有效(删除return s 并检查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

问题是你对键合绑定的选择器：$('表单>输入'(该选择器将应用于表单标签正下方的所有输入字段。有关子选项器的详细信息，请阅读 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');
        }
    });