The moral of the story: this out of date file could be causing all kinds of mysterious errors, so make sure you have the latest version of jQuery before spending hours troubleshooting all the other files.

var valid = true;
$(this).find(‘.req’).each(function() {
if ($(this).val() == “”) {
$(this).after(‘<span>Required!</span>’);
valid = false;
} else if ($(this).hasClass(‘req-email’) && !checkemail($(this).val())) {
$(this).after(‘<span>Invalid E-mail!</span>’);
valid = false;
} else if ($(this).hasClass(‘req-phone’) && checkphone($(this).val())) {
$(this).after(‘<span>Numbers Only!</span>’);
valid = false;
}
});
if (!valid) {
$(this).find(‘span.error-message’).text(“Please correct the above errors.”).show();
return false;
}
});
function checkemail(e){
var emailfilter = /^w+[+.w-]*@([w-]+.)*w+[w-]*.([a-z]{2,4}|d+)$/i
return emailfilter.test(e);
}
function checkphone(e) {
var filter = /[0-9]/
return filter.test(e);
}

Found here: http://www.aarongloege.com/blog/web-development/javascript/jquery/easy-form-validation/

What makes it even better is that it’s highly customizable. I used Aaron’s structure to write my own custom validation. I’ve shared here the additional/modified filters.

function checkemail(e){
var emailfilter = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/
return emailfilter.test(e);
}
function checkphone(e) {
var filter = /[0-9]{10}/
return filter.test(e);
}
function checkzip(e){
var zipfilter = /[0-9]{5}/
return zipfilter.test(e);
}
function checkpassword(e) {
var passwordfilter = /^.{6,50}$/
return passwordfilter.test(e);
}
function checkcreditcard(e) {
var creditcardfilter = /[0-9]{15,16}/
return creditcardfilter.test(e);
}

You can write as many of these as you want. Additionally, though he has his error messages writing to a span, you can insert whatever kind of action you want to happen inside the if/else statements.

<button rel="#tab1">&nbsp;</button>
<button rel="#tab3">&nbsp;</button>

Then, use this handy little script:

$('.nav_arrow').click(function () {
var nextPage = $(this).attr('rel');
$(nextPage).click();
return false;
});

Effectively, you are telling the forward or next button that if it’s clicked, cause the corresponding tab to be clicked, opening that view.

It’s easy to implement. Download clearfield.js and link it into your page. Then place the class “clearField” on all your inputs, selects, and textareas. Instantiate the function in your custom javascript page with this:

$('.clearField').clearField();

If you don’t have access to the form element markup, or you are using a framework, a little bit of jQuery can be used to add the necessary classes:

$('input, select').addClass('clearField');

$(‘tr:odd td’).css(‘background’,'#yourcolor’);


/***********************************************
* Textarea Maxlength script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

function ismaxlength(obj){
var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""
if (obj.getAttribute && obj.value.length>mlength)
obj.value=obj.value.substring(0,mlength)
}


var newArray = [];
var list = $('#selectID').find('option');
for(var i = 0; i < list.length; i++) {
newArray[i] = list[i].text;
}
console.log(newArray.join(", "));


Here’s the result:

• Our Company
  • About Us
  • History
• Products/Services
  • Custom Web Design
  • Content Management Solutions
  • Website Optimization
  • Email Campaigns
• Portfolio
  • Static HTML
  • WordPress Themes
  • Emails
• Contact
  • Phone
  • Email
  • Request a Quote

How to create it:

1. Include the jQuery library in your page with a script tag. Example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.3.2/jquery.min.js"></script>

This example links directly to the jQuery library hosted on google. You may link to your own copy.

2. Create a new .js document, and add this code:

$(document).ready(function(){
	$("ul.hidden").hide();
	$("a.toggleLink").click(function () {
		$("ul.hidden").not($(this).next("ul:first")).slideUp();
		$(this).next("ul:first").slideToggle("normal");
	});
});

Add this file using the <script> tag.

3. Add this to the body of your page:

<ul id="accordian_menu">

     <li><a href="#" class="toggleLink">Our Company</a>

     <ul class="hidden">

     <li><a href="#">About Us</a></li>

     <li><a href="#">History</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Products/Services</a>

     <ul class="hidden">

     <li><a href="#">Custom Web Design</a></li>

     <li><a href="#">Content Management Solutions</a></li>

     <li><a href="#">Website Optimization</a></li>

     <li><a href="#">Email Campaigns</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Portfolio</a>

     <ul class="hidden">

     <li><a href="#">Static HTML</a></li>

     <li><a href="#">Wordpress Themes</a></li>

     <li><a href="#">Emails</a></li>

     </ul>

     </li>

     <li><a href="#" class="toggleLink">Contact</a>

     <ul class="hidden">

     <li><a href="#">Phone</a></li>

     <li><a href="#">Email</a></li>

     <li><a href="#">Request a Quote</a></li>

     </ul>

     </li>

</ul>

4. Add these classes to your stylesheet:

a {
	text-decoration: none;
}
a.toggleLink {
	display: block;
	padding: 5px;
	background: #936;
	color: white;
	border-bottom:1px dotted #CC99CC;
	}
ul#accordian_menu {
	margin: 0;
	padding: 0;
	width: 150px;
}
ul#accordian_menu li {
	list-style-type: none;
}
ul#accordian_menu li ul {
	padding-left: 0;
	background: #FFDAEE;
}
ul#accordian_menu li ul li {
}
ul#accordian_menu li ul li a:hover {
	background: white;
}
ul#accordian_menu li ul li a {
	color: #936;
	display: block;
	border-bottom: 1px dotted #C9C;
	padding: 5px;
}

These classes could probably be refined a little, but I kept them pretty specific so they won’t conflict with any similar markup that might be in your page. Feel free to rename or change them to suit your needs.

Take it further:

• Use divs or paragraphs instead of list items to make a show/hide section of content.
• If static (non-sliding content) will be wedged anywhere between your sliding elements, you must use the .nextAll() method, instead of .next().

Note: If you’re new to jQuery, you only need to include the $(document).ready(function()) once in your javascript document–wrap it around all of your functions.

Instead, use the wp_enqueue_script, the WordPress-friendly method. You will need direct access to your WordPress files.

1. Go into wp-content/plugins, and create a new javascript folder.
2. In this folder, place your .js file.
3. In header.php, before <?php wp_head(); ?>, place this:

<?php
wp_enqueue_script('custom',
'/' . PLUGINDIR . '/javascript/yourscript.js',
array('jquery'),
'1.0' );
?>

That’s it. You don’t need to do anything additional to include the jQuery library, since it’s specified as in the array as a file that your script is dependent upon. In place of ‘jquery’ you can use Scriptaculous, jQuery UI Tabs, or any number of libraries that are built into WordPress.

Those libraries, as well as additional information about the wp_enqueue_script can be found at codex.wordpress.org/Function_Reference/wp_enqueue_script.

According to the codex, this script can’t be placed above <?php wp_head(); ?>, but I’ve found that on the contrary, it works ONLY when placed above it. This same page of the codex also says that ‘$’ can be used instead of ‘jQuery’ inside the document ready function, which is also currently not accurate.

In other words, where you would use ‘$’ in your jQuery function, you MUST use ‘jQuery’ for every instance, not just in the document ready function. Feel free to test this with your own script; I’m not sure why the Codex is wrong on these points.