Jump to content

Using JQuery Validation in Wordpress


twilitegxa

Recommended Posts

I need some help getting my validation working. I have the following form:

 

 


<form name="contact_form" id="contact_form" method="post" action="http://www.batyathebabycoach.com/wp-content/themes/twentyten/send_message.php">
  <div class="s3">
  <table width="589" border="0" cellspacing="0" cellpadding="0">
  
<tr>
<td>Name :</td>
<td> Email :</td>
</tr>


<tr>
<td><input type="text" id="txtName" name="txtName" value="<?php echo $name; ?>" tabindex="1" /> </td>
<td><input type="text" id="txtEmail" name="txtEmail" value="<?php echo $email; ?>" tabindex="2" /> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Location(city/country) :</td>
<td> Phone :</td>
</tr>
<tr>
<td><input type="text" id="txtLocation" name="txtLocation" value="<?php echo $location; ?>" tabindex="3" /></td>
<td><input type="text" id="txtPhone" name="txtPhone" value="<?php echo $phone; ?>" tabindex="4" /> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Age of Baby :</td>
<td>How did you hear about me? :</td>
</tr>
<tr>
<td><input type="text" id="txtAge" name="txtAge" value="<?php echo $age; ?>" tabindex="5" /> </td>
<td><input type="text" id="txtAbout" name="txtAbout" value="<?php echo $about; ?>" tabindex="6" /> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr><td colspan="2">Brief Explanation of Baby’s issues :</td></tr>
<tr><td colspan="2"><textarea cols="41" rows="6" id="txtIssues" name="txtIssues" value="<?php echo $issues; ?>" tabindex="7"></textarea></td></tr>


<tr>
<td> </td>
</tr>


<tr><td colspan="2">Other comments :</td></tr>
<tr>
<td colspan="2"><textarea cols="65" rows="6" id="txtComments" name="txtComments" value="<?php echo $comments; ?>" tabindex="8"></textarea> </td></tr>
<tr><td><br/> </td></tr>
<tr><td colspan="2">Enter the Captcha Code :</td></tr>
<tr>
<td colspan="2" ><!--captcha will go here -->  <input type="text" name="txtCaptcha" id="txtCaptcha" value="<?php echo $captcha; ?>" tabindex="9"</td></tr>
<tr>
<td> </td>
</tr>
<tr><td colspan="2"><input type="submit" id="submit" name="submit" value="Submit" tabindex="10" /> <input type="reset" id-"reset" name="reset" value="Reset" tabindex="11" /></td></tr>


</table>
<>
</form>

 

 

And I have added this validation to the header, right above the wp_header, as you can see here:

 

 


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>


<script type="text/javascript">
//initiate validator on load
$(function() {
// validate contact form on keyup and submit
$("#contact_form").validate({
//set the rules for the field names
rules: {
txtName: {
required: true,
minlength: 2
},
txtEmail: {
required: true,
email: true
},
txtLocation: {
required: true,
minlength: 2
},
txtPhone: {
required: true,


},
txtAge: {
required: true,


},
txtAbout: {
required: true,
minlength: 2
},
txtIssues: {
required: true,
minlength: 2
},
txtCaptcha: {
required: true,
minlength: 4
},
},
//set messages to appear inline
messages: {
txtName: "Please enter your name",
txtEmail: "Please enter a valid email address",
txtLocation: "Please enter your City/Country",
txtPhone: "Please enter a valid phone number",
txtAge: "Please enter your child's age",
txtAbout: "Please enter how you heard about me",
txtIssues: "Please enter your baby's issues",
txtCaptcha: "Please enter the letters you see in the image"
}
});
});
</script>
<!-- END JS FOR CONTACT FORM VALIDATION -->
<?php
/* We add some JavaScript to pages with the comment form
 * to support sites with threaded comments (when in use).
 */
if ( is_singular() && get_option( 'thread_comments' ) )
	wp_enqueue_script( 'comment-reply' );


/* Always have wp_head() just before the closing </head>
 * tag of your theme, or you will break many plugins, which
 * generally use this hook to add elements to <head> such
 * as styles, scripts, and meta tags.
 */
wp_head();
?>
</head>

 

 

And I have both files in a folder named js at this address: http://websitenamehere.com/wp-content/themes/twentyten/js

[/size]

[/size]Can anyone tell me what I'm doing wrong and how to fix this? I have looked at several other tutorials and they seemed basically the same, but did not work either. What am I doing wrong?

Link to comment
https://forums.phpfreaks.com/topic/220539-using-jquery-validation-in-wordpress/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.