Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
File Manager
/
Outlook
/
Fusion
/
formulaire_bootstrap
:
code08.php
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
<!-- 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>