To disable a send button if fields empty by jQuery

Question

How can you disable the send -button if there is one or more input -fields empty?

My attempt in pseudo-code

if ( $("input:empty") ) {
    $("input:disabled") 
}
else 
  // enable the ask_question -button

I have been reading these articles without finding a right solution

Official docs about empty: this is like not relevant because it looks for all input -fields
a thread about disabled -feature in jQuery: this seems to be relevant
to be able to test jQuery Firefox/terminal: to get a testing environment would help me most

I use at the moment the following code. It contains one bug about the character ;, but I cannot find it.

#1

$(document).ready(function(){
    $("#ask_form").validate(){
        rules: {
            username {
                required: true,
                minlenghth: 2
            },
            email: {
                required: true;
                minlength: 6
            },
            password {
                required: true,                                                                                                                                    
                minlength: 6
            }
        } 
    });
}

#2 Meder's code

I slighhtly modified Meder's code. It disables the send -button permanently so it has a bug too.

$(document).ready(function(){
    var inputs = $('input', '#ask_form'), empty = false;
    // can also use :input but it will grab textarea/select elements and you need to check for those..

    inputs.each(function() {
        if ( $(this).val() == '' ) {
            empty = true;
            return;
        }
    });

    if ( empty ) {
        $('.ask_question').attr('disabled', 'disabled'); // or true I believe.
    }
});

Jason · Accepted Answer · 2009-08-27 21:56:34Z

10

var $submit = $("input[type=submit]");
if ( $("input:empty").length > 0 ) {
   $submit.attr("disabled","disabled");
} else {
   $submit.removeAttr("disabled");
}

edited Aug 27, 2009 at 21:56

answered Aug 27, 2009 at 17:50

Jason

52.7k38 gold badges139 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mark Hurd Over a year ago

Just make sure to put this in an onChange event or similar so it will fire each time a field is changed.

Léo Léopold Hertz 준영 Over a year ago

Your code does disable the buttons. However, it does disable buttons too when the fields are not empty. - How do you read this input:empty).length > 0 in English? - My attempt to apply the given rule to the tag input which is empty such that its length is greater than zero. - This does not make sense to me, since my consideration leads to a contradiction.

Léo Léopold Hertz 준영 Over a year ago

I removed .length > 0, but the buttons remain disabled.

Jason Over a year ago

what this does is gets a collection of all the input elements that have no children, including text nodes. the length property just determines how many items are in the collection. if there are 0 items in the collection, the length will be 0. you can obviously be more specific in your selector, like $("input.myInputs:empty") but this should do the trick.

Jason Over a year ago

i updated my code so that if everything is ok but previously was not, the button becomes enabled again

|

Phill Pafford · Accepted Answer · 2009-08-27 17:50:42Z

2

jQuery validation plugin
Documentation
Demo

answered Aug 27, 2009 at 17:50

Phill Pafford

85.5k92 gold badges268 silver badges385 bronze badges

1 Comment

Léo Léopold Hertz 준영 Over a year ago

Thank you for the links! I am using the code in the demo at the moment. There is one bug in my code of the question.

meder omuraliev · Accepted Answer · 2009-08-27 17:51:17Z

0

var inputs = $('input', 'form#foo'), empty = false;
// can also use :input but it will grab textarea/select elements and you need to check for those..

inputs.each(function() {
    if ( $(this).val() == '' ) {
        empty = true;
        return;
    }
});

if ( empty ) {
    $('#el').attr('disabled', 'disabled'); // or true I believe.
}

answered Aug 27, 2009 at 17:51

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

1 Comment

Léo Léopold Hertz 준영 Over a year ago

Your code has the same problem as Jason's. It disables the send -button permanently.

Phill Pafford · Accepted Answer · 2009-08-28 12:57:37Z

-1

Missing the closing, try this for example #1:

$(document).ready(function(){
    $("#ask_form").validate(){
        rules: {
            username {
                required: true,
                minlenghth: 2
            },
            email: {
                required: true;
                minlength: 6
            },
            password {
                required: true,                                                                                                                                    
                minlength: 6
            }
        } 
    });
});

answered Aug 28, 2009 at 12:57

Phill Pafford

85.5k92 gold badges268 silver badges385 bronze badges

Collectives™ on Stack Overflow

To disable a send button if fields empty by jQuery

#1

#2 Meder's code

4 Answers 4

8 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

#1

#2 Meder's code

4 Answers 4

8 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related