Improved Password Validation And Added Password Hide/Show Button
This commit is contained in:
parent
2118ba38d0
commit
d4c170de34
File diff suppressed because one or more lines are too long
|
@ -143,8 +143,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<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>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
@ -179,8 +178,7 @@
|
|||
<nav class="nav navbar-nav">
|
||||
<ul class=" navbar-right">
|
||||
<li class="nav-item dropdown open" style="padding-left: 15px;">
|
||||
<a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown"
|
||||
data-toggle="dropdown" aria-expanded="false">
|
||||
<a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
|
||||
<img src="images/img.jpg" alt="">John Doe
|
||||
</a>
|
||||
<div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
|
||||
|
@ -195,8 +193,7 @@
|
|||
</li>
|
||||
|
||||
<li role="presentation" class="nav-item dropdown open">
|
||||
<a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown"
|
||||
aria-expanded="false">
|
||||
<a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown" aria-expanded="false">
|
||||
<i class="fa fa-envelope-o"></i>
|
||||
<span class="badge bg-green">6</span>
|
||||
</a>
|
||||
|
@ -295,8 +292,7 @@
|
|||
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
||||
</li>
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i
|
||||
class="fa fa-wrench"></i></a>
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||
<a class="dropdown-item" href="#">Settings 1</a>
|
||||
<a class="dropdown-item" href="#">Settings 2</a>
|
||||
|
@ -309,81 +305,70 @@
|
|||
</div>
|
||||
<div class="x_content">
|
||||
<form class="" action="" method="post" novalidate>
|
||||
<p>For alternative validation library <code>parsleyJS</code> check out in the <a
|
||||
href="form.html">form page</a>
|
||||
<p>For alternative validation library <code>parsleyJS</code> check out in the <a href="form.html">form page</a>
|
||||
</p>
|
||||
<span class="section">Personal Info</span>
|
||||
<div class="field item form-group">
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Name<span
|
||||
class="required">*</span></label>
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Name<span class="required">*</span></label>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<input class="form-control" data-validate-length-range="6" data-validate-words="2" name="name"
|
||||
placeholder="ex. John f. Kennedy" required="required" />
|
||||
<input class="form-control" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field item form-group">
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Occupation<span
|
||||
class="required">*</span></label>
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Occupation<span class="required">*</span></label>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<input class="form-control" class='optional' name="occupation" data-validate-length-range="5,15"
|
||||
type="text" /></div>
|
||||
<input class="form-control" class='optional' name="occupation" data-validate-length-range="5,15" type="text" /></div>
|
||||
</div>
|
||||
<div class="field item form-group">
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">email<span
|
||||
class="required">*</span></label>
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">email<span class="required">*</span></label>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<input class="form-control" name="email" class='email' required="required" type="email" /></div>
|
||||
</div>
|
||||
<div class="field item form-group">
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Confirm email address<span
|
||||
class="required">*</span></label>
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Confirm email address<span class="required">*</span></label>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<input class="form-control" type="email" class='email' name="confirm_email"
|
||||
data-validate-linked='email' required='required' /></div>
|
||||
<input class="form-control" type="email" class='email' name="confirm_email" data-validate-linked='email' required='required' /></div>
|
||||
</div>
|
||||
<div class="field item form-group">
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Number <span
|
||||
class="required">*</span></label>
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Number <span class="required">*</span></label>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<input class="form-control" type="number" class='number' name="number"
|
||||
data-validate-minmax="10,100" required='required'></div>
|
||||
<input class="form-control" type="number" class='number' name="number" data-validate-minmax="10,100" required='required'></div>
|
||||
</div>
|
||||
<div class="field item form-group">
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Date<span
|
||||
class="required">*</span></label>
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Date<span class="required">*</span></label>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<input class="form-control" class='date' type="date" name="date" required='required'></div>
|
||||
</div>
|
||||
<div class="field item form-group">
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Time<span
|
||||
class="required">*</span></label>
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Time<span class="required">*</span></label>
|
||||
<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>
|
||||
<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" data-validate-length="6,8"
|
||||
required='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">
|
||||
<input class="form-control" type="password" name="password2" data-validate-linked='password' required='required' /></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>
|
||||
<label class="col-form-label col-md-3 col-sm-3 label-align">Telephone<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>
|
||||
<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">Telephone<span
|
||||
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>
|
||||
<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">
|
||||
<textarea required="required" name='message'></textarea></div>
|
||||
</div>
|
||||
|
@ -420,10 +405,33 @@
|
|||
<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.
|
||||
// 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
|
||||
document.forms[0].onsubmit = function(e) {
|
||||
var submit = true,
|
||||
|
@ -441,6 +449,7 @@
|
|||
if (this.checked)
|
||||
$('form .alert').remove();
|
||||
}).prop('checked', false);
|
||||
|
||||
</script>
|
||||
|
||||
<!-- jQuery -->
|
||||
|
|
Loading…
Reference in New Issue