jquery Form Validation Problems WordPress
- SOLVED
I am having trouble doing form validation with jQuery in wordpress v. 3.2.1. Also when using the Link option to enter URLs on this form it wasn't showing the links to me in the preview, so I am just going to type links as text.
First, here is a test form outside of WP with the same form elements using jquery for validation.
http://www.coolthaihouse.com/zz110826/zzTestForm10.php
(the link wasn't showing it is www.coolthaihouse.com/zz110826/zzTestForm10.php )
If you press the submit query button there will be required field error messages from the jquery pop up. One question I have on this form is why it doesn't work with the jquery file from WP. When I sourced in wp-includes/js/jquery/jquery.js instead of jquery-latest.js (which is from here:http://code.jquery.com/jquery-latest.js)
The version is 1.6.2 vs 1.6.1 in WP, but would have thought the WP version would work.
Next here is the WP form in which the jquery validation is not working:
http://www.coolthaihouse.com/zzblog110316a/contactjq/. No email is sent from either form. The messages in blue boxes are php based. Just press the Submit Query to see the errors. The form gets submitted each time and the jquery validation does not 'kick in'.
The things sourced in are the same as in the zzTestForm10.php. There the jquery-latest.js, jquery.validate.js and the small script to validate the feedbackform, which you can see in firebug. If I activate a simple jquery based 'alert' script on this page it does put up the alert (you can see this in firebug it is commented out).
Was enqueing the jquery stuff, this didn't work either, there seems to be no conflict at present as jquery is not queued it seems by looking at firebug and also the alert script does work.
So two questions, the first is why the WP jquery doesn't work in the zzTestForm10.php and the second is why the query validation doesn't work in the WP page.
Answers (4)
Kannan C answers:
These are not loading
<script type="text/javascript" src="./myjs/jquery-latest.js"></script>
<script type="text/javascript" src="./myjs/jquery.validate.js"></script>
Try to put full path, if you have your js files in your theme folder, say suppose wp-content/myjs/
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/myjs/jquery-latest.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/myjs/jquery.validate.js"></script>
macmiller comments:
i just changed to permalinks which is why the scripts didn't load. Will change as you indicate but for now use this link for the test page where it loads but still has the problem:
http://www.coolthaihouse.com/zzblog110316a/?page_id=673
macmiller comments:
modified links. everything is loading as it should now. however the suggested full path pointed to this:
src="http://www.coolthaihouse.com/zzblog110316a/wp-content/themes/mimbo/myjs/jquery.validate.min.js"
Kannan C comments:
Replace this below code: just you missed the double quotes before text/javascript.
<script type="text/javascript">
jQuery(document).ready(function($){
$("#feedbackform").validate();
});
</script>
macmiller comments:
that was it, mind fade on my end. thx
would also like to know why such a simple validation doesn't seem to work with the wordpress supplied included js, such as wp-includes/js/jquery/jquery.js. this file is quite a bit smaller than the one i am accessing, just doesn't have this functionality or am I doing something wrong with this as well?
Gabriel Reguly answers:
Hi macmiller,
For the second URL, you are missing the files.
"NetworkError: 404 Not Found - http://www.coolthaihouse.com/zzblog110316a/contactjq/myjs/jquery-latest.js"
jquery-latest.js
"NetworkError: 404 Not Found - http://www.coolthaihouse.com/zzblog110316a/contactjq/myjs/jquery.validate.js"
Regards,
Gabriel
Gabriel Reguly comments:
Hi macmiller,
For the first URL it will not work in WordPress unless you change your jQuery code.
From http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/
5. Proper jQuery coding conventions
All of the previous steps are nullified if proper jQuery coding conventions aren't followed. The most common issue I see with jQuery and WordPress is the misuse of the $ variable.
It is important to know that the version of jQuery that comes with WordPress automatically calls the jQuery.noConflict(); function, which gives control of the $ variable back to whichever library first implemented it. If you are loading a different copy of jQuery, you'll need to manually call jQuery.noConflict();, if necessary, from one of your JavaScript files.
As a general rule, you should not use the $ variable for jQuery unless you have used one of the shortcuts. The following is an example of how to shortcut jQuery to safely use the $ variable:
jQuery(function ($) {
/* You can safely use $ in this code block to reference jQuery */
});
Gabriel Reguly comments:
Oops,
Looks like you already are using jQuery safely
<script type=text/javascript">
jQuery(document).ready(function($){
$("#feedbackform").validate();
});
</script>
Well, then why not update your validate.js version, from
* jQuery validation plug-in pre-1.5.2
to
* jQuery Validation Plugin 1.8.1
You can find it here: [[LINK href="http://jquery.bassistance.de/validate/jquery-validation-1.8.1.zip"]]http://jquery.bassistance.de/validate/jquery-validation-1.8.1.zip[[/LINK]]
Using jquery.validate.min.js is the best option.
Regards and good luck,
Gabriel
Gabriel Reguly comments:
For the correct URLs for WordPress, please use:
<script type="text/javascript" src="ttp://www.coolthaihouse.com/zzblog110316a/myjs/jquery-latest.js"></script>
<script type="text/javascript" src="ttp://www.coolthaihouse.com/zzblog110316a/myjs/jquery.validate.js"></script>
Regards,
Gabriel
macmiller comments:
I just turned on permalinks after I got everything set up so that problem came up. sorry about that. Try this following link for a contact form which finds the scripts but still has the problem .
http://www.coolthaihouse.com/zzblog110316a/?page_id=673
Gabriel Reguly comments:
Ok, now the broken links are fixed.
But why are you using an old version of validation.js?
Could you update your validate.js version, from
* jQuery validation plug-in pre-1.5.2
to
* jQuery Validation Plugin 1.8.1
You can find it here: http://jquery.bassistance.de/validate/jquery-validation-1.8.1.zip
Using jquery.validate.min.js is the best option.
macmiller comments:
updated to the version of jquery.validate.min.js. and fully specified links. take a look now. thx
Gabriel Reguly comments:
Hi,
Glad to see that Kannan C found the issue.
Regards,
Gabriel
Grégory Viguier answers:
Hi.
There's an error in your scripts URL: "./myjs/jquery-latest.js" and "./myjs/jquery.validate.js".
macmiller comments:
now corrected. still having same problem.
ej_emman answers:
Regarding to your question:
"So two questions, the first is why the WP jquery doesn't work in the zzTestForm10.php and the second is why the query validation doesn't work in the WP page".
1.) On wordpress 3.2.1 jquery.js, there are some objects and methods on wordpress jquery.js that are not present to your jQuery latest. Thats why this conflicts happen.
2.) Your query is not working on wordpress because it was not properly implemented.
Meaning, you donot follow standard on how to place and fetch your javascript objects and methods in wordpress.