maxmustermann/gentelella
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Improved Password Validation And Added Password Hide/Show Button

Browse source
This commit is contained in:
Shivanand 2020-07-14 11:35:02 +05:30
parent 2118ba38d0
commit d4c170de34
2 changed files with 448 additions and 435 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
build/css/custom.min.css vendored
View file

File diff suppressed because one or more lines are too long

109
production/form_validation.html
View file

@ -143,8 +143,7 @@
</li> </li>
</ul> </ul>
</li> </li>
<li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
class="label label-success pull-right">Coming Soon</span></a></li>
</ul> </ul>
</div> </div>
@ -179,8 +178,7 @@
<nav class="nav navbar-nav"> <nav class="nav navbar-nav">
<ul class=" navbar-right"> <ul class=" navbar-right">
<li class="nav-item dropdown open" style="padding-left: 15px;"> <li class="nav-item dropdown open" style="padding-left: 15px;">
<a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
data-toggle="dropdown" aria-expanded="false">
<img src="images/img.jpg" alt="">John Doe <img src="images/img.jpg" alt="">John Doe
</a> </a>
<div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown"> <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
@ -195,8 +193,7 @@
</li> </li>
<li role="presentation" class="nav-item dropdown open"> <li role="presentation" class="nav-item dropdown open">
<a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown" <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown" aria-expanded="false">
aria-expanded="false">
<i class="fa fa-envelope-o"></i> <i class="fa fa-envelope-o"></i>
<span class="badge bg-green">6</span> <span class="badge bg-green">6</span>
</a> </a>
@ -295,8 +292,7 @@
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
class="fa fa-wrench"></i></a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Settings 1</a> <a class="dropdown-item" href="#">Settings 1</a>
<a class="dropdown-item" href="#">Settings 2</a> <a class="dropdown-item" href="#">Settings 2</a>
@ -309,81 +305,70 @@
</div> </div>
<div class="x_content"> <div class="x_content">
<form class="" action="" method="post" novalidate> <form class="" action="" method="post" novalidate>
<p>For alternative validation library <code>parsleyJS</code> check out in the <a <p>For alternative validation library <code>parsleyJS</code> check out in the <a href="form.html">form page</a>
href="form.html">form page</a>
</p> </p>
<span class="section">Personal Info</span> <span class="section">Personal Info</span>
<div class="field item form-group"> <div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Name<span <label class="col-form-label col-md-3 col-sm-3 label-align">Name<span class="required">*</span></label>
class="required">*</span></label>
<div class="col-md-6 col-sm-6"> <div class="col-md-6 col-sm-6">
<input class="form-control" data-validate-length-range="6" data-validate-words="2" name="name" <input class="form-control" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" />
placeholder="ex. John f. Kennedy" required="required" />
</div> </div>
</div> </div>
<div class="field item form-group"> <div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Occupation<span <label class="col-form-label col-md-3 col-sm-3 label-align">Occupation<span class="required">*</span></label>
class="required">*</span></label>
<div class="col-md-6 col-sm-6"> <div class="col-md-6 col-sm-6">
<input class="form-control" class='optional' name="occupation" data-validate-length-range="5,15" <input class="form-control" class='optional' name="occupation" data-validate-length-range="5,15" type="text" /></div>
type="text" /></div>
</div> </div>
<div class="field item form-group"> <div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">email<span <label class="col-form-label col-md-3 col-sm-3 label-align">email<span class="required">*</span></label>
class="required">*</span></label>
<div class="col-md-6 col-sm-6"> <div class="col-md-6 col-sm-6">
<input class="form-control" name="email" class='email' required="required" type="email" /></div> <input class="form-control" name="email" class='email' required="required" type="email" /></div>
</div> </div>
<div class="field item form-group"> <div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Confirm email address<span <label class="col-form-label col-md-3 col-sm-3 label-align">Confirm email address<span class="required">*</span></label>
class="required">*</span></label>
<div class="col-md-6 col-sm-6"> <div class="col-md-6 col-sm-6">
<input class="form-control" type="email" class='email' name="confirm_email" <input class="form-control" type="email" class='email' name="confirm_email" data-validate-linked='email' required='required' /></div>
data-validate-linked='email' required='required' /></div>
</div> </div>
<div class="field item form-group"> <div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Number <span <label class="col-form-label col-md-3 col-sm-3 label-align">Number <span class="required">*</span></label>
class="required">*</span></label>
<div class="col-md-6 col-sm-6"> <div class="col-md-6 col-sm-6">
<input class="form-control" type="number" class='number' name="number" <input class="form-control" type="number" class='number' name="number" data-validate-minmax="10,100" required='required'></div>
data-validate-minmax="10,100" required='required'></div>
</div> </div>
<div class="field item form-group"> <div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Date<span <label class="col-form-label col-md-3 col-sm-3 label-align">Date<span class="required">*</span></label>
class="required">*</span></label>
<div class="col-md-6 col-sm-6"> <div class="col-md-6 col-sm-6">
<input class="form-control" class='date' type="date" name="date" required='required'></div> <input class="form-control" class='date' type="date" name="date" required='required'></div>
</div> </div>
<div class="field item form-group"> <div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Time<span <label class="col-form-label col-md-3 col-sm-3 label-align">Time<span class="required">*</span></label>
class="required">*</span></label>
<div class="col-md-6 col-sm-6"> <div class="col-md-6 col-sm-6">
<input class="form-control" class='time' type="time" name="time" required='required'></div> <input class="form-control" class='time' type="time" name="time" required='required'></div>
</div> </div>
<div class="field item form-group"> <div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Password<span <label class="col-form-label col-md-3 col-sm-3 label-align">Password<span class="required">*</span></label>
class="required">*</span></label>
<div class="col-md-6 col-sm-6"> <div class="col-md-6 col-sm-6">
<input class="form-control" type="password" name="password" data-validate-length="6,8" <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 />
required='required' /></div>
<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">
<input class="form-control" type="password" name="password2" data-validate-linked='password' required='required' /></div>
</div> </div>
<div class="field item form-group"> <div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Repeat password<span <label class="col-form-label col-md-3 col-sm-3 label-align">Telephone<span class="required">*</span></label>
class="required">*</span></label>
<div class="col-md-6 col-sm-6"> <div class="col-md-6 col-sm-6">
<input class="form-control" type="password" name="password2" data-validate-linked='password' <input class="form-control" type="tel" class='tel' name="phone" required='required' data-validate-length-range="8,20" /></div>
required='required' /></div>
</div> </div>
<div class="field item form-group"> <div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">Telephone<span <label class="col-form-label col-md-3 col-sm-3 label-align">message<span class="required">*</span></label>
class="required">*</span></label>
<div class="col-md-6 col-sm-6">
<input class="form-control" type="tel" class='tel' name="phone" required='required'
data-validate-length-range="8,20" /></div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">message<span
class="required">*</span></label>
<div class="col-md-6 col-sm-6"> <div class="col-md-6 col-sm-6">
<textarea required="required" name='message'></textarea></div> <textarea required="required" name='message'></textarea></div>
</div> </div>
@ -420,10 +405,33 @@
<script src="../vendors/validator/multifield.js"></script> <script src="../vendors/validator/multifield.js"></script>
<script src="../vendors/validator/validator.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> <script>
// initialize a validator instance from the "FormValidator" constructor. // initialize a validator instance from the "FormValidator" constructor.
// A "<form>" element is optionally passed as an argument, but is not a must // A "<form>" element is optionally passed as an argument, but is not a must
var validator = new FormValidator({ "events": ['blur', 'input', 'change'] }, document.forms[0]); var validator = new FormValidator({
"events": ['blur', 'input', 'change']
}, document.forms[0]);
// on form "submit" event // on form "submit" event
document.forms[0].onsubmit = function(e) { document.forms[0].onsubmit = function(e) {
var submit = true, var submit = true,
@ -441,6 +449,7 @@
if (this.checked) if (this.checked)
$('form .alert').remove(); $('form .alert').remove();
}).prop('checked', false); }).prop('checked', false);
</script> </script>
<!-- jQuery --> <!-- jQuery -->