Problème Mot de passe
Bonjour a tous, je débute en JS
J'arrive a m'en tirer pour la plus part des choses sauf que par moment j'ai des problèmes que je n'arrive pas a comprendre.
Voila, j'aimerai faire une confirmation de mot de passe
Après avoir repris des codes JavaScript dont je ne suis pas le créateur mais que je comprends, j'en suis arrivé a celui-ci.
J'ai essayé plusieurs pistes mais j'ai rencontré d'autres problèmes donc je tourne un peu en rond maintenant.
Voici mon code qu'on m'a dit qui était assez compliqué et que je pourrai faire plus simple mais malheureusement j'ai besoin d'un code qui fonctionne dans cette forme...
Votre aide et votre temps seraient la bienvenue pour m'aider.
<html>
<head>
<title>Test</title>
</head>
<body>
<form id="add_user" name="add_user"
onsubmit="return verifForm(this)"> <!-- method="post" action="?module=site&action=register" -->
<!-- PSWD -->
Mot de passe:<input id="mdp" name="mdp" type="password" size="40" class="mdp"/></br>
Confirmer mdp:<input name="mdp2" type="password" size="40" onblur="verifMdp2(this)"/>
<input type="submit" value="Valider" /><input type="reset" value="Effacer" />
</form>
<script type="text/javascript">
function surligne(champ, erreur)
{
if(erreur)
champ.style.backgroundColor = "#FFD9CF";
else
champ.style.backgroundColor = "";
}
function verifMdp2(champ)
{
if(champ.value == document.getElementById('mdp').value)
{
surligne(champ, true);
return false;
}
else
{
surligne(champ, false);
return true;
}
}
// Verif Générale
function verifForm(f)
{
var mdpOk = verifMdp2(f.mdp);
if(mdpOk) {
console.log("test");
return true;
} else {
console.log("test2");
alert("Veuillez remplir correctement tous les champs");
return false;
}
}
</script> J'aimerai que lorsque je le clique sur le submit, mon alert se déclenche si jamais les mots de passes ne sont pas les même.
Malheureusement ça ne fonctionne pas
Bien sur mon formulaire est beaucoup plus grand mais je n'ai gardé que l'essentiel, car je sais que l'erreur vient de cette partie du code.
Merci d'avance et merci pour votre temps.
6 réponses
voilà ton script un peu retouché qui devrait pouvoir bien fonctionner!
<html>
<head>
<title>Test</title>
</head>
<body>
<form id="add_user" name="add_user" method="post" action="?module=site&action=register">
Mot de passe:
<input id="mdp" name="mdp" type="password" size="40" class="mdp" onblur="verif();"/></br>
Confirmer mdp:
<input id="mdp2" name="mdp2" type="password" size="40" onblur="verif();"/>
<input type="button" onclick="sendForm();" value="Valider" />
<input type="reset" value="Effacer" />
</form>
<script type="text/javascript">
function verif()
{
if( document.getElementById('mdp').value != document.getElementById('mdp2').value)
{
document.getElementById('mdp').style.borderColor = 'red';
document.getElementById('mdp2').style.borderColor = 'red';
}else{
document.getElementById('mdp').style.borderColor = 'gray';
document.getElementById('mdp2').style.borderColor = 'gray';
}
}
function sendForm()
{
if( document.getElementById('mdp').value != document.getElementById('mdp2').value)
{
document.getElementById('mdp').style.borderColor = 'red';
document.getElementById('mdp2').style.borderColor = 'red';
alert('mots de passe erronés');
}else{
document.getElementById('mdp').style.borderColor = 'gray';
document.getElementById('mdp2').style.borderColor = 'gray';
document.getElementById('add_user').submit();
}
}
</script>
</body>
</html>En esperant t'avoir aidé ;)
Ouf merci beaucoup !
Je ne m'en sortais plus !
Par contre j'ai du modifier mon type="submit" en type="button"
Est ce que cela change énormément ? Sachant que je dev énormément en PHP et que j'utilise que des SUBMIT pour mes formulaires
Si oui existe t'il un moyen pour le laisser en SUBMIT ?
En tout cas merci beaucoup !
Si quelqu'un pourrait m'éclairer sur ma question cela m'aiderait car j'aimerai en apprendre un peu plus :)
Quelqu'un please ? :)
Je pense que je n'aurai pas du dire que la question était résolu :)
Yop. Tu devrais voir les differences entre ces inputs sur ton moteur de recherche préféré. Il y a des tas de réponses sur ce sujet (en anglais généralement) ^^
Pour soumettre un formulaire effectivement un input de type button n'est pas la bonne solution et donc utiliser un input type submit.
Si tu veux vraiment un type button utilise plutôt la balise <button type="submit">Send</button>.
Ton code tu peux le "raccourcir" en utilisant les méthodes de validations d'HTML5 avec setCustomValidity.
Voir ici: http://codepen.io/diegoleme/pen/surIK