Javascript Formular Validierung mit Passwort bestätigt

Question

Ich versuche, eine Registrierungsseite zu schreiben, und ich habe die härteste Zeit.

<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> 

Dies ist mein Code auf der Registrierungsseite. Wie rufe ich meine JavaScript-Funktion auf und lasse sie trotzdem posten und die Aktion ausführen? Ich habe dies als ein einfaches Modul, das getrennt ist, aber ich würde sie

<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> 

Ich brauche keine Hilfe verschmelzen sie fusionieren will, ich weiß, ich würde ein paar Dinge um wechseln müssen, aber wenn sie zusammen sind, wie kann ich die JavaScript-Funktion aufrufen?

Dies wird sauberer gemacht werden, nachdem ich herausfinden, was zu tun ist, also was wäre der beste Weg, um meine JavaScript-Funktion aufzurufen und wenn es erfolgreich ist, weiter zu Posten und Aktion Teil des Formulars. Ich könnte die Submit-Schaltfläche ablegen und nur einen Button-Typ ausführen, der die JavaScript-Funktion aufruft, aber was passiert, wenn es funktioniert oder nicht? Ich möchte im Wesentlichen (an dieser Stelle) sicherstellen, dass die Passwörter identisch sind und wenn nicht, nicht weiter auf die insert.php, aber wenn sie übereinstimmen, übergeben Sie die Formulardaten zu insert.php

Answer 1

fügen sie einfach onsubmit Ereignishandler für Ihre Form:

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

entfernen onclick von button und machen es input mit Typ submit

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

und fügen boolean return-Anweisungen zu Ihrem functio n:

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; 
} 

Answer 2

fügen Sie diese zu Ihrer Form:

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

fügen Sie diese an Ihre Funktion:

<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> 

Answer 3

if ($("#Password").val() != $("#ConfirmPassword").val()) { 
      alert("Passwords do not match."); 
     } 

Ein JQuery Ansatz, der unnötige Code beseitigt.