Bonjour,
Voila ce que je veux faire est de pouvoir vérifier les passwords d'utilisateur avant de lancer l'action de form vers php. J'arrive à vérifier le premier password mais pour la confirmation de deuxième password la function ValidatePass doit empêcher l'appel vers php si les deux password ne sont pas égaux.
<html>
<head>
<style>
#Message{ margin-left:5px; }
#user_registration
{
border:1px solid #cccccc;
margin-top:10px;
width:100%;
}
#user_registration label
{
display: block; /* block float the labels to left column, set a width */
float: left;
width: 70px;
margin: 0px 10px 0px 5px;
margin: 0px 0px 0px px;
text-align: right;
line-height:1em;
font-weight:bold;
}
#user_registration input { width:250px; }
#passwordStrength { height:5px; display:block; float:left; }
.strength0 { width:250px; background:#cccccc; }
.strength1 { width:50px; background:#ff0000; }
.strength2 { width:100px; background:#ff5f5f; }
.strength3 { width:150px; background:#56e500; }
.strength4 { width:200px; background:#4dcd00; }
.strength5 { width:250pw; background:#399800; }
#validEmail, #validPass, #validate
{
height: 16px;
width: 16px;
}
</style>
<script>
function ValidatePass()
{
var p2 = $("#pass2").val();
var p1 = $("#pass").val();
if (p2 == p1 )
{
return true;
}
else
{
return false;
}
}
function passwordStrength(password)
{
var desc = new Array();
desc[0] = "Very Weak";
desc[1] = "Weak";
desc[2] = "Better";
desc[3] = "Medium";
desc[4] = "Strong";
desc[5] = "Strongest";
var score = 0;
$("#validate").css({ "background-image": "url('/Img/validNo.png')" });
if (password.length > 6) score++;
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
if (password.match(/\d+/)) score++;
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )
{
score++;
document.getElementById('passwordDescription').style.display="none";
document.getElementById('passwordStrength').style.display="none";
$("#validate").css({ "background-image": "url('/Img/validYes.png')" });
}
if (password.length > 7) score++;
document.getElementById("passwordDescription").innerHTML = desc[score];
document.getElementById("passwordStrength").className = "strength" + score;
}
$(document).ready(function()
{
$("#validmail").keyup(function()
{
var email = $("#validmail").val();
if(email != 0)
{
if(isValidEmailAddress(email))
{
$("#validEmail").css({ "background-image": "url('/Img/validYes.png')" });
}
else
{
$("#validEmail").css({ "background-image": "url('/Img/validNo.png')" });
}
}
else
{
$("#validEmail").css({ "background-image": "none" });
}
});
});
</script>
</head>
<body>
<form method="post" action="t.php" id="user_registration" name="user_registration" onsubmit="return ealidatePass();" /> <br />
<div>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/>
<span id="validate"></span>
</div>
<div>
<label for="pass2">Confirm Password</label><input type="password" name="pass2" id="pass2"/>
<div class="" id="passwordDescription">Password not entered</div>
<div id="passwordStrength"></div>
</div>
<div class="form-actions">
<button type="submit" id="send" name="send" class="btn btn-primary">Submit<i class="icon-white icon-ok-sign"></i></button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
</body>
</html>
Afficher la suite
