File "code08.php"
Full Path: /home/analogde/www/Outlook/Fusion/formulaire_bootstrap/code08.php
File size: 5.67 KB
MIME-type: text/html
Charset: utf-8
<!--
https://www.freetimelearning.com/bootstrap-snippets/bootstrap-3-main-plugins.php?Confirm-Password-Validation--Bootstrap-3-Confirm-Password-Validation&id=84
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Confirm Password Validation , Bootstrap 3 Confirm Password Validation</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Font icons -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style type="text/css">
.conform_password_box{
border:1px solid #0099da;
padding:0px 0px 20px;
margin:15px 0px 0px;
}
.p10_15{ padding:10px 15px;}
.conform_password_box_title{
background:#0099da;
color:#FFF;
padding:15px 0px;
text-align:center;
font-size:18px;
}
.form-control{
border-radius:1px;
margin:15px 0px 5px;
padding:20px 10px;
font-size:16px;
}
.btn{ border-radius:2px !important;}
.btn-submit{
background:#0099da;
color:#FFF;
padding:10px 0px;
margin:20px 0px 0px;
font-size:16px;
}
.btn-submit:hover{ background:#0086C6; color:#FFF;}
</style>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="conform_password_box">
<div class="conform_password_box_title">Confirm Password Validation</div>
<div class="p10_15">
<form method="post" id="passwordForm" action="">
<input type="password" class="form-control" name="new_password" id="new_password" placeholder="New Password" autocomplete="off" required>
<div class="row">
<div class="col-sm-6">
<span id="8char" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> 8 Characters Long<br>
<span id="ucase" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Uppercase Letter
</div>
<div class="col-sm-6">
<span id="lcase" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Lowercase Letter<br>
<span id="num" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Number
</div>
<div class="col-sm-6">
<span id="special" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> One Special Character</div>
</div>
<input type="password" class="form-control" name="confirm_password" id="confirm_password" placeholder="Confirm Password" autocomplete="off" required>
<div class="row">
<div class="col-sm-12">
<span id="pwmatch" class="glyphicon glyphicon-remove" style="color:#FF0004;"></span> Passwords Match
</div>
</div>
<input type="button" class="col-xs-12 btn btn-submit btn-block" data-loading-text="Changing Password..." value="Change Password">
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("input[type=password]").keyup(function(){
var ucase = new RegExp(/[A-Z]/);
var lcase = new RegExp(/[a-z]/);
var num = new RegExp(/[0-9]/);
var special = new RegExp(/[^a-zA-Z0-9\-\/]/);
if($("#new_password").val().length >= 8){
$("#8char").removeClass("glyphicon-remove");
$("#8char").addClass("glyphicon-ok");
$("#8char").css("color","#00A41E");
}else{
$("#8char").removeClass("glyphicon-ok");
$("#8char").addClass("glyphicon-remove");
$("#8char").css("color","#FF0004");
}
if(ucase.test($("#new_password").val())){
$("#ucase").removeClass("glyphicon-remove");
$("#ucase").addClass("glyphicon-ok");
$("#ucase").css("color","#00A41E");
}else{
$("#ucase").removeClass("glyphicon-ok");
$("#ucase").addClass("glyphicon-remove");
$("#ucase").css("color","#FF0004");
}
if(lcase.test($("#new_password").val())){
$("#lcase").removeClass("glyphicon-remove");
$("#lcase").addClass("glyphicon-ok");
$("#lcase").css("color","#00A41E");
}else{
$("#lcase").removeClass("glyphicon-ok");
$("#lcase").addClass("glyphicon-remove");
$("#lcase").css("color","#FF0004");
}
if(num.test($("#new_password").val())){
$("#num").removeClass("glyphicon-remove");
$("#num").addClass("glyphicon-ok");
$("#num").css("color","#00A41E");
}else{
$("#num").removeClass("glyphicon-ok");
$("#num").addClass("glyphicon-remove");
$("#num").css("color","#FF0004");
}
if(special.test($("#new_password").val())){
$("#special").removeClass("glyphicon-remove");
$("#special").addClass("glyphicon-ok");
$("#special").css("color","#00A41E");
}else{
$("#special").removeClass("glyphicon-ok");
$("#special").addClass("glyphicon-remove");
$("#special").css("color","#FF0004");
}
if($("#new_password").val() == $("#confirm_password").val()){
alert("tttt");
$("#pwmatch").removeClass("glyphicon-remove");
$("#pwmatch").addClass("glyphicon-ok");
$("#pwmatch").css("color","#00A41E");
}else{
$("#pwmatch").removeClass("glyphicon-ok");
$("#pwmatch").addClass("glyphicon-remove");
$("#pwmatch").css("color","#FF0004");
}
});
</script>
</body>
</html>