jQuery form validation using plugin

In this tutorial, we are going to discuss jQuery form validation using jquery validate plugin. We have already discussed about custom jquery form validation without using jquery validate plugin in my early article on Custom jQuery HTML form fields validation for all input types. We have used same HTML form which is used in the custom jquery form validation.

It’s very simple and easy to do jquery form validation using a jquery validate plugin. Since we are using jquery validate plugin we don’t need to write any additional jQuery code for form validation. All we need to do is, leverage the jQuery validate plugin features according to our requirement. In this example, we have covered all type of HTML form fields for jquery form validation using the plugin.

The form which has used in this example has the following fields and below is the respective HTML code for these fields.

  • Firstname
  • Lastname
  • Email address
  • Password
  • Confirm password
  • Gender
  • Habbits
  • Country
  • About you

HTML Code, for best practice we are loading CSS files in the head tag and javascript files are loading before body close tag. HTML form as usual in between body tags.


<!DOCTYPE html>
<head>
<title>
jQuery form validation with plugin
</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
	<h1>jQuery form validation with plugin</h1>
	<div class="login-page">
		<form  action="" name="registerForm" id="registerForm" autocomplete="off" method="POST" > 
			<h2>Register</h1>
			<p> 
				<label for="firstname" class="uname" > Firstname </label>
				<input id="firstname" name="firstname" type="text" placeholder="Firstname"/>
			</p>
			<p> 
				<label for="lastname" class="youpasswd"> Lastname </label>
				<input id="lastname" name="lastname" type="text" placeholder="Lastname"/> 
			</p>
			<p> 
				<label for="email" class="uname" > Email address </label>
				<input id="email" name="email" type="text" placeholder="Enter address" />
			</p>
			<p> 
				<label for="password" class="uname" > Password </label>
				<input id="password" name="password" type="password" placeholder="Password"/>
			</p>
			<p> 
				<label for="cpassword" class="uname" > Confirm password </label>
				<input id="cpassword" name="cpassword" type="password" placeholder="Confirm password" />
			</p>
			<P>
				<label for="gender">Gender</label>
				<span class="gender">
					<span><input type="radio" id="male" name="gender" value="male" /> <label for="male">Male</label></span>
					<span><input type="radio" id="female" name="gender" value="female" /> <label for="female">Female</label></span>
				</span>	
				<label for="gender" class="error">Please select your gender</label>
			</p>
			<P>
				<label for="habbits">Habbits</label>
				<span class="habbits">
					<span><input type="checkbox" id="cricket" name="habbits" value="Cricket" /> <label for="cricket">Cricket</label></span>
					<span><input type="checkbox" id="baseball" name="habbits" value="Baseball" /> <label for="baseball">Baseball</label></span>
					<span><input type="checkbox" id="soccer" name="habbits" value="Soccer" /> <label for="soccer">Soccer</label></span>
				</span>	
				<label for="habbits" class="error">Please select at least 1 habbit</label>
			</p>
			
			<p> 
				<label for="country" class="uname" > Country </label>
				<select name="country" id="country">
					<option value="">Please select your country</option>
					<option>Country1</option>
					<option>Country2</option>
					<option>Country3</option>
					<option>Country4</option>
					<option>Country5</option>
					<option>Country6</option>
				</select>
			</p>
			
			<p> 
				<label for="aboutyou" class="uname" data-icon="u" > About you </label>
				<textarea id="aboutyou" name="aboutyou" cols="53" rows="5" placeholder="About you..."></textarea>
			</p>
			<p class="login button">
				<input type="hidden" name="fAction" value="Register" />
				<input type="submit" value="Login" /> 
			</p>
			
		</form>
	</div>
</div>
<script type="text/javascript"  src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jqueryValidate.js"></script>
</body>
</html>

Below is the CSS that is used for this example. If you see the last property of the CSS code that is used to control the radio button or checkboxes error placement. If you check in the HTML form code we have place dummy error label below to radio buttons and checkboxes HTML code to overwrite its default error HTML insertion.


#container{
	margin:0 auto; width:768px;
	font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
}
#container h1{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 35px;
    line-height: 35px;
    position: relative;
    font-weight: 400;
	text-align: center;
}
.login-page{ 
	margin:20px auto;
	width:400px;
	border:1px #3d9db3 solid;
	padding:20px;
	border-radius: 15px;	
}
.login-page h2{
	margin-top: 0px;
	padding-bottom:10px;
	text-align:center;
	border-bottom:1px #3d9db3 solid;
}
.login.button{
	text-align:right;
}
.login.button input{
	width: 30%;
    cursor: pointer;
    background: rgb(61, 157, 179);
    padding: 8px 5px;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    color: #fff;
    font-size: 24px;
    border: 1px solid rgb(28, 108, 122);
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	margin-left:10px;
}
.login-page label{
	color:#405c60;
	position:relative;
	display:inline-block;
}
#container input[type="text"],#container input[type="password"] {
    width: 95%;
    margin-top: 4px;
    padding: 10px 5px 10px 15px;
    border: 1px solid rgb(178, 178, 178);
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
}
.errorMsg,label.error{
	color:#FF0000;
}
.successMsg{
	color:#2cad0e;
}

.logout{
	float:right;
}

.logout a{
	color:#3d9db3;
	font-size:20px;
	text-decoration:none;
}
.logout a:hover{
	text-decoration:underline;
}

select{
	width: 50%;
    display: block;
	padding:5px;
}
.gender,.habbits{
	display: block;
}	

label.error{
	display:none;
}

jQuery code that is used for jquery form validation where we are declaring the required form fields for validation and error messages for each field.

// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registerForm"
  $("form[name='registerForm']").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      },
	  cpassword: {
		required: true,
		minlength: 5,
		equalTo: "#password"
	  },
	  gender: "required",
	  habbits: "required",
	  country: "required",
	  aboutyou: "required",
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
	  cpassword: "Passwords doesnot match!",
      email: "Please enter a valid email address",
	  gender: "Please select your gender ",
	  habbits: "Please select atleast one habbit",
	  country: "Please select country",
	  aboutyou: "Describe about yourself "
	  
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

Hope this jquery form validation tutorial helps you in your development. For demo and download, check the below links.


Download / Demo

You may also like...