Form Validation Onsubmit Form Using Jquery.

We have just created a form in HTML. You can use the code directly in any of your project.

get Form Validation Onsubmit Form Using Jquery

Just Copy and paste

Create - index.html
        
<!DOCTYPE html>
<html>
<head>
  <title>Form Validation Onsubmit Form Using Jquery</title>
<link rel="stylesheet"
      href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet"
     href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
</head>
<style>
  .bootstrap-demo{margin:30px;}
</style>

<body>
<div class="bootstrap-demo">

<form role="form" action="schoolregisterpost.php" method="post" id="schoolregisterfrm1">
	<!-- Username -->
<div id="resultdata"></div>
	<div class="form-group">
		<label for="username" class="control-label">Institution Name <span class="required-field">*</span></label>
		<div class="has-feedback">
			<input type="text" class="form-control" id="institute" name="institute" placeholder="Institution Name"/>
			<span class="fa fa-university form-control-feedback" aria-hidden="true"></span>
		</div>
<p style="color:red; display:none;" id="errinstitute">Please enter valid institution name!<p>
	</div>
									
	<!-- Email -->
	<div class="form-group">
		<label for="email" class="control-label">Email <span class="required-field">*</span></label>
		<div class="has-feedback">
			<input type="email" class="form-control" id="email" name="email" Placeholder="Email"/>
			<span class="fa fa-envelope form-control-feedback" aria-hidden="true"></span>
		</div>
<p style="color:red; display:none;" id="erremail">Please enter valid email!<p>
	</div>
									
<!-- Passwords -->
<div class="row">
	<div class="col-sm-6 form-group">
		<label for="password1" class="control-label">Password <span class="required-field">*</span></label>
		<div class="has-feedback">
			<input type="password" class="form-control" id="password1" name="password" Placeholder="Password"/>
			<span class="fa fa-lock form-control-feedback" aria-hidden="true"></span>
		</div>
<p style="color:red; display:none;" id="errpassword">Please enter valid password!<p>
		<p class="help-block">At least 6 characters long.</p>
	</div>
	
	<div class="col-sm-6 form-group">
		<label for="password2" class="control-label">Re-enter password <span class="required-field">*</span></label>
		<div class="has-feedback">
			<input type="password" class="form-control" id="password2" Placeholder="Re-enter password" />
			<span class="fa fa-lock form-control-feedback" aria-hidden="true"></span>
		</div>
<p style="color:red; display:none;" id="errretype">Please enter same password!<p>
<p style="color:red; display:none;" id="errpasseq">Password not maching!<p>

	</div>
</div>
									
	<!-- Name and gender -->
		<!-- Email -->
	<div class="form-group">
		<label for="email" class="control-label">Your Name <span class="required-field">*</span></label>
		<div class="has-feedback">
			<input type="text" class="form-control" id="name" name="name" Placeholder="Your Name"/>
			<span class="fa fa-user form-control-feedback" aria-hidden="true"></span>
		</div>
<p style="color:red; display:none;" id="errname">Please enter valid name!<p>
	</div>
<div class="form-group">
		<label for="email" class="control-label">Mobile <span class="required-field">*</span></label>
		<div class="has-feedback">
			<input type="text" class="form-control" id="mobile" name="mobile" Placeholder="Mobile"/>
			<span class="fa fa-user form-control-feedback" aria-hidden="true"></span>
		</div>
<p style="color:red; display:none;" id="errcontact">Please enter valid Mobile!<p>
	</div>

<div class="col-sm-2 form-group">
		
	
</div>
<div class="row">
<div class="col-sm-2"></div>
	<div class="col-sm-10 col-sm-offset-2">
<!-- Agree static text -->
<div class="form-group">
	<p class="form-control-static">
		Do you agree to the <a href="termsofusew.html">User Agreement</a> and <a href="privacypolicyw.html">Privacy Policy</a>,
		and terms incorporated therein?
	</p>
</div>
	 </div>
</div>


<!-- Create button -->
<div class="form-group text-center">
	<button type="submit" class="btn btn-primary">Agree and Create Account</button>
</div>
	</form>
  <pre>
  	


  </pre>

 </div>
 <script type="text/javascript">

		</script>
</body>
</html>

        
        
        
$(function() {
var frmv = $("#schoolregisterfrm1");
frmv.submit(function (ev) {
ev.preventDefault();
 var form = document.getElementById("schoolregisterfrm1");

//var form = $('schoolregisterfrm1')[0]; // You need to use standart javascript object here
 var data = frmv.serialize();



var institute = $("#institute").val();
var email = $("#email").val();
var password1 = $("#password1").val();
var password2 = $("#password2").val();
//var pincode = $("#pincode").val();
var mobile = $("#mobile").val();
var name = $("#name").val();
//var communication = $("#communication").val();


if(institute == '' || email == '' || password1 == '' || password2 == '' || mobile == '' || name == ''){
$("#errfield").fadeIn();

if(name==''){$("#errname").show();}else{$("#errname").hide();}

if(email==''){$("#erremail").show();}else{$("#erremail").hide();}

if(institute==''){$("#errinstitute").show();}else{$("#errinstitute").hide();}

if(mobile==''){$("#errcontact").show();}else{$("#errcontact").hide();}
if(password1==''){$("#errpassword").show();}else{$("#errpassword").hide();}
if(password2==''){$("#errretype").show();}else{$("#errretype").hide();}

}
else{


if(password1==''){$("#errpassword").show();}else{$("#errpassword").hide();}
if(password2==''){$("#errretype").show();}else{$("#errretype").hide();}

if(password1==password2){
$("#errpasseq").hide();
}else{
$("#errpasseq").show();
}
if(name==''){$("#errname").show();}else{$("#errname").hide();}

if(email==''){$("#erremail").show();}else{$("#erremail").hide();}

if(institute==''){$("#errinstitute").show();}else{$("#errinstitute").hide();}

if(mobile==''){$("#errcontact").show();}else{$("#errcontact").hide();}
$("#errfield").fadeOut();

$.ajax({
  type: 'post',
  url: '', //put url here
  data: data,
  success: function (data) {
  // alert(data);
  $("#resultdata").show();
  $("#resultdata").html(data);
   form.reset();

  },
  failure: function(error) {
   
    $("#resultdata").html(response).fadeIn();
  }
});

}
});
});       	

        
        

Result

get Form Validation Onsubmit Form Using Jquery result