JQuery Validation

In this article, we will learn how to validate the form and add validations in form using jQuery. First of all, we will understand some basic meaning of jQuery and validation. After this, we can understand this topic with the help of various examples of validation of form with jQuery.

JQuery:

JQuery is a fast, lightweight, small, and feature-rich JavaScript library. For adding jQuery in the form we can use the

In this, the src attribute is used to add a link to jQuery.

You can also download the jQuery and add the source of jQuery in the src attribute of the

jQuery Validation Form Example

<! DOCTYPE html> 
<html> 
<head> 
<title>
JQuery validation example 2
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  background: #191828;
  color: #efedef;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  margin: 0;
  padding: 80px; 
  }
h4 {
  font-weight: bold;
  margin-bottom: 2.5rem;
 font-family: 'Lato';
  align: center;
  font-size: 1rem;
  margin-top: 10px;
}
form  {
  margin-top: 20px;
  margin-left: 100px;
  }
p  {
  margin-top: 20px;
  margin-left: 100px;
  }
p.note {
  font-size: 1rem;
  color: red;
}

input {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 4px;
  font-family: 'Lato';
  width: 300px;
  margin-top: 10px;
}

label {
  width: 300px;
  font-weight: bold;
  display: inline-block;
  margin-top: 20px;
}

label span {
  font-size: 1rem;
}

label.error {
    color: red;
    font-size: 1rem;
    display: block;
    margin-top: 5px;
}

input.error  {
    border: 1px dashed red;
    font-weight: 300;
    color: red;
}

[type="reset"],  html [type="button"] {
    margin-left: 0;
    border-radius: 0;
    background: black;
    color: white;
    border: none;
    font-weight: 300;
    padding: 10px 0;
    line-height: 1;
}
button {
margin-left: 0;
    border-radius: 0;
    background: black;
    color: white;
    border: none;
    font-weight: 300;
    padding: 10px 0;
    line-height: 1;
}
[type="submit"] {
	display: inline-block;
	padding: 0.35em 1.2em;
	border: 0.1em solid #3494e6;
	margin: 0 0.3em 0.3em 0;
	border-radius: 0.12em;
	box-sizing: border-box;
	text-decoration: none;
	font-family: 'Roboto',sans-serif;
	font-size: 1rem;
	text-align: center;
	transition: all 0.2s;
	}
[type="submit"]:hover {
	color: #FFFFFF;
	background-color: #3494e6;
}
</style>

	<link rel="stylesheet" href= 
	"https://maxcdn.bootstrapcdn.com/bootstrap/ 
	4.0.0/css/bootstrap.min.css"> 
	
<script src= 
	"https://ajax.googleapis.com/ajax/libs/ 
	jquery/3.3.1/jquery.min.js"> 
	</script> 
	
	<script src= 
	"https://cdnjs.cloudflare.com/ajax/libs/ 
	popper.js/1.12.9/umd/popper.min.js"> 
	</script> 
	
	<script src= 
	"https://maxcdn.bootstrapcdn.com/bootstrap/ 
	4.0.0/js/bootstrap.min.js"> 
	</script> 
</head> 
<body>
<br> 
	<h1 class="text-center text-success"> 
	FORM VALIDATION USING JQUERY 
	</h1>  
<div class="container"> 
	<div class="col-lg-8 
		m-auto d-block"> 
		<form> 
		<div class="form-group"> 
			<label for ="user"> 
				Enter username: 
			</label> 
			<input type="text"
					name="username" id="usernames"
					class="form-control"> 
			<h5 id="usercheck" style="color: red;" > 
					**Username is missing 
			</h5> 
		</div> 
<div class="form-group"> 
			<label for="user"> 
					Enter Email: 
			</label> 
			<input type="email" name="email"
				id="email" required 
				class="form-control"> 
			<small id="emailvalid" class="form-text 
				text-muted invalid-feedback"> 
					Your email must be a valid email 
			</small> 
		</div>

<div class="form-group"> 
			<label for="password"> 
					Enter Password: 
			</label> 
			<input type="password" name="pass"
				id="password" class="form-control"> 
			<h5 id="passcheck" style="color: red;"> 
				**Please Fill the password 
			</h5> 
		</div>

<div class="form-group"> 
			<label for="conpassword"> 
					Confirm Password: 
			</label> 
			<input type="password" name="username"
					id="conpassword" class="form-control"> 
			<h5 id="conpasscheck" style="color: red;"> 
				**Password didn't match 
			</h5> 
		</div>

<html>
<head>
<title>
JQuery validation Example 3
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
form div {
  margin-bottom: 10px;
}
.error {
  color: red;
  margin-left: 5px;
}
h2 {
  font-weight: bold;
  margin-bottom: 2.5rem;
  color: #fff;
  align: center;
  font-size: 30px;
  margin-top: 2.5rem;
}
[type="submit"] {
	display: inline-block;
	padding: 0.35em 1.2em;
	border: 0.1em solid #3494e6;
	margin: 0 0.3em 0.3em 0;
	border-radius: 0.12em;
	box-sizing: border-box;
	text-decoration: none;
	font-family: 'Roboto',sans-serif;
	font-size: 1rem;
	text-align: center;
	transition: all 0.2s;
	}
	[type="submit"]:hover {
	color: #FFFFFF;
	background-color: #3494e6;
}
label.error {
  display: inline;
}
body {
align: center;
  font-family: "Poiret One", cursive;
  background: #3494e6; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #ec6ead,
    #3494e6
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #ec6ead,
    #3494e6
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready (function () {
 $('#first_form').submit (function (e) {
    e.preventDefault();
    var first_name = $('#first_name').val();
    var last_name = $('#last_name').val();
    var email = $('#email').val();
    var password = $('#password').val();
var number = $('#number').val();
  $(".error").remove();
if (first_name.length < 1) {
      $('#first_name').after('<span class="error">This field is required</span>');
    }
if (number.length < 1) {
      $('#number').after('<span class="error">This field is required</span>');
    }
    if (last_name.length < 1) {
      $('#last_name').after('<span class="error">This field is required</span>');
    }
    if (email.length < 1) {
      $('#email').after('<span class="error">This field is required</span>');
    } else {
      var regEx = /^[A-Z0-9][A-Z0-9._%+-]{0,63}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/;
      var validEmail = regEx.test(email);
      if (!validEmail) {
        $('#email').after('<span class="error">Enter a valid email</span>');
      }
    }
    if (password.length < 8) {
      $('#password').after('<span class="error">Password must be at least 8 characters long</span>');
    }
  });

$('form[id="second_form"]').validate({
    rules: {
      fname: 'required',
      lname: 'required',
      user_email: {
        required: true,
        email: true,
      },
      psword: {
        required: true,
        minlength: 8,
      }
    },
    messages: {
      fname: 'This field is required',
      lname: 'This field is required',
      user_email: 'Enter a valid email',
      psword: {
        minlength: 'Password must be at least 8 characters long'
      }
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});
</script>
<body>
<center>

<h2> FORM VALIDATION USING JQUERY </h2>
<form id="first_form" method="post" action="">
  <div>
    <label for="first_name"> Enter First Name: </label>
    <input type="text" id="first_name" name="first_name"></input>
  </div>
  <div>
    <label for="last_name"> Enter Last Name: </label>
    <input type="text" id="last_name" name="last_name"></input>
  </div>
  <div>
   <label for="last_name"> Enter Number: </label>
  <input type="text"  id="number" name="number">
  </div>
  <div>
    <label for="email"> Enter Email: </label>
    <input type="email" id="email" name="email"></input>
  </div>

<div>
    <label for="password"> Enter Password: </label>
    <input type="password" id="password" name="password"></input>
  </div>
  <div>
    <label for="password"> Confirm Password: </label>
    <input type="password" id="password" name="password"></input>
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>
</center>
</body>
</html>

jQuery Tutorial

jQuery Effects

jQuery HTML/CSS

jQuery Form

jQuery Events

jQuery Misc

jQuery Questions

Miscellaneous

jQuery MCQ

jQuery UI

Interview Questions

JQuery Validation

JQuery:

jQuery Validation Form Example

Example 2:

Example 3:

Hot Tutorials

Contact US