<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css"> <div class="container"> <div class="row"> <label>Mot de passe : </label><input name= "password1" id="password1" type="password" class="form-control text-center"> <div class="row"> <div class="col-sm-6"> <span id="8char" class="fas fa-times" style="color:#FF0004;"></span> 8 caractères Min<br> <span id="ucase" class="fas fa-times" style="color:#FF0004;"></span> 1 lettre majuscule Min </div> <div class="col-sm-6"> <span id="lcase" class="fas fa-times" style="color:#FF0004;"></span> 1 lettre minuscule Min<br> <span id="num" class="fas fa-times" style="color:#FF0004;"></span> 1 Chiffre Min </div> <div class="col-sm-12 mb-3"> <span id="specialchar" class="fas fa-times" style="color:#FF0004;"></span> 1 caractère spécial Min </div> </div> <label>Confirmation du mot de passe : </label><input name="password2" id="password2" type="password" class="form-control form-control-user text-center"> <div class="row"> <div class="col-sm-12"> <span id="pwmatch" class="fas fa-times" style="color:#FF0004;"></span> Mot de passe identique </div> </div> <div class="col-12 mx-auto"><button type="submit" class="btn btn-primary" name="btn-form-valider" id="btn-form-valider" disabled>Valider</button></div> </div> </div>

$("input[type=password]").keyup(function(){ var ucase = new RegExp("[A-Z]+"); var lcase = new RegExp("[a-z]+"); var num = new RegExp("[0-9]+"); var specialchar = new RegExp("[^A-Za-z0-9]+"); var Valide8char = false; var Valideucase = false; var Validelcase = false; var Validenum = false; var Validespecialchar = false; var Validepwmatch = false; if($("#password1").val().length >= 8){ $("#8char").removeClass("fa-times"); $("#8char").addClass("fa-check"); $("#8char").css("color","#00A41E"); Valide8char = true; }else{ $("#8char").removeClass("fa-check"); $("#8char").addClass("fa-times"); $("#8char").css("color","#FF0004"); Valide8char = false; } if(ucase.test($("#password1").val())){ $("#ucase").removeClass("fa-times"); $("#ucase").addClass("fa-check"); $("#ucase").css("color","#00A41E"); Valideucase = true; }else{ $("#ucase").removeClass("fa-check"); $("#ucase").addClass("fa-times"); $("#ucase").css("color","#FF0004"); Valideucase = false; } if(lcase.test($("#password1").val())){ $("#lcase").removeClass("fa-times"); $("#lcase").addClass("fa-check"); $("#lcase").css("color","#00A41E"); Validelcase = true; }else{ $("#lcase").removeClass("fa-check"); $("#lcase").addClass("fa-times"); $("#lcase").css("color","#FF0004"); Validelcase = false; } if(num.test($("#password1").val())){ $("#num").removeClass("fa-times"); $("#num").addClass("fa-check"); $("#num").css("color","#00A41E"); Validenum = true; }else{ $("#num").removeClass("fa-check"); $("#num").addClass("fa-times"); $("#num").css("color","#FF0004"); Validenum = false; } if(specialchar.test($("#password1").val())){ $("#specialchar").removeClass("fa-times"); $("#specialchar").addClass("fa-check"); $("#specialchar").css("color","#00A41E"); Validespecialchar = true; }else{ $("#specialchar").removeClass("fa-check"); $("#specialchar").addClass("fa-times"); $("#specialchar").css("color","#FF0004"); Validespecialchar = false; } if($("#password1").val() == $("#password2").val()){ $("#pwmatch").removeClass("fa-times"); $("#pwmatch").addClass("fa-check"); $("#pwmatch").css("color","#00A41E"); Validepwmatch = true; }else{ $("#pwmatch").removeClass("fa-check"); $("#pwmatch").addClass("fa-times"); $("#pwmatch").css("color","#FF0004"); Validepwmatch = false; } if(Valide8char == true && Valideucase == true && Validelcase == true && Validenum == true && Validespecialchar == true && Validepwmatch == true) { document.getElementById('btn-form-valider').disabled = false; } else { document.getElementById('btn-form-valider').disabled = true; } });