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
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.
- Phone must be valid phone number with XX-XXXX-XXXX, XX.XXXX.XXXX and XX XXXX XXXX format.
Form HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="form-wrapper"> <h2>jQuery Form validation example without plugin</h2> <form name="contact-form" action="" method="post" id="contact-form"> <label>Name <span>*</span></label> <input type="text" name="your_name" id="name"> <label>Email <span>*</span></label> <input type="text" name="your_email" id="email"> <label>Phone <span>*</span></label> <input type="text" name="your_phone" id="phone"> <label>Comment <span>*</span></label> <textarea name="comments" cols="28" rows="5" id="comment"></textarea> <input type="submit" name="submit" value="Submit" id="submitForm"> </form> </div> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function checkNameEmpty(inputID) { $(inputID).blur(function(){ if($(this).val() == '') { $(this).css('border','1px solid red'); } else { $(this).css('border','1px solid green'); } }); } |
Validate Email Function:
1 2 3 4 5 6 |
function validateEmail(email) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } |
validateEmail
is using regex to test either given email address is a valid email or not.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function checkValidEmail(emailInputID) { $(emailInputID).blur(function(){ var email = $(emailInputID).val(); if (validateEmail(email)) { $(this).css('border','1px solid green'); } else { $(this).css('border','1px solid red'); } }); } |
checkValidEmail
function apply validation with the help of validateEmail function.
Validate Phone Function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function validatePhone(inputtxt) { //+XX-XXXX-XXXX //+XX.XXXX.XXXX //+XX XXXX XXXX var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/; if(inputtxt.match(phoneno)) { return true; } else { return false; } } |
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
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function checkvalidPhoneNumber(phoneInputID) { $(phoneInputID).blur(function(){ var phone = $(phoneInputID).val(); var getPhone = validatePhone(phone); if(getPhone) { $(this).css('border','1px solid green'); } else { $(this).css('border','1px solid red'); } }); } |
checkvalidPhoneNumber
function validate phone with the help of validatePhone
function.
Validate Comment Function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function checkComment(commentID) { $(commentID).blur(function(){ if($(this).val() == '') { $(this).css('border','1px solid red'); } else { $(this).css('border','1px solid green'); } }); } |
checkNameEmpty()
, checkValidEmail()
, checkvalidPhoneNumber()
and checkComment()
functions are used in blur event. And they will put immediate after document.ready.
On Submit Form Validation:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
$("#submitForm").click(function(){ if($("#name").val() == '') { $("#name").css('border','1px solid red'); return false; } if($("#email").val() == '') { $("#email").css('border','1px solid red'); return false; } if($("#email").val() != '') { var email = $("#email").val(); if (!validateEmail(email)) { return false; } } if($("#phone").val() == '') { $("#phone").css('border','1px solid red'); return false; } if($("#phone").val() != '') { var getPhone = validatePhone($("#phone").val()); if(!getPhone) { return false; } } if($("#comment").val() == '') { $("#comment").css('border','1px solid red'); return false; } }); |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 |
<!DOCTYPE html> <html> <head> <style> body{ font-family:verdana; margin:0px; } .form-wrapper{ margin:10px; } .form-wrapper label{ display:block; font-size:14px; } .form-wrapper input[type=text], .form-wrapper input[type=email]{ margin-bottom:5px; width:180px; height:20px; border:1px solid #eeeeee; } .form-wrapper span{ color:#ee0000; } .form-wrapper input[type=submit]{ display:block; margin-top:5px; border:0px; background:#ee0000; color:#ffffff; height:30px; border-radius:5px; } .form-wrapper input[type=submit]:hover{ background:#ee0022; } .form-wrapper textarea{ border:1px solid #eeeeee; } .response_msg{ margin-top:10px; font-size:13px; background:#E5D669; color:#ffffff; width:250px; padding:3px; display:none; } h2{font-size:20px;} </style> </head> <body> <div class="form-wrapper"> <h2>jQuery Form validation example without plugin</h2> <form name="contact-form" action="" method="post" id="contact-form"> <label>Name <span>*</span></label> <input type="text" name="your_name" id="name"> <label>Email <span>*</span></label> <input type="text" name="your_email" id="email"> <label>Phone <span>*</span></label> <input type="text" name="your_phone" id="phone"> <label>Comment <span>*</span></label> <textarea name="comments" cols="28" rows="5" id="comment"></textarea> <input type="submit" name="submit" value="Submit" id="submitForm"> </form> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> function checkNameEmpty(inputID) { $(inputID).blur(function(){ if($(this).val() == '') { $(this).css('border','1px solid red'); } else { $(this).css('border','1px solid green'); } }); } //regex to validate email function validateEmail(email) { var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return re.test(email); } // validation for email input using validateEmail Function function checkValidEmail(emailInputID) { $(emailInputID).blur(function(){ var email = $(emailInputID).val(); if (validateEmail(email)) { $(this).css('border','1px solid green'); } else { $(this).css('border','1px solid red'); } }); } // regex to validate phone function validatePhone(inputtxt) { //+XX-XXXX-XXXX //+XX.XXXX.XXXX //+XX XXXX XXXX var phoneno = /^\+?([0-9]{2})\)?[-. ]?([0-9]{4})[-. ]?([0-9]{4})$/; if(inputtxt.match(phoneno)) { return true; } else { return false; } } // validation for phone input using validatePhone Function function checkvalidPhoneNumber(phoneInputID) { $(phoneInputID).blur(function(){ var phone = $(phoneInputID).val(); var getPhone = validatePhone(phone); if(getPhone) { $(this).css('border','1px solid green'); } else { $(this).css('border','1px solid red'); } }); } function checkComment(commentID) { $(commentID).blur(function(){ if($(this).val() == '') { $(this).css('border','1px solid red'); } else { $(this).css('border','1px solid green'); } }); } $(document).ready(function(){ //run time form validation checkNameEmpty("#name"); checkValidEmail("#email"); checkvalidPhoneNumber("#phone"); checkComment("#comment"); //when click on submit $("#submitForm").click(function(){ if($("#name").val() == '') { $("#name").css('border','1px solid red'); return false; } if($("#email").val() == '') { $("#email").css('border','1px solid red'); return false; } if($("#email").val() != '') { var email = $("#email").val(); if (!validateEmail(email)) { return false; } } if($("#phone").val() == '') { $("#phone").css('border','1px solid red'); return false; } if($("#phone").val() != '') { var getPhone = validatePhone($("#phone").val()); if(!getPhone) { return false; } } if($("#comment").val() == '') { $("#comment").css('border','1px solid red'); return false; } }); }); </script> </body> </html> |