Disable Submit button until Input fields filled in

Your event binding is only on document ready.

So there is no listener when you change something.

Do this instead :

$(document).ready(function (){
    validate();
    $('#inputName, #inputEmail, #inputTel').change(validate);
});

function validate(){
    if ($('#inputName').val().length   >   0   &&
        $('#inputEmail').val().length  >   0   &&
        $('#inputTel').val().length    >   0) {
        $("input[type=submit]").prop("disabled", false);
    }
    else {
        $("input[type=submit]").prop("disabled", true);
    }
}

Your current code is fine, but doesn't respond to user events, which is where you're tripping.

$('#inputName, #inputEmail, #inputTel').keyup(function(){
    if($(this).val().length > 0){
        $("input[type=submit]").prop("disabled", false);
    }else{
        $("input[type=submit]").prop("disabled", true);
    }
});

Edit actually, this won't work. because one of those elements will caus ethe submit button to become enabled, regardless of the other ones. I'll hotfix momentarily.

Edit Here's the rough draft fix, it could probably be prettier, but will definitely be a good starting point.

var toValidate = $('#inputName, #inputEmail, #inputTel'),
    valid = false;
toValidate.keyup(function () {
    if ($(this).val().length > 0) {
        $(this).data('valid', true);
    } else {
        $(this).data('valid', false);
    }
    toValidate.each(function () {
        if ($(this).data('valid') == true) {
            valid = true;
        } else {
            valid = false;
        }
    });
    if (valid === true) {
        $('input[type=submit]').prop('disabled', false);
    }else{
        $('input[type=submit]').prop('disabled', true);        
    }
});

And here's your jsFiddle illustrating this method

Tags:

Forms

Jquery