This tutorial will help to setup front-end form validation for reset password form using jQuery validate() in a short time. This tutorial carries very basic and clear instructions to help anyone in implementing some validation on their reset password webpage. All one have to do is follow the step by step process.
Step 1: Write the following code for the html page and name the file with .html extention.
<!DOCTYPE html>
<html class="bg-black">
<head>
<meta charset="UTF-8">
<title>Forgot Password </title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/css/AdminLTE.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/jquery.validate.min.js"></script>
</head>
<body class="bg-black">
<div id="content">
<div class="form-box" id="login-box">
<div class="header" style="background-color:#3c8dbc !important;">Reset Password<br/><span id="charcount"></span></div>
<form action="/users/resetpassword" name="passwordresetform" id="formCheckPassword" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
<div class="body bg-gray">
<div class="form-group">
<input name="password" id="password" class="form-control" placeholder="Password" type="password"/>
</div>
<div class="form-group">
<input name="cfmPassword" id="cfmPassword" class="form-control" Placeholder="Confirm Password" type="password"/><input type="hidden" name="data[User][id]" id="UserId"/> </div>
<span id="message"></span>
</div>
<div class="footer">
<div class="submit"><input type="submit" id="Save" value="Save"/></div> </div>
</div>
</div>
</body>
</html>
Step 2: Write the below code in a file and name the file with .js extention.
$(document).ready(function() {
$("#formCheckPassword").validate({
/* here we define the rules for the password and confirmpassword input type field in the
html page.*/
rules: {
password: {
required: true,
minlength: 6,
maxlength: 10,
} ,
cfmPassword: {
required: true,
equalTo: "#password",
minlength: 6,
maxlength: 10
}
},
/* here we define the messages for the password and confirmpassword in case the user does not fulfill the rules defined above.*/
messages:{
password: {
required:"The password is required",
minlength: "Minimum 6 characters",
maxlength: "Maximum 10 characters"
},
cfmPassword: {
required: "Confirm password required",
equalTo: "Not equal",
minlength: "Minimum 6 characters",
maxlength: "Maximum 10 characters"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
0 Comment(s)