Matt Paulson

Entrepreneur, Author, Private Equity Investor
  • Facebook
  • Linkedin
  • Twitter
  • Rss
  • Blog
    • Book Recommendations
    • Church Life & Ministry
    • Community Projects
    • Entrepreneurship
    • Quaterly Updates
    • Startup Community
    • Startup Q&A Show
    • Web Development
  • About
    • Resume
  • My Companies
    • Angel Investments
  • My Books
    • Online Business from Scratch
    • Automatic Income
    • The Ten-Year Turnaround
    • Email Marketing Demystified
    • 40 Rules for Internet Business Success
    • Business Growth Day by Day
    • Simple Savings
  • Media Appearances
  • Contact
Home» Web Development » How to Validate Forms with JQuery

How to Validate Forms with JQuery

Posted on June 3, 2009 by matt in Web Development 1 Comment
Tweet

Just about everyone who’s ever made a web-application knows that you generally can’t trust your users to enter data correctly into a form. Some of them will ignore important fields, others will type in data that couldn’t possibly be right. Some will try to choose two character passwords and others will enter in a long string of text when all you wanted to do was get their age in the form of numbers.

A lot of these errors can be mitigated by using the right input controls. You want to use the right HTML input control for the right situation.. You certainly wouldn’t want to use a textbox to have someone enter in their gender and you definitely don’t want to use a drop down list to have someone enter their email address. Although using the right input controls for the right questions takes a long way in helping ensure that we get good data, that alone isn’t enough.

When it comes to textboxes, you’ll often want to make sure whatever they type in meets a specific format, such as a phone-number or an email address. You might also want to make surethey actually do type -something- in, or make sure that they type the same thing in two fields if you want to confirm that something’s accurate.

Microsoft does a pretty good job of making this happen in ASP.NET with their validation controls. More often than not, the validation controls will simply generate some javascript to perform the validation, but there’s also an option to have it validate at the server-side level. If you’d like to have a bit more control over your validators there’s some code in JQuery that we can use to make sure users what enter in good data.

The example code I’m going to demonstrate today is based off the JQuery Validate plugin.

Here’s How to Validate  Text Boxes with JQuery

(1) Download and Reference JQuery and the JQuery Validation Library

You’ll need a copy of JQuery 1.2.6+ on your system, which can be downloaded from Google.You’ll also need a copy of the JQuery Validation library, available from bassistance.de. Once you get your two libraries download, you can extract the minified version of both of them into a folder, create a new HTML page and add your header references that should look something like this:

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

(2) Building your form

For this example, we’ll make a basic contact form that requires the person to enter their name, their email address and some comments. All of the fields will be required and we will also make sure that the user’s email address was entered in the correct format.

Here’s what the form will look like:

<form class=”cmxform” id=”commentForm” method=”get” action=””>
<fieldset>
<p>
<label for=”cname”>Name</label>
<em>*</em><input id=”cname” name=”name” size=”25″ class=”required” minlength=”2″ />
</p>
<p>
<label for=”cemail”>E-Mail Address</label>
<em>*</em><input id=”cemail” name=”email” size=”25″  class=”required email” />
</p>
<p>
<label for=”ccomment”>Comments:</label>
<em>*</em><textarea id=”ccomment” name=”comment” cols=”22″  class=”required”></textarea>
</p>
<p>
<input class=”submit” type=”submit” value=”Submit”/>
</p>
</fieldset>
</form>

There are a few things to note about this form. First, that all of the inputs have been given a class of “required”. This is how the JQuery library will know whether or not to validate them. If you don’t want a field to be required, simply leave it out. You’ll also note on the “E-Mail Address” field, that it has a class of class=”required email”, this will let the function know that what the user enters in also has to be a valid email address.

(3) Calling the Validation Method

Finally, we need to invoke the validation method when the page loads. We can do this with the $(document).ready() function like this:

<script>
$(document).ready(function(){
$(“#commentForm”).validate();
});
</script>

If you give you form a different ID, make sure that the ID of the form matches what you’re calling in your onLoad function.

(4) The Results

If all is well with your code, you should end up with something like this after clicking the submit button:

form

You can download my example code here. You can also download the full JQuery Validation Library with some more advanced examples.

Tweet

Comments

One comment on “How to Validate Forms with JQuery”

  1. Ryan W says:
    June 3, 2009 at 8:31 am

    Thanks for the post! Have never looked into validating with jQuery. I have just stuck with the ASP.NET validators, but this is easier than even dragging and dropping controls all over the place!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get Email Updates

Enter your email address below to receive a steady stream of tricks, tips and ideas to help you build a better and more profitable business.

Email Marketing Demystified

The second edition of Email Marketing Demystified is now available. This book teaches you how to build a massive email list, write marketing copy that converts and generate more sales in your business.

Click Here to Get Your Copy of Email Marketing Demystified

Recent Posts

  • Leadership Sioux Falls is Fundraising for New Playground Equipment at Hayward Park. Here’s How You Can Help.

    March 2, 2021
  • Sioux Falls to Celebrate Entrepreneurship Day on March 3, 2021

    February 18, 2021
  • MarketBeat is Hiring for Three Positions (Support, Data Analyst and Web Developer)

    February 17, 2021
  • The Biggest Mistake You Can Make with Your Email Sign-Up Forms

    February 16, 2021
  • Five Lessons Learned from the MarketBeat Burger Project

    February 2, 2021

    Follow me on Facebook & YouTube

    Contact

    • [email protected]
    • Contact Us
    • matthew-paulson
      • Facebook
      • Twitter
      • Linkedin
      • Instagram
      • Rss

    © Matthew Paulson 2003-2021. All Rights Reserved.

    Privacy Policy