Expressionengine Custom forms fails with Jquery Validate plugin

Question

I have two forms that are almost exact that I’m validating with jquery validate plugin. One form works https://www.anticipateinvitations.com/index.php/contact while the other https://www.anticipateinvitations.com/index.php/how doesn’t work. Both forms are using the same validate method

$('.contact-form').each(function() {  // attach to all form elements on page
        $(this).validate({       // initialize plugin on each form
            // global options for plugin

        rules: {
            fname: "required",
            ptime: "required",
            email: {
                required: true,
                email: true
            },
            captcha: {
                        required: true,
                        captcha: true
                    }
        },
        messages: {
            fname: "Please enter your name",
            ptime: "Select a preferred time", 
            email: {
                required: "Please provide an email address",
                email: "Please enter a valid email address"
            },
            captcha: {
                required: "Give an answer to the sum"
            }           
        }

        });
    });

Initially I was getting invalid input error on the form that doesn’t work until I added <input type="hidden" name="XID" value="{XID_HASH}"> after searching around for a solution. Now the form just reloads the page after submission and the validation plugin does not fire.

The forms have different IDs so that I can handle submission differently. All custom JS is in one file. I had tried separating the validate using the IDs which didn't work. Jquery is present on page since on firebug I can play around with the DOM elements but it feels like there is no javascript on the second form since even the calendar on that page does not working which works on the form that is ok, Im running EE 2.7.2 secure forms submission is on.

Any help please?

Answer 1

Works now after some clean up, I guess there were some other JS codes conflicting, all validate code still remains the same.

Answer 2

Normally this line...

$('.contact-form').each(function()

would be specific to the ID of the form that will be validated. I'm assuming that both of these forms have a class of 'contact-form'? If they're both on separate web pages then I guess that would work. But I prefer to have a specific ID for each form and then call the validation on that specific ID. Does that present any solutions?

Answer 3

I had this issue too. Can't tell you what I did, but mine works!

Here is my JS:

http://codepen.io/anon/pen/GFhDC/