jQuery Form Validation

Data Validation

Data validation is the process of ensuring that computer input is clean, correct, and useful.

Typical validation tasks are:

has the user filled in all required fields?
has the user entered a valid date?
has the user entered text in a numeric field?
Most often, the purpose of data validation is to ensure correct input to a computer application.

Validation can be defined by many different methods, and deployed in many different ways.

Server side validation is performed by a web server, after input has been sent to the server.

Client side validation is performed by a web browser, before input is sent to a web server.

For example, If we create a contact form, we can check whether the inputs are filled in a correct column or not. Different methods are using for form validation.

Here you can see a sample HTML markup for the Form Validation :

	<style>
	.alert {
	padding: 8px 35px 8px 14px;
	margin-bottom: 20px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	background-color: #fcf8e3;
	border: 1px solid #fbeed5;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	}
	.alert, .alert h4 {
	color: #c09853;
	}
	.alert h4 {
	margin: 0;
	}
	.alert .close {
	position: relative;
	top: -2px;
	right: -21px;
	line-height: 20px;
	}
	.alert-success {
	color: #468847;
	background-color: #dff0d8;
	border-color: #d6e9c6;
	}
	.alert-success h4 {
	color: #468847;
	}
	.alert-danger, .alert-error {
	color: #b94a48;
	background-color: #f2dede;
	border-color: #eed3d7;
	}
	.alert-danger h4, .alert-error h4 {
	color: #b94a48;
	}
	.alert-info {
	color: #3a87ad;
	background-color: #d9edf7;
	border-color: #bce8f1;
	}
	.alert-info h4 {
	color: #3a87ad;
	}
	.alert-block {
	padding-top: 14px;
	padding-bottom: 14px;
	}
	.alert-block > p, .alert-block > ul {
	margin-bottom: 0;
	}
	.alert-block p + p {
	margin-top: 5px;
	}
	.close {
	float: right;
	font-size: 20px;
	font-weight: bold;
	line-height: 20px;
	color: #000000;
	text-shadow: 0 1px 0 #ffffff;
	opacity: 0.2;
	filter: alpha(opacity=20);
	}
	button.close {
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
	}
	label.error {
	display: none !important;
	}
	input[type=text].error, textarea.error {
	border: 1px solid red;
	}
	</style>

view raw jQuery_form_validation.css hosted with ❤ by GitHub

	<div id="statholder"></div>
	<form id="frmcontact" method="post">

	<!--cntct_form_start-->
	<div>
	<div>
	<div> Full Name: </div>
	<input type="text" name"frm_Fullname" id="fullname" class="required" />
	</div>
	<div>
	<div> E-mail:</div>
	<input type="text" name="frm_Email" id="email" class="required email"/>
	</div>
	<div>
	<div> Phone Number:</div>
	<input type="text" name="frm_Phone" id="phone" class="required number" />
	</div>
	<div>
	<div>Feedback:</div>
	<textarea name="frm_Message" id="message" class="required" ></textarea>
	</div>
	<input type="submit" value="Send" />
	</div>
	</form>
	<!--cntct_form_end-->

view raw jQuery_form_validation.html hosted with ❤ by GitHub

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js" type="text/javascript"></script>
	<script>
	$(function(){
	$('#statholder').click(function(){
	$('#statholder').hide('slow');
	});

	$("#frmcontact").validate({
	submitHandler: function(){
	$.ajax({
	type: "POST",
	url: "emailer.php",
	data: $("#frmcontact").serialize(),
	success: function(response){
	if(response=="0"){
	$("#statholder").html('<div class="alert alert-error"><button type="button" class="close">×</button><strong>Found Error!</strong> Message Submiting Failed.').show();
	$("#frmcontact").trigger("reset");
	}else{
	$("#statholder").html('<div class="alert alert-success"><button type="button" class="close">×</button><strong>Thank you for contacting Website Name</strong> We will get back to you soon.</div>').show();
	$("#frmcontact").trigger("reset");
	}
	}
	});
	}
	});

	});

	</script>