Added Show Hide Password Feature To formvalidate.html

This commit is contained in:
Shivanand 2020-07-09 12:49:24 +05:30
parent a73c9ab9be
commit bf9e7b56fa
2 changed files with 34 additions and 1 deletions

File diff suppressed because one or more lines are too long

View file

@ -344,11 +344,19 @@
<div class="col-md-6 col-sm-6">
<input class="form-control" class='time' type="time" name="time" required='required'></div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Password<span class="required">*</span></label>
<div class="col-md-6 col-sm-6">
<input class="form-control" type="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}" title="Minimum 8 Characters Including An Upper And Lower Case Letter, A Number And A Unique Character" data-error="Password Should Be Minimum 8 Characters Including An Upper And Lower Case Letter, A Number And A Unique Character" required /></div>
<input class="form-control" type="password" id="password1" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}" title="Minimum 8 Characters Including An Upper And Lower Case Letter, A Number And A Unique Character" required />
<span style="position: absolute;right:15px;top:7px;" onclick="hideshow()" >
<i id="slash" class="fa fa-eye-slash"></i>
<i id="eye" class="fa fa-eye"></i>
</span>
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Repeat password<span class="required">*</span></label>
<div class="col-md-6 col-sm-6">
@ -397,6 +405,27 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../vendors/validator/multifield.js"></script>
<script src="../vendors/validator/validator.js"></script>
<!-- Javascript functions -->
<script>
function hideshow(){
var password = document.getElementById("password1");
var slash = document.getElementById("slash");
var eye = document.getElementById("eye");
if(password.type === 'password'){
password.type = "text";
slash.style.display = "block";
eye.style.display = "none";
}
else{
password.type = "password";
slash.style.display = "none";
eye.style.display = "block";
}
}
</script>
<script>
// initialize a validator instance from the "FormValidator" constructor.