0

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?

1

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

| improve this answer | |
0

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?

| improve this answer | |
  • Also make sure that you are calling the jquery library on the page that is not working. If you can open an error console for the non-working web page/form does it show any javascript errors? – Bob Foster Mar 21 '14 at 14:48
  • Both forms have the same class .contact-form separate pages, so that I can just use a single validate method with a loop as show above. The forms different IDs so that I can handle submission differently. All JS is in one file. Had tried separating the validate using the IDs which didn't work. JS is present on page since on firebug I can play around with the DOM elements. – William Mar 22 '14 at 8:08
0

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/

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.