Link to home
Start Free TrialLog in
Avatar of Michael Sole
Michael Sole

asked on

JQuery validation plugin being ignored

I am using this (and a few other plugins) http://docs.jquery.com/Plugins/Validation to validate this form

http://lombardiassoc.myclient-review.com/test.php

Click, New (to empty the form) and then Submit and the validation code is being ignored. This was working and at some point it broke. I tried disabling all the non-necessary javascript and the problem is still happening. I need a second set of eyes to help me troubleshoot this. I am sure its something simple, I am just over looking it.

Please help
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

seems to be working in CHROME and FF (I didn't look on IE). What browser are you using?

I use this script too, though slightly differently. here's mine if it helps:
(Obviously you would need to customise to your needs)

 
var validator = $("#ContactForm").submit(function() {
			
		}).validate({
			rules: {
                                email: {
				required: true,
				email: true
                                },
				FirstName: "required",
                                LastName: "required",
                                phone: "required",
                                notes: "required",
                                imgverify: "required"
			},
                        messages: {
                            email: {
				required: "Please enter your email address."
                            },
                            FirstName: {
                                required: "Please enter your first name."
                            },
                            LastName: {
                                required: "Please enter your last name."
                            },
                            phone: {
                                required: "Please enter your phone number."
                            },
                            notes: {
                                required: "Please enter a message."
                            },
                            imgverify: {
                                required: "Please enter the image characters."
                            }
                        },
			errorPlacement: function(label, element) {
				// position error label after generated textarea
				if (element.is("textarea, input")) {
					label.insertAfter(element.next());
				}else{
                                    label.insertAfter(element);
                                }
                                
			}
		});

Open in new window

Avatar of Michael Sole
Michael Sole

ASKER

Yeah normally this script just works. However I had setup a test version of the form and forgot to make a change so it went to the login form and yes that is working. I typically develop in Chrome.

http://lombardiassoc.myclient-review.com/test.php

Please try this one.

I prefer to use the class method of identifying validation rules as it is quite a bit simpler to track, especially on forms with lots of fields.

You have a AJAX request on line 61. Comment that out temporarily and see if that fixes it. I think it could have something to do with the form repopulating on submit... Not sure, give it a shot...
I did try commenting all of the javascript except the form validation and the problem still occurs.

I have removed the ajax completely.
ASKER CERTIFIED SOLUTION
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
kozaiwaniec, thank you so much. You've given me a narrower field to troubleshoot.

The thing is, it did work at some point but I added much since then, I suspect I might of changed the JQuery version and that the metadata plugin might not be compatible.

Regardless, I believe I have things I might try now.

Happy New Year to you!
Cool. Let me know if you figure out what was wrong.

Happy New Year to you too!
Hey I know I closed the question but, I re-wrote the validation to not use the class/metadata method.

However I have one last odd problem, the last field causes the validation to be ignored and I can't see why that would be. If I remove it

claimantAltPhone: {
                              phoneUS:true
                        }

It works. Any thoughts?
Nevermind, I accomplished what I wanted by using the mask plugin, however it is a strange bug.

Again, re-writing to use the not class method is how I went about fixing the problem.

Thanks again!
It might have something to do with it not being required. Try it with required:true to test this theory...
OR,

required:false

just a thought..
I did try that, it didn't work. However required:true did.
Since there is only one condition, you could try writing it this way:

claimantAltPhone: "phoneUS"

Let me know if that works.
Ah the quotes!

Thats what I was missing, forest through the trees :)