检查空白字段并禁用按钮

Question

I'm checking for three text fields, and if empty, the submit button should not be clickable. If all three text fields are not empty, then (as you guessed) the submit button will be clickable.

//nameText, emailText, commentsText = text fields
//If fields are non-empty, disabled status = false
$(nameText, emailText, commentsText).each(function() {
    if ($(this).val() != "") {
        $('#submitButton').prop('disabled', false);
    }
});

//If fields are empty, disabled status = true
$(nameText, emailText, commentsText).each(function() {
    if ($(this).val() == "") {
        $('#submitButton').prop('disabled', true);
    }
});

This isn't exactly working. The button is constantly disabled, and doesn't get enabled even when the fields are filled. Can someone point out what I'm doing wrong? Thank you.

Answer 1

You're missing a parenthesis:

if $(this).val() == "") {

should read:

if ($(this).val() == "") {

This is the case for both of your conditions.

I'd also use a flag so that you only need to use the one loop:

var isValid = true;

$(nameText, emailText, commentsText).each(function() {
    if ($(this).val() == "")
        isValid = false;
});

$('#submitButton').prop('disabled', !isValid);

Answer 2

You could check it using:

$('#submitButton').prop('disabled', function(){
    return !!$(nameText).add(emailText).add(commentsText).filter(function(){
       return !this.value.trim(); 
    }).length
});

Answer 3

May be you can take a look at this code snippet.

 $(document).ready(function(){ checkFormValidity(); $("#name,#email,#comment ").keyup(function(){ checkFormValidity(); }); function checkFormValidity(){ var allFilled = true; $("#name,#email,#comment").each(function() { if ($(this).val() == "") { allFilled = false; } }); $('#submitButton').prop('disabled', (!allFilled)); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form > <fieldset> <legend>Personal information:</legend> Name:<br> <input type="text" id="name" name="Name" value=""> <br> Email:<br> <input type="text" id="email" name="email" value=""> <br> Comments:<br> <input type="text" id="comment" name="comment" value=""> <br><br> <input type="submit" id="submitButton" value="Submit"> </fieldset> </form>