Réinitialiser le Mot de passe à l'Aide de Html et javascript

J'Ai une exigence où j'ai 3 champs de saisie à savoir

1.ancien mot de passe

2.nouveau mot de passe

3.confirmer le mot de passe.

Pour laquelle j'ai besoin d'appliquer les règles comme suit.

1.L'ancien et le nouveau mot de passe ne doit pas correspondre.

2.Pas de champ doit être vide.

3.Nouveau mot de passe et confirmer le mot de passe entrées doit être la même.

Si toutes ces validations passe ensuite seul formulaire doit être soumis.

Voici le fichier Html pour laquelle j'ai besoin d'appliquer js

HTML:

<form role="form" method="post">
<div class="box box-primary">
<div class="box-header">
<h2 class="page-header"><i class="fa fa-lock"></i> Change Password</h2>
<div class="pull-right">
<button type="button" name="Submit" value="Save" class="btn btn-danger"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" ></i> Save</button>
<button type="reset" name="Reset" value="Clear" class="btn btn-primary"><i class="livicon" data-n="trash" data-s="16" data-c="#fff" data-hc="0"></i> Clear</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Old Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="oldPassword" name="oldPassword" value="" placeholder="Enter the Old Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>New Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="newPassword" name="newPassword" value="" placeholder="Enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
<br/>
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-3">
<label>Confirm Password</label>
</div>
<div class="col-xs-12 col-sm-3 col-md-3">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-lock"></i>
</div>
<input class="form-control" id="confirmPassword" name="confirmPassword" value="" placeholder="Re-enter the New Password" type="password">
</div>
</div>
<!-- /.input group -->
</div>
</form>

merci

  • Avez-vous essayé quelque chose qui ne fonctionne pas ? Si le n ensuite, vous aurez besoin d'un entrepreneur!
InformationsquelleAutor Vijay Kumar | 2015-11-03
  1. 0

    Veuillez les remplacer avec vos identifiants..

        function checkForm()
{
var oldP=document.getElementById("oldP").value;
var newP=document.getElementById("newP").value;
var confirmP =document.getElementById("confirmP").value;
if(oldP!=""&&newP!=""&&confirmP!="")
{
if(oldP!=newP)
{
if(newP==confirmP)
{
return true;
}
else
{
alert("Confirm password is not same as you new password.");
return false;
}
}
else
{
alert(" This Is Your Old Password,Please Provide A New Password");
return false;
}
}
else
{
alert("All Fields Are Required");
return false;
}
}

    Une thml, vous devez ajouter

    <form onsubmit="return checkForm();" ----- >

    Pour réinitialiser vous pouvez créer une fonction somting comme ce

    function resetForm()
{
var oldP=document.getElementById("oldP").value="";
var newP=document.getElementById("newP").value="";
var confirmP =document.getElementById("confirmP").value="";
}

    et de l'appeler quand vous voulez formulaire de réinitialisation.

    • Mais si j'utilise la boîte de dialogue au lieu de l'alerte..sa ne fonctionne pas..aucune raison pour que
    • Ce n'est pas de travail... de soumission du formulaire sans validation??
    • j'ai une boîte de dialogue au lieu de l'alerte...si je demande que le formulaire sera soumis sans validation
    • vous êtes à l'aide de jquery dialogue ou pas... si c'est possible de poster certains de code.. donc je peux obtenir ce qui se passe. je pense que le problème est à cause de script d'exécution asynchrone.
    • oui jquery boîte de dialogue, je suis en utilisant...
    • vous pouvez voir le jquery je suis à l'aide de mises à jour des question
    • essayez ce pas testé mais les travaux je pense...` setTimeout('vous appeler boîte de dialogue',10)`

    InformationsquelleAutor Anand Singh
  2. 1

    tout d'abord, vous devez attraper le clic avtion sur le bouton soumettre et vérifier les champs 

    $([name=Submit]).on('click', function(e) {
if (($('#oldPassword').val() == "")||($('#newPassword').val() == "")||($('#confirmPassword').val() == "")) {//check 2
e.preventDefault();
}
if ($('#oldPassword').val() == $('#newPassword').val()) {//check 1
e.preventDefault();
}
if ($('#newPassword').val() != $('#confirmPassword').val()) {//check 3
e.preventDefault();
}
}

    P. S. j'ai écrit le code dans ce style parce que je veux vous montrer toutes les étapes. shurely vous pouvez combiner 'si est dans un de clair de votre code. à titre d'exemple u peut combiner la case 1 et la case 3 et le mettre dans le bloc else de vérifier 2

    InformationsquelleAutor Иван Брагин
  3. 1

    de créer une fonction et l'appel sur le onClick du bouton

    <button type="button" name="Submit" value="Save" class="btn btn-danger" onclick="Function();"><i class="livicon" data-n="pen" data-s="16" data-c="#fff" data-hc="0" "></i> Save</button>

    Votre Fonction javascript sera Comme ceci

      <script>
function Function() {
var oldpasswprd = document.getElementById('oldPassword').value;
var newpassword = document.getElementById('newPassword').value;
var confirmpassword = document.getElementById('confirmPassword').value;
if (oldPassword == "" || newpassword == "" || confirmpassword == "") {
alert('Please fill all the details');
}
else if (oldpasswprd == newpassword) {
alert("Old password and New Password cannot be same");
}
else if (newpassword != confirmpassword) {
alert("password mismatch");
}
}
</script>
    InformationsquelleAutor Ravi Kanth