JQuery Validation Plugin - Cannot get resetForm to work

Question

Im using JQuery's Form Validation plugin and getting through it for the most part. However, my problem now is that I cannot get resetForm to work properly. I think that it might have something to do with where I am placing the variable declaration.

Here is my Validation script (which is in a separate js file by the way:

var validator = $("popcornOrder");

    $(document).ready(function() {
        validator.validate({
                rules: {
                    fName:      "required",
                    lName:      "required",
                    street:     "required",
                    city:       "required",
                    state:      {required: true, state: true},
                    zip:        {required: true, ziprange: true},
                    accountNum: "required",
                    email:      {required: true, email: true},
                    pwd:        "required",
                    confPwd:    {required: true, equalTo: "#pwd"},
                    payment:    "required"
                },
                messages: {
                    fName:      "Everyone has a first name, we need to know yours.",
                    lName:      "Unless you're a rockstar, we need your last name too.",
                    street:     "Street is required.",
                    city:       "City is a required field too.",
                    state:      {required: "State is required.", state: "You need to put in proper state abbreviation"},
                    zip:        {required: "Please enter an appropriate zip code", ziprange: "Not a valid format, please try again"},
                    accountNum: "You cannot order without entering an account number.",
                    email:      {required: "We need your email address", email: "That's not an email address"},
                    pwd:        "A password is required.",
                    confPwd:    {required: "You already entered it once, can you do it again?", equalTo: "Does not match"},
                    payment:    "Please enter a payment type."

                },
                highlight:
                    function(element) {
                        $(element).addClass('errorBorder');
                    },
                unhighlight:
                    function(element) {
                        $(element).removeClass('errorBorder').prop("title", "");
                    },
                invalidHandler: function(form, validator) {
                    var errors = validator.numberOfInvalids();
                        if (errors) {
                             var message = errors == 1
                                ? 'You missed 1 field. It has been highlighted'
                                : 'You missed ' + errors + ' fields. They have been highlighted. Hover mouse over input for specfic error info.';
                             $("div.error span").html(message);
                             $("div.error").show();
                             } else {
                            $("div.error").hide();
                        }
                 },
                 focusInvalid: false,
                 errorPlacement: function(error, element) {
                    $(element).prop("title", error.text());
                 }
        });
    });

Then, on the form HTML itself, I simply have the appropriate js files pulled in:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/mmiller.js"></script>

Now, I have two buttons at the bottom, like so:

<input type="image" name="submit" id="submit" src="img/submit-btn.jpg" width="74" height="77" />
        <input type="image" name="clear" id="clear" src="img/clear-btn.jpg" width="119" height="77" onclick="validator.resetForm();" />

The problem is that before I added var validator = $("popcornOrder");, the submit button actually caused the validation to fire and the form to respond appropriately. (At this point I was just $("popcornOrder").validate ({ rules: ...});

Anyway, now that I actually create validator, the form gets cleared whether I click the Submit button or the Clear button. What gives?

Answer 1

I was able to get this working by: 1.) Changing the button type to reset (instead of image); 2.) Using CSS to style it back to the image I wanted; 3.) Creating a function that removes the error classes on the inputs as well as the error message div. 4.) Added that function to the onClick() event for the reset button:

function clearForm(){
    $('input').removeClass('errorBorder').prop('title', '');
    $('div.error').hide();
}

.....

<input type="reset" name="reset" id="reset" class="buttonReset" onclick="clearForm();"  />

Thanks again for the help!

Answer 2

You need the validator's instance in order to invoke resetForm() method. You can do this is two ways:

Actually validator.validate() returns the validator instance and from where you can call the resetForm().

var validator = $("popcornOrder");
var validatorInst;

    $(document).ready(function() {
        validatorInst = validator.validate({
                rules: {
                    fName:      "required",
                    .
                    .
                    .

And now just call onclick="validatorInst.resetForm();" on your <img /> tag.

OR

You can just call onclick="validator.validate().resetForm();". This will work too.

Answer 3

Input type of "image" acts as a submit button.

The browser might be confused about which one is submit and which one is reset. Instead of using input type="image" for both buttons, use it for the submit button and use input type="reset" for the 'clear' button.

If you must have an image, style it with CSS instead, or just rig up an "img" tag or "a" tag to reset the form. Both are simple alternatives.