This article lets us understand how to validate a form using the jQuery Validate plugin.
Step 1: Create an HTML form
<html>
<head>
<meta charset="utf-8">
<title>Register</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="task.js"></script>
<link rel="stylesheet" href="task.css">
</head>
<body>
<div class="row" background-color=#FFFFFF>
<div class="column">
<div class="container">
<img src="imag1.png" align="center" alt="LoginForm"">
</div>
</div>
<div class="column">
<div class="container">
<h1> SignUp </h1>
<form name="signup" id="signup">
<div class="container">
<label>Username : </label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Email: </label>
<input type="text" name="email" required="required" id="useremail">
<label>Password : </label>
<input type="password" placeholder="Enter Password" name="password" required>
<label>Confirm Password : </label>
<input type="password" placeholder="Enter Password again" name="confirm_password" required>
<button type="submit">SignUp</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html> Step 2: Add CSS to improve the appearance
Body {
font-family: Calibri, Helvetica, sans-serif;
background-color: white;
}
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.img{
height:100%;
width:100%;
object-fit:contain;
}
.p{
display:flex;
flex-direction:row;
}
p:before, p:after{
content:"";
flex:1 1;
border-bottom:2 px solid #000;
margin:auto;
}
button {
background-color: #4CAF50;
width: 100%;
color: orange;
padding: 15px;
margin: 10px 0px;
border: none;
cursor: pointer;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
margin: 8px 0;
padding: 12px 20px;
display: inline-block;
border: 2px solid green;
box-sizing: border-box;
}
button:hover {
opacity: 0.7;
}
.container {
padding: 25px;
background-color: white;
}
.error {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
padding:1px 20px 1px 20px;
}
Step 3: Add jQuery code to validate
$(function() {
$("#signup").validate({
rules: {
username: {
required: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
minlength: 6,
equalTo: "#password"
},
email: {
required: true,
email: true
},
},
messages: {
username: {
required: "Please enter your username"
},
password: {
required:"Please enter your password",
minlength:"Your password must be atleast 6 characters long"
},
confirm_password: {
required: "please enter your password again",
minlength: "Your password must be atleast 6 characters long",
equalTo:" Both password and confirm password must be same"
},
email: {
required: "Please enter a valid email address"
},
submithandler: function(form){
form.submit();
}
}
})
});
Programming Skills and Tutorials 