jQuery form validation example without plugin

There are lots of ways to add validation in html form. You can use simple javascript or jquery to perform validation. In this tutorial I am going to show you how to validate html form using jquery without plugin.

Yes you heard it right without plugin.

There are lots of tutorials on web which provide jquery validation but with the help of plugins. I will try my best to cover this in a very simple manner so you can easily perform validation in any of your project. I will apply validation on contact form. Now let’s start

Also Read: How to Create Simple Contact Form using Ajax, jQuery, Php and Mysql

Jquery form validation example without plugin

jquery form validation example without plugin

Steps in form validation:

  • Create contact form with name, email, phone and comment fields and also assign different id to each of the input element.
  • Email must be valid email address.
  • Phone must be valid phone number with XX-XXXX-XXXX, XX.XXXX.XXXX and XX XXXX XXXX format.
  • Apply validation on blur
  • When form submitted check all the fields.

Form HTML:

Above is the contact form html code in which every input field has unique id. I will be using ids for jquery selector.

jQuery Script:

I am going to create validations on 2 events. One is on input blur and second is on form submit.

On Blur Validation:

When user goes to the next input without enter any text in current input then I will turn current input border red. And in email input, if user adds wrong email or wrong email pattern then I will turn email input border red. Same validation pattern will apply on phone number.

Also Read: jQuery Zoom Image on Hover

Check Empty Name Function:

Validate Email Function:

validateEmail is using regex to test either given email address is a valid email or not.

checkValidEmail function apply validation with the help of validateEmail function.

Validate Phone Function:

validatePhone is also using regex to text the phone number in three formats which are XX-XXXX-XXXX, XX.XXXX.XXXX, XX XXXX XXXX. If you want to add different phone format then you can add your regex in var phoneno.

checkvalidPhoneNumber function validate phone with the help of validatePhone function.

Validate Comment Function:

checkNameEmpty() , checkValidEmail(), checkvalidPhoneNumber() and checkComment() functions are used in blur event. And they will put immediate after document.ready.

On Submit Form Validation:

Above validation will perform when user hits the submit button. If any input field empty, or email or phone has wrong input value then above validation turn the border and form will not submit.


Jquery form validation example all together:

 

Author: Ahsan Zameer

I am a web developer and love to search new stuff on web. Trying different approaches and ideas to make web developing more interesting and enjoyable.