Simple jQuery form validation

When you use forms in your project, it is always better to use some validation to validate user data. This ensures the type of data you need in your project, it also makes good UX(user experience) and makes user about cleat the data you required.

There are two kinds of validation:

Client-side and server-side validation. – Client-side validation is performed by JavaScript and it gives the user quick alert on input before the user request goes to the server, In that way, validation reduces to server load also. Nowadays modern browsers support HTML validation which has became popular.

Server-side validation – Server-side validation is important, it is always recommended to have this validation on form submission or any input data. This is the best way to protect the data from manipulation. Even if you have client-side validation you should put server-side validation because client-side validation can be bypassed.

There are many powerful jQuery validation plugins available out there, but sometimes we need some basic validation and don’t want to include more libraries in the project to make it slow and clutter.

In this tutorial, we will show you how you can create a simple jQuery validation for your HTML form.

<form action="" method="post" id="my_form" novalidate>
<label><span>Name : </span><input type="text" name="name" required="true" /></label>
<label><span>Email : </span><input type="email" name="email" required="true"  /></label>
<label><span>Message : </span><textarea name="message" required="true" ></textarea></label>
<label><input type="submit" value="Submit Form"></label>
</form>

Here’s a simple jQuery validation script, it checks each field in the loop and validates them. If the field is blank or email is incorrect, it will simply change the input field border color to red and if everything is good then it will again change the color back to normal

jQuery form validation script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function()
	{
	$( "#my_form" ).submit(function( event ){ //on form submit       
	    var proceed = true;
	    //loop through each field and we simply change border color to red for invalid fields       
        $("#my_form input[required=true], #my_form textarea[required=true]").each(function(){
				$(this).css('border-color',''); 
				if(!$.trim($(this).val())){ //if this field is empty 
					$(this).css('border-color','red'); //change border color to red   
				   proceed = false; //set do not proceed flag
				}
				//check invalid email
				var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
				if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
					$(this).css('border-color','red'); //change border color to red   
					proceed = false; //set do not proceed flag            
				}   
        });
		
		if(proceed){ //if form is valid submit form
			return true;
		}
		event.preventDefault();	
	});
	
	 //reset previously set border colors and hide all message on .keyup()
	$("#my_form input[required=true], #my_form textarea[required=true]").keyup(function() { 
		$(this).css('border-color',''); 
		$("#result").slideUp();
	});

});
</script>