[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Jquery validation not working with Jquery mobile

Posted on 2014-08-22
13
Medium Priority
?
524 Views
Last Modified: 2014-08-28
I can't seem to get the jQuery validation library to work with JQuery mobile:

http://sts.ideasdesigninc.com/

Here is my code:

 $(document).on('pageinit', function(){
	$("#surveyForm").validate({ 	
		errorPlacement: function(error, element) {
			error.insertBefore("#navigation");
		}, 
		messages: {
			q1: { required: "You must choose a gender" },
			q2: { required: "You must select a birth year" },
			"q3[]": { required: "You must make at least one selection" },
			"q4[]": { required: "You must make at least one selection" },
			"q5[]": { required: "You must make at least one selection" },
			"q5b[]": { required: "You must make at least one selection" },
			q6: { required: "You must make a selection" },
			"q7[]": { required: "You must make at least one selection" },
			"q8[]": { required: "You must make at least one selection" },
			"q9[]": { required: "You must make at least one selection" },
			"q10[]": { required: "You must make at least one selection" },
			fname: { required: "You must must enter your first name" },
			lname: { required: "You must must enter your last name" }
		}
	});	
});

Open in new window


I've tried using the 1.x version of jquery, .. but it didn't make any difference.

I had the jQuery validation working great prior to my having added jQuery mobile .. but now it's not working at all.   Before I give up and roll my own javascript, .. can anyone here help me troubleshoot and perhaps fix this?

Thanks,
- Yvan
0
Comment
Question by:egoselfaxis
  • 5
  • 4
  • 4
13 Comments
 
LVL 83

Assisted Solution

by:leakim971
leakim971 earned 400 total points
ID: 40279179
use the not minified version of jquery validate to start, it will help to debug the plugin
currently you've an error with thejquery validate plugin
0
 

Author Comment

by:egoselfaxis
ID: 40279340
OK - all of the javacript libraries have been replaced with non-minified versions:

http://sts.ideasdesigninc.com/

- Yvan
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40279350
work fine now...
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:egoselfaxis
ID: 40279606
No it isn't.  What you're seeing is the native HTML5 required field checking .. which is supposed to be overriden and handled by my jquery validation script.

- yg
0
 
LVL 43

Expert Comment

by:Rob
ID: 40280406
On your site, did you see the PHP warnings that is affecting the markup?  There's a whole lot if you inspect the "birth year" dropdown:

Warning:  date() expects at least 1 parameter, 0 given in /home/ideasdes/public_html/sts/index.html on line 1253

Warning:  date() expects at least 1 parameter, 0 given in /home/ideasdes/public_html/sts/index.html on line 1256

Open in new window

screenshot
0
 

Author Comment

by:egoselfaxis
ID: 40285871
Rob -- you're correct about the PHP errors (thank you for pointing that out -- I will address it).   However, .. that's definitely not the underlying  cause of the problem, as I've already verified it by instead hardcoding that birth year dropdown and eliminated the errors:

http://sts.ideasdesigninc.com/

What I'm expecting to see are my custom messages being inserted above the Back & Next buttons, as indicated in my jQuery script:

$(document).on('pageinit', function(){
	$("#surveyForm").validate({ 	
		errorPlacement: function(error, element) {
			error.insertBefore("#navigation");
		}, 
		messages: {
			q1: { required: "You must choose a gender" },
			q2: { required: "You must select a birth year" },
			"q3[]": { required: "You must make at least one selection" },
			"q4[]": { required: "You must make at least one selection" },
			"q5[]": { required: "You must make at least one selection" },
			"q5b[]": { required: "You must make at least one selection" },
			q6: { required: "You must make a selection" },
			"q7[]": { required: "You must make at least one selection" },
			"q8[]": { required: "You must make at least one selection" },
			"q9[]": { required: "You must make at least one selection" },
			"q10[]": { required: "You must make at least one selection" },
			fname: { required: "You must must enter your first name" },
			lname: { required: "You must must enter your last name" }
		}
	});	
});

Open in new window


Clearly, .. the jQuery validation is being completely ignored -- although only when trying to co-exist jQuery mobile.  Without it, .. the jquery validation works fine.

In the research I've done, .. I've read that when combining jQuery validation with jQuery mobile -- you need to wrap the jQuery validation code with the following:

$(document).on('pageinit', function(){ 
...
}); 

Open in new window


I've tried it both with and without that wrapper .. yet it still doesn't make any difference.

I'm just about to give up on this .. unless someone here has a solution for me.

Thanks,
- Yvan
0
 
LVL 43

Expert Comment

by:Rob
ID: 40286966
give me some time today to look at it now you've fixed those php errors. Failing that a moderator will be able to get other experts involved so don't give up just yet ;)
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40286998
when thing like that happen to me, I don't try to fix the whole thing, just restart from scratch until it fail back.
work fine here with you files : http://jsfiddle.net/njmxvwwa/
0
 

Author Comment

by:egoselfaxis
ID: 40287933
leakim971 -- although the JS fiddle based example you created does work for me -- I'm not sure if this is a reliable means of troubleshooting or not.  

Note that my survey is contained within a single page --- not spread out across multiple pages.  It's PHP based, and to advance to the next question in the survey, I simply check to see if a specific POST variable is present:

// Check to see if the Q4 submit button was clicked
<?php } else if (isset($_POST['Q4'])) {  ?>

{ show form for question #4 }

// Check to see if the Q3 submit button was clicked
<?php } else if (isset($_POST['Q3'])) {  ?>

{ show form for question #3 }

Open in new window


Is it possible, perhaps, that when jQuery mobile is applied, it's looking at the entire page as a whole and getting confused when it sees multiple instances of a form that has the id value of "surveyForm" ?

- Yvan
0
 
LVL 83

Expert Comment

by:leakim971
ID: 40289350
when thing like that happen to me, I don't try to fix the whole thing, just restart from scratch until it fail back.

So remove/comment your first page (take questionaire)
comment all the other page using putin the content inside
<!-- and -->
So you have/jump to your first questionaire, test it, if it don't work, remove all the fields and add one by one to check .
If it don't work with just one, please come back here and let we see that.
0
 
LVL 43

Accepted Solution

by:
Rob earned 1600 total points
ID: 40289779
jQuery mobile submits forms using ajax so the resulting validation script does run.

To see what I mean and to force your form to not use ajax, add this attribute to all your forms: data-ajax="false"

Then the validation works fine.
0
 
LVL 43

Expert Comment

by:Rob
ID: 40289784
You may also want to look at the mobileinit event as jQuery needs to bind to the DOM elements before jQuery Mobile loads.

More info: http://demos.jquerymobile.com/1.2.1/docs/api/globalconfig.html
0
 

Author Closing Comment

by:egoselfaxis
ID: 40290399
Rob -- thanks so much!  Adding data-ajax="false" to all of the forms definitely solved the problem!  My survey form and the jquery validation are now working as expected.  Now all I have to do is go through and style the error messages (and also figure out how to suppress those PHP errors in my Birth Year dropdown).  

http://sts.ideasdesigninc.com/

Leakim971 - thanks to you as well.  Your suggestion to switch to the non-minified versions of jQuery was very helpful with the troubleshooting.  I've given you a few points as well.

Thanks guys!
- Yvan
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question