web-dev-qa-db-fra.com

Validation du formulaire Javascript avec confirmation du mot de passe

J'essaie d'écrire une page d'inscription et j'ai le plus de mal.

<form  action="insert.php" method="post">
    <h1>Registration:</h1>
    <input type="text" name="first" placeholder="First name">
    <input type="text" name="last" placeholder="Last name"><br />
    <input type="text" name="username" placeholder="Username"> <br />
    <input type="password" name="password" placeholder="password"> <br />
    <input type="password" name="confirmPass" placeholder="Confirm Password"> <br />
    <input type="submit" value="Register">
</form>

Ceci est mon code sur la page d'inscription. Comment appeler ma fonction JavaScript et la laisser publier et effectuer l'action? Je l'ai fait comme un module simple qui est séparé mais je voudrais les fusionner

<input id="pass1" type="password" placeholder="Password" style="border-radius:7px; border:2px solid #dadada;" /> <br />
<input id="pass2" type="password" placeholder="Confirm Password" style="border-radius:7px; border:2px solid #dadada;"/> <br />

<script>
    function myFunction() {
        var pass1 = document.getElementById("pass1").value;
        var pass2 = document.getElementById("pass2").value;
        if (pass1 != pass2) {
            //alert("Passwords Do not match");
            document.getElementById("pass1").style.borderColor = "#E34234";
            document.getElementById("pass2").style.borderColor = "#E34234";
        }
        else {
            alert("Passwords Match!!!");
        }
    }
</script>

<button type="button" onclick="myFunction()">Sumbit</button>

Je n'ai pas besoin d'aide pour les fusionner, je sais que je devrais changer certaines choses, mais si elles sont ensemble, comment appeler la fonction JavaScript?

Cela sera fait plus soigneusement après avoir compris quoi faire, alors quelle serait la meilleure façon d'appeler ma fonction JavaScript et si elle réussit, passez à la partie post et action du formulaire. Je pourrais abandonner le bouton de soumission et faire juste un type de bouton qui appelle la fonction JavaScript mais que se passe-t-il si cela fonctionne ou non? Je veux essentiellement (à ce stade) m'assurer que les mots de passe sont les mêmes et si ce n'est pas le cas, ne passez pas à insert.php mais s'ils correspondent, passez les données du formulaire à insert.php

javascripthtmlformslogin
10
ajk4550

Ajoutez simplement onsubmit gestionnaire d'événements pour votre formulaire:

<form  action="insert.php" onsubmit="return myFunction()" method="post">

Supprimez onclick de button et faites-le input avec le type submit

<input type="submit" value="Submit">

Et ajoutez des instructions de retour booléennes à votre fonction:

function myFunction() {
    var pass1 = document.getElementById("pass1").value;
    var pass2 = document.getElementById("pass2").value;
    var ok = true;
    if (pass1 != pass2) {
        //alert("Passwords Do not match");
        document.getElementById("pass1").style.borderColor = "#E34234";
        document.getElementById("pass2").style.borderColor = "#E34234";
        ok = false;
    }
    else {
        alert("Passwords Match!!!");
    }
    return ok;
}
27
antyrat
 if ($("#Password").val() != $("#ConfirmPassword").val()) {
          alert("Passwords do not match.");
      }

Une approche JQuery qui éliminera le code inutile.

3
cyclical

ajoutez ceci à votre formulaire:

<form  id="regform" action="insert.php" method="post">

ajoutez ceci à votre fonction:

<script>
    function myFunction() {
        var pass1 = document.getElementById("pass1").value;
        var pass2 = document.getElementById("pass2").value;
        if (pass1 != pass2) {
            //alert("Passwords Do not match");
            document.getElementById("pass1").style.borderColor = "#E34234";
            document.getElementById("pass2").style.borderColor = "#E34234";
        }
        else {
            alert("Passwords Match!!!");
            document.getElementById("regForm").submit();
        }
    }
</script>
2
Axel Amthor