jquery validate all fields before submit

Question

Im trying to make sure that all fields are validated before submitting a form. I don't even know really where to start. I would like to have the submit button greyed out or just disabled until all the fields are successfully validated.

Here is the script:

$('document').ready(function(){
$('form').validate({
    rules: {
       a: {required:true, minlength:2},
       b: {required:true}
    },      
    messages: {
       a: {required: "enter your name!"},
       b: {required: "enter the date!"}                        
    },
    errorPlacement: function(error, element) {
    if(element.attr('name') == 'a'){
         $('#name').html(error);                
     }
     if(element.attr('name') == 'b'){
         $('#date').html(error);                
     }
    },
    success: function(label){
        label.addClass("valid").text("Ok!");                  
    },
    debug:true
});
$('#a').blur(function(){
    $("form").validate().element("#a");
});
});

Here is the html:

<form action="#" id='commentForm'>
    <input type="text" name="a" id="a">
    <input type="text" name="b" id="b">
    <button type="submit">Validate!</button>
<div id="date" style="border:1px solid blue;"></div>
<div id="name" style="border:1px solid red;"></div>
</form>

And here is the jsfiddle:

http://jsfiddle.net/wQxQ8/12/

Thanks a ton in advance!

IMHO, it's pointlessly redundant. After all, the validation prevents submission when invalid. The best way to see if the whole form is valid is within the submitHandler, but you can't leverage that without a submit button. — Sparky
– Sparky, Commented Nov 25, 2012 at 1:56
Thanks a ton sparky! Funny how that works...I didn't realize the submit button was disabled until the form was validated! lol Thank you! — user791187
– user791187, Commented Dec 1, 2012 at 4:04
It's not redundant from a user interface perspective, however. You might want the button to appear disabled as an indicator to the user whether or not they can proceed. — morewry
– morewry, Commented Dec 5, 2012 at 20:52
@morewry, "redundant" simply means that something is being done twice. From a user interface perspective, the plugin is already blocking form submission and making error messages appear. You may also want the button to appear disabled, but again, that would be redundant to the other user visual user interface indications that the form is blocked. Since the submitHandler: is the best place to test if the whole form is valid... you can't do that if the button itself is disabled. Which is why I implied in my initial comment, it may be possible, but also more trouble than it's worth. — Sparky
– Sparky, Commented Dec 9, 2012 at 20:00
Actually, "redundant" means (1) no longer needed or useful; superfluous or (2) able to be omitted without loss of meaning or function. Indicating UI state is potentially useful. Not indicating UI state is potentially a loss of meaning. I do, however, agree with your other points as relates to batch validation. — morewry
– morewry, Commented Dec 11, 2012 at 14:48

Maktouch · Accepted Answer · 2012-12-13 22:32:17Z

1

Without arguing if it's redundant or not (I personally like it since it's twice as clear this way)

Make the button disabled by default
On each input blur, check if the form is valid.

If it is, enable the button.

$('input').blur(function(){
    var thisform = $('form');
    if (thisform.valid()) {
        thisform.find("button").prop("disabled", false)
    }
 });

Fiddle: http://jsfiddle.net/wQxQ8/17/

You can also change blur to onkeyup, so it validates after each keystroke. It can have a performance hit though if you have a lot of inputs to validate.

answered Dec 13, 2012 at 22:32

Maktouch

3,24723 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

jquery validate all fields before submit

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related