10 Useful jQuery Form Validation Techniques and Tutorials


Form Validation with jQuery from Scratch

jQuery Form Validation TutorialsIn this article you will be shown how to build a simple, yet powerful and extensible jQuery form validation plugin.
This article does not show you how to use the jQuery validate plugin, it covers building a lightweight, flexible solution from scratch. It won’t be nearly as advanced and powerful as the official plugin. Nevertheless, you’ll learn something new from a jQuery, JavaScript and Object-Oriented aspect.

How to Validate Forms in both sides using PHP and jQuery

jQuery Form Validation TutorialsYou are going to learn how to validate your forms, in this indepth tutorial, using PHP and jQuery in both sides: client side (using javascript with jQuery) and server side (using PHP).
At the end of the tutorial, you will get a final real working example that will validate your fields with / without javascript enabled, amd always making use of server side validaton.

jQuery Contact Form with PHP & jQuery Validation

jQuery Form Validation TutorialsIn this tutorial, you will learn how to create your own jQuery contact form using PHP and JQuery. The tut takes you through the initial basics, creating a single page for your contact form that contains the markup, PHP to process our contact form and then on to the tricky process of jQuery validating.

Adding Form Validation to WordPress Comments using jQuery

jQuery Form Validation TutorialsWhen it comes to simpler user experience, having your form validation happen instantly on the same page is a lot cleaner than reloading pages and possibly losing some form content. In this tutorial you’ll be shown how to use jQuery to do some instant checking on an example comment form.

Advanced Form Styling & Functionality

jQuery Form Validation TutorialsThis screencast walks you through the code that powers a fairly advanced web form. It utilizes jQuery to hide and show inputs as needed as well as power three plugins. One for applying fancy styling, one for validation, and one for the serializing of the inputs and AJAX submission. You will then use PHP to optionally save the users name and email, as well as send the actual email.

WordPress and jQuery Contact Form without a Plugin

jQuery Form Validation TutorialsThere are lots of WordPress plugins for contact forms, but wouldn’t it be nice to have more control over the markup? In this tutorial, you will be shown how to use a custom page template to create a contact form in WordPress without a plugin, and use conditional statements, for validation, to determine if the form had been submitted or not.

A jQuery inline form validation, because validation is a mess

jQuery Form Validation TutorialsWhen it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task.
In this tutorial you will be shown how to create a form, and when an error needs to be displayed, the script will create a div and positions it in the top right corner of the input. This way you will not have to worry about your HTML form structure. The rounded corner and shadow in the tutorial hasbeen built with CSS3 and degrades well in non compliant browsers.

Form Validation using jQuery

jQuery Form Validation TutorialsThis article discusses client-side validation using jQuery’s validation plugin. That is, you will use JavaScript to validate the fields before submitting the form to the server. This is fast and efficient and provides quick replies to your visitor in the event of any errors. However, it is advisable to also validate the data on the server-side before adding it into the database.
In the tutorial you will create a form that contains four fields: name, e-mail, comment and URL. The first three fields are required, whereas the URL field is optional. And, if you submit the form without filling in the required fields, you will be prompted with an error message.

Using jQuery and Ajax to Validate Forms

jQuery Form Validation TutorialsThis tutorial expects you to have already built your form up to the point where it works, but now needs some validation.
When you finish this tutorial, the username example, you have built, will check with the server whether the chosen name is a) valid and b) available. And the avatar example will try to load the URL in to a hidden image, if it fails, it will show the appropriate message.

jQuery Form Validation JavaScript Tutorial

jQuery Form Validation TutorialsThere are many jQuery plugins available to download that are similiar to what you will build in this tutorial. But if you need more flexibilty with your form or a better understanding of validation this tutorial will help you. So, here is a step-by-step approach to achieving client side JavaScript validation using jQuery.

147 Comments to “10 Useful jQuery Form Validation Techniques and Tutorials”

  • stephen m November 8, 2013 at 1:25 am

    I know how to validate my forms using JavaScript, but do you have any idea on how i can make my website more interactive using javascript (more than form validation or maybe advanced form validation techniques) I use dreamweaver by the way!!

  • kerrin marz November 9, 2013 at 3:36 am

    I know how to make an HTML Form but I don’t know to make sure they fill out a certain section before they push submit. Like filling out a survey and they make sure you fill out your address before you can move on. Thanks in advance!

  • hank baseballs November 9, 2013 at 4:50 pm

    I’m building an HTML form that uses PHP to insert the results into mySQL. Question is- I am doing some simple form validation. If there is an error I want to return the user to the form to correct it, and so it is important for the form to have the user’s input still entered in the form. Right now if there is an error the user is returned to a blank form and has to fill it out again.

    I’m thinking I’ll need JavaScript to accomplish this. Am I correct?

  • Gamer959 November 10, 2013 at 5:35 am

    I have a spreadsheet with lots of sales for items. What i want to do is create a little form with a drop down box. So the user could select an option from the drop down box such as “Most item sold”. then below that it would show the item that was most sold.

  • kevindiking67verizonnet November 10, 2013 at 11:37 pm

    I have a drop down form in excel that has an input range about 200 cells. When sellecting one of this values on a drop down form, how can that value be pasted or given to some cell???
    PLS help

  • jaimin November 12, 2013 at 3:01 am

    I would normally build a fancy navigation bar in a table using straihgt html and use dreamweaver to do the mouseover buttons but I would like to start truly using css.

    How do I use css to create the same style of navigation? I have images that need to touch (no white space anywhere) and the bottom six images will have mouse overs.

    I also want to incorporate a flash animation in the middle of this. The idea is to have all of this in a centered div tag.

    Please show me the exact code to do this and if you have a site to use as an example that would rock!

    Giv a great answer and you will get 10 points! 🙂

  • norrin_shadowwolf November 12, 2013 at 10:56 am

    I have recently made a very basic website using dreamweaver 8. I used an existing dreamweaver template with its own css style sheet. However I have now massively changed the layout; adding menus, paragraphs, sub headers and even pictures. So the css stylesheet I have doesn’t really relate my websites layout anymore.. Also Goolgle webmaster says my website has no recognized structure to it, so I am having trouble ranking.
    But Is there any sort of software or program that could ‘scan’ my website and create an appropriate css stylesheet? Or is this something I can only do whilst building the website?

    I am very, very new to web design, so any help on this would be greatly appreciated.

    The website in question is:

  • mendhak November 12, 2013 at 7:01 pm

    Is there a payment card that can only be used at a named merchant, but looks to that merchant like a normal Visa or MasterCard number? I need a solution that doesn’t require a large merchant to change anything on their end, but I can be certain the card number can only be used to purchase something where the payment goes through that merchant’s account. If the card number is used anywhere else that does any form of validation, the card would be rejected. Thanks!

  • heavenly sword November 12, 2013 at 9:58 pm

    What does that even mean? It’s hard because class have been cancelled for two Mondays and I am so lost. This snow is good for not coming to class, but I am missing out on a LOT.

  • Dana G November 13, 2013 at 6:48 am

    i always seem to get different answers for this, which is why I would appreciate some form of validation or explanation, if possible.

    Does your body stop digesting to rest, digest normally, or continue digesting but at a faster or slower rate?

  • Flash Funk November 13, 2013 at 4:57 pm

    I have created a navigation menu bar using an online menu generator and have the html and css code. I don’t know what to do with the CSS code. I have tried to cut and paste the CSS code into the code of the webpage but this doesn’t work – when I go to preview the code is visible. I’m new to CSS and was wondering how to use the CSS code. Any help, explained in simple, non-technical terms, much appreciated.

  • Disrae November 14, 2013 at 5:21 am

    Hi, I would like to create a printer friendly website using CSS, but I would like to have a Print Icon to be able to display the printer friendly version before printing.
    How can I link the print button to the CSS sheet? What is the HTML code please to link both of them together?


  • Nick November 15, 2013 at 1:43 am

    I have an assignment where I am supposed to create a CSS and HTML document that has an outer box lined in red, the banner box, the box just below the banner with nothing but color, the hyperlink box, the content box, and the footer box. There are no images needed just the boxes. Does anyone know how to get started on this or what the codes are?

  • Jenna November 15, 2013 at 11:30 pm

    So I have a CSS stylesheet saved on my computer, and i want to add it to my HTML document. I’ve done this before, but i can’t remember how to do it anymore.

  • Derek November 16, 2013 at 9:34 pm

    I have a lot of information but little space to put it on, so could anyone give me the CSS code to make it be able to scroll? That would be really helpful.

  • forahobby November 17, 2013 at 11:03 am

    I don’t know anything about greasemonkey or what code it needs, but I think it needs a seperate CSS file..? At any rate don’t explain it half-assedly, just give me the code or link to a good tutorial.

  • Gabriel Kenney November 18, 2013 at 1:43 am

    My CSS design is incompatible to all IE Tester version. What should i do? What codes to put in?

  • Jonny November 18, 2013 at 3:44 am

    So I’m trying to edit the text in CSS (DreamWeaver CS4), and I want the headers to be larger than the paragraph. However, whenever I edit the size, everything changes, not just the headers or just the paragraph. Is there any way around this?

  • Nathan B November 18, 2013 at 6:02 am

    In some CSS codes I’ve seen, the coder will include an explanation of the CSS elements. I can’t remember exactly what it looks like, or what this practice is called, but here is an example of what I think it looks like:

    a:link {
    color: blue; }

    a:visited {
    color: purple; }

    Does anyone know what this practice is called and the proper way to do it?


  • blarg blarg November 18, 2013 at 7:32 am

    I am new to developing as this question is basic i think. I downloaded a css template and want to start building a website. However, I have no idea how to have this show when running my current project. The file is in a folder on my desktop. How do I use a css template and how do I reference the file so that when I run it it works. I am using Aptana Web….

  • vanvark83 November 18, 2013 at 10:19 am

    I was given a code to make my view of a website more simple in Cascading Style Sheets, or CSS. However, after a Google search, I have yet to find a way that I can put in a code to Google Chrome that changes the way I view a website. Does anyone have any tips to help me?

  • hank baseballs November 19, 2013 at 2:31 pm

    What are the benefits of using CSS to control the layout and formatting of web pages(HTML), also what are the problems that can be encountered when viewing CSS based websites in older browsers.

    Thanks in advance for reading.

  • Nick November 19, 2013 at 2:32 pm

    Can you use a free CSS template to create a Joomla template and host up this joomla template in my site for my users to download?
    Emma. Thank you for your reply. I am a joomla developer and I will be able to do this easily.

    However, my question is about licensing. Can I convert this free template, make it a Joomla template and gain profit from it ?

  • Joe T November 19, 2013 at 2:39 pm

    I’m fairly new to CSS and can’t figure this out. How do I make a header where one word is one color, and the next word is a different color?

  • Sophia C November 19, 2013 at 5:38 pm

    All the tutorials I find tell me all about CSS, except how to keep my page in the center of a browser page… Can someone tell me how to do this or point me to a tutorial that explains this. Thanks all.

  • Alun J November 19, 2013 at 7:16 pm

    I applied t a few Ivy league schools that require this, but with the CSS my parents feel uncomfortable when filling it out (because it requires too much personal info). If I do not fill the CSS out and fill out the Fasfa will it affect the college admissions decisions or just the financial aid decision ?

  • Ray D November 20, 2013 at 12:59 am

    How do you make a selected button in CSS? You know, making one button different from the others. E.g. If I was in a website and selected the “News” button, I would be in the news section and the button would look different from the others.

  • _marky_mark_ November 20, 2013 at 2:47 am

    I have two lists on a page. How would I separate them in CSS to give them different properties. For some reason my tags don’t seem to have that ability.

  • Agent 47 November 20, 2013 at 2:49 am
  • Mr SoLo DoLo November 20, 2013 at 5:44 pm

    When I load my site up, the drop down CSS menu I created for the navigation loads behind the header and the rest of the page. So it gets cut off when you view the page. Anyone know what I can do to get the drop down menu to appear ahead of everything else ?

  • Andrew S November 20, 2013 at 6:42 pm

    New to web desisn. My main page is fine and the CSS rollovers are working fine. but when i use that as a template the other pages are ignoring the CSS. I can’t figure it out at all.

  • Patrick November 20, 2013 at 9:54 pm

    I thought that CSS could not complete this task. However, my teacher said it was possible to use CSS.
    And I know it is simple to deal with the problem by Javascript.
    I just wanna know the method.

  • Sonny November 21, 2013 at 3:51 am

    I’m using CSS which has standard fonts and colors etc, however, is there a way to designate that every time I use a particular heading (ie h2 or h1) that it uses a different font and color? If so, how? I’d appreciate something I could cut and paste.

  • Denali November 21, 2013 at 4:29 am

    I have been experimenting with designing CSS web templates with the intention to sell them. I am getting pretty good, but I want to make sure they are compatible with as many hosting sites as possible.

    Are most standard CSS templates compatible with hosts or is there something else I should be doing?

    Thanks in advance.

  • sick_mick_101 November 21, 2013 at 8:59 pm

    I’m trying to create a table using HTML/CSS, and I’ve noticed in tables when you define a color for a border, it actually makes the lines between the cells two different colors. Is there any way to define what these two colors are in the table individually?

  • Ryan Dunn November 22, 2013 at 11:44 pm

    My website looks good in internet explorer but it looks funny in firefox and chrome. What are the differences in the coding/css for all three? How do I fix this problem?

  • ericmreitz November 23, 2013 at 3:06 am

    So im getting into web design cuz it is fun in my opinion but It is very hard to learn a new language in notepad! I have visual studios but im a noob so i dont know how to write a program in css or html meaning i dont know how to i guess set the language im using. Thanks so much!

  • Jamal November 23, 2013 at 11:39 pm

    Something happened to my css code and I have a ton of blank lines between code. I don’t know how to easily get rid of it. Does anyone know a easy way?

  • soccermaster1 November 24, 2013 at 1:58 am

    I am having problems with my css as it looks great on firefox, slightly different on safari, AND TERRRRRIBLE ON EXPLORER! how can I fix that problem? Thanks!

  • Samuro November 26, 2013 at 1:45 am

    When you file for the CSS profile you sometimes may be eligible for up to 6 schools free. I qualify because the option is open to me but I have no idea of how to get the codes. What should I do?

  • sethburger November 27, 2013 at 4:40 pm

    Can anyone write code in DOM to make a form validation that validates a name, an email, and a url and explain it to me in comments…?

  • Jason M November 28, 2013 at 4:29 am

    What books would you recommend for beggining to learn css and javascript? I have heard good things and bad about the bible and I tried the Javascript and Dhtml cookbook but it was difficult to read does anyone have suggestions?

  • Xbox Gamer November 29, 2013 at 4:32 am

    I need to know how CSS positioning can make a Web page or site more accessible to those with handicaps. Links to the information would be wonderful, thank you!

  • Sahil December 1, 2013 at 1:06 am

    College Board CSS and FAFSA excluded homeowner from reporting their property equity, but two of this organization asking tenant to report their property equity. This is an unjustified regulations run by these two organizations. Especially, in many states homeowner live in over one million dollars home as their primarily residence and do not need to report their property equity when their child report on FAFSA and CSS.

  • seo February 7, 2014 at 11:45 am

    What a information of un-ambiguity and preserveness of precious experience regarding unpredicted emotions.

  • Steam shower design February 7, 2014 at 8:31 pm

    Wonderful site heaps of brilliant steam shower knowledge here

  • April 5, 2014 at 12:00 pm

    Hello, I enjoy reading all of your post. I wanted to write
    a little comment to support you.