views:

2588

answers:

4

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

  1. Official docs about empty: this is like not relevant because it looks for all input -fields
  2. a thread about disabled -feature in jQuery: this seems to be relevant
  3. 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.
    }
});
+2  A: 

jQuery validation plugin
Documentation
Demo

Phill Pafford
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.
Masi
+5  A: 
var $submit = $("input[type=submit]");
if ( $("input:empty").length > 0 ) {
   $submit.attr("disabled","disabled");
} else {
   $submit.removeAttr("disabled");
}
Jason
Just make sure to put this in an onChange event or similar so it will fire each time a field is changed.
Mark Hurd
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.
Masi
I removed `.length > 0`, but the buttons remain disabled.
Masi
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
i updated my code so that if everything is ok but previously was not, the button becomes enabled again
Jason
Your code is still buggy: it does not disable any button this time. **Why did you changed `$("input[type=submit]").attr("disabled","disabled");` to ` $submit.attr("disabled","disabled");`?** - I run your code also with a modification of your last code to your old code, but the same problem persists.
Masi
look, masi, it's not going to work verbatim. i'm giving you the framework to build upon. you have to insert the selectors that are relevant to your system. i pulled out `var $submit = $("input[type=submit]");` so that I didn't have to repeat myself and also so that the collection is called only once, which will speed up the process.
Jason
if you want to go back and put in `$("input[type=submit]");` in place of `$submit` it will work the same. go for it.
Jason
A: 
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.
}
meder
Your code has the same problem as Jason's. It disables the `send` -button permanently.
Masi
A: 

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
            }
        } 
    });
});
Phill Pafford