Potwierdzenie formularza JavaScript z hasłem potwierdzającym

Question

Próbuję napisać stronę rejestracji i mam najtrudniejszy czas.

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

To jest mój kod na stronie rejestracji. Jak mogę połączyć się z moją funkcją JavaScript i czy nadal ją publikuję i wykonuję akcję? Zrobiłem to za pomocą prostego modułu, który jest odrębny, ale chciałbym je połączyć

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

Nie potrzebuję pomocy ich łączenie, wiem, że muszę przełączyć kilka rzeczy wokół, ale jeśli są one ze sobą, w jaki sposób czy mogę wywołać funkcję JavaScript?

Zostanie to zrobione dokładniej po tym, jak zorientuję się, co należy zrobić, więc jaki byłby najlepszy sposób wywoływania mojej funkcji JavaScript, a jeśli się powiedzie, przejdź do części strony dotyczącej działania i postu. Mogę zrezygnować z przycisku przesyłania i po prostu zrobić przycisk, który wywołuje funkcję JavaScript, ale co się stanie, jeśli zadziała, czy nie? Zasadniczo (w tym momencie) chcę się upewnić, że hasła są takie same, a jeśli nie, nie idź naprzód do pliku insert.php, ale jeśli się zgadzają, przekaż dane formularzy do insert.php

Answer 1

Wystarczy dodać obsługi onsubmit zdarzeń dla swojej postaci:

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

Usuń onclick od button i uczynić go input z rodzaju submit

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

i dodać logicznych wypowiedzi wrócić do swojego funkcjono 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

dodać do formularza:

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

dodać do swojej funkcji:

<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."); 
     } 

podejście JQuery kod, który wyeliminuje niepotrzebne.