jquery validation: submit button enabled only if all watched elements validate

Question

Watching multiple elements in a form, I would like to enable the submit button only when all elements successfully validate. Here's what I have attempted:-

$('#beta_signup_form').validate({
    rules: {
        name: {
            required: true,
            minlength: 4
        },
        email: {
            required: true,
            email: true 
        }
    },
    focusCleanup: true,
    onkeyup: false,
    errorElement: "span",
    submitHandler: function(form) {
        if ($('#beta_signup_form').valid()) {
            console.log("now we enable the submit button!");
        }   
    }

});

UPDATES

I was expecting the submitHandler to be triggered and the if if ($('#beta_signup_form').valid()) condition to check that all our fields are valid, before we enable the submit button so that the user can click on it to make an ajax call to submit the form.

But somehow, nothing gets triggered when all fields are valid.

I figured out what I am getting wrong and that is the submitHandler attribute has nothing to do with detecting the "all fields validated" event. The submitHandler attribute only gets fired if I click on my form button, which is not what I need.

So my question is - which is the event I need to bind to? Is there an attribute that can be used for setting up a trigger when all fields in the form validate?

Here's the form html code:-

    <form id="beta_signup_form" postUrl="{% url 'signups_beta_users' %}" method="post" csrf_token="{{ csrf_token }}">{% csrf_token %}
        <div>
            <input type="text" id="name" name="name" placeholder="Name" />
        </div>
        <div>
            <input type="email" id="email" name="email" placeholder="Email address" />
        </div>
        <button class="btn btn-success" type="submit" id="request-trial" href="#request-for-free-trial">Notify Me</button>
        <div class="loading"></div>
    </form>

This link shoud help you out: http://stackoverflow.com/questions/882406/jquery-disable-button-not-submit-until-field-validates-validation-plugin — Alex, Dec 07 '12 at 11:10
Yes. I read through this but it does not work for multiple fields. The `success` event gets triggered the moment 1 field gets validated while the rest of the fields are still empty, which is not good enough for my purpose. I need to trigger the "enable button" event **only** when ALL fields in the form validate. — Calvin Cheng, Dec 07 '12 at 11:20
You do not need to conditionally check `$('#beta_signup_form').valid()` within the `submitHandler`. By definition, the form is already valid when the code within `submitHandler` function is fired. See: http://jsfiddle.net/tCpXT/2/ — Sparky, Dec 11 '12 at 21:03

score 2 · Answer 1 · answered Dec 07 '12 at 13:55

This code works perfectly for me (see here : http://jsfiddle.net/tCpXT/) :

            <form id="beta_signup_form" postUrl="" method="post">
                <div>
                    <input type="text" id="name" name="name" placeholder="Name" />
                </div>
                <div>
                    <input type="email" id="email" name="email" placeholder="Email address" />
                </div>
                <button class="btn btn-success" type="submit" id="request-trial" href="#request-for-free-trial">Notify Me</button>
                <div class="loading"></div>
            </form>
    <script type="text/javascript">
            $(document).ready(function() {
                $("#beta_signup_form").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 4
                    },
                    email: {
                        required: true,
                        email: true 
                    }
                },
                submitHandler: function(form) {
                    if ($("#beta_signup_form").valid()) {
                        alert('now we enable the submit button!');
                    }   
                }
                });

            });
            </script>

Yes. This works perfectly. My bad. I have a conflicting event (legacy code) bounded to my button and that was the reason causing my grieve. — Calvin Cheng, Dec 08 '12 at 02:46
[Exactly how is this behavior any different than what the `.validate()` plugin does by default?](http://jsfiddle.net/tCpXT/1/) http://jsfiddle.net/tCpXT/1/ — Sparky, Dec 11 '12 at 17:14

score 2 · Accepted Answer · edited May 23 '17 at 11:55

My answer:

$(document).ready(function() {
    $("#beta_signup_form").validate({
        rules: {
            name: {
                required: true,
                minlength: 4
            },
            email: {
                required: true,
                email: true
            }
        },
        submitHandler: function(form) {
            alert('submitted');
        }
    });
});

I am posting my answer in response to the previously accepted answer to demonstrate that you do not need any special function to do what the OP is asking. The .validate() plugin already behaves like this by default.

This is the jsFiddle from the accepted answer: http://jsfiddle.net/99mbLp1b/

Within that answer, the only difference is this bit of conditional code used within the submitHandler.

submitHandler: function(form) {

    if ($("#beta_signup_form").valid()) {
        alert('now we enable the submit button!');
    }  

}

As per the documentation, The submitHandler is the "Callback for handling the actual submit when the form is valid."

So if the submitHandler is only called when the form is valid, then this whole conditional check is completely superfluous and unnecessary...

if ($("#beta_signup_form").valid()) { ... };

It's always going to be true, since you'd never even get into the submitHandler function if the form wasn't already valid.

See demo for proof: http://jsfiddle.net/uehu47w1/

As you can see, it operates identically as the jsFiddle within the other answer.

score -1 · Answer 3 · edited May 23 '17 at 12:03

-1

Maybe you also have to test for 0 (see here : The jQuery Validation `valid()` method returns 0 when required is not true)

So it would be :

 if (($('#beta_signup_form').valid())||($('#beta_signup_form').valid()=="")) {
        console.log("now we enable the submit button!");
    }

edited May 23 '17 at 12:03

Community

1
1

answered Dec 07 '12 at 11:08

barakadam

2,179
1
16
15

jquery validation: submit button enabled only if all watched elements validate

3 Answers3