1

In a form I want to remove the attribute disabled="disabled" after the validation on the form is passed.

The validation itself works, but my submit button doesn't work. It must be active only when all fields are green.

the code in jsfiddle:

http://jsfiddle.net/7FYPY/

What am I doing wrong?

4

2 に答える 2

4

Sorry for the lengthy code, but this seems to be working (removed returns and check for empty, and replaced blur with 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');
        }
    };
});
于 2012-05-18T12:28:29.990 に答える
2

問題は、キーアップバインディング用のセレクターです。$（'form> input'）そのセレクターは、formタグのすぐ下にあるすべての入力フィールドに適用されます。子セレクターの詳細については、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');
        }
    });
于 2012-05-18T12:09:28.037 に答える