Xác thực biểu mẫu Javascript với mật khẩu xác nhận

Question

Tôi đang cố viết một trang đăng ký và tôi đang gặp khó khăn nhất.

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

Đây là mã của tôi trên trang đăng ký. Làm thế nào để gọi hàm JavaScript của tôi và nó vẫn đăng và thực hiện hành động? Tôi làm điều này như là một module đơn giản đó là riêng biệt nhưng tôi sẽ muốn kết hợp chúng

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

Tôi không cần sự giúp đỡ sáp nhập họ, tôi biết tôi sẽ phải chuyển một số những thứ xung quanh, nhưng nếu họ ở bên nhau, làm thế nào cách nào để gọi hàm JavaScript?

Điều này sẽ được thực hiện gọn gàng hơn sau khi tôi biết phải làm gì, Vì vậy, cách tốt nhất để gọi hàm JavaScript của tôi là gì và nếu nó thành công, hãy đăng và hành động một phần của biểu mẫu. Tôi có thể bỏ qua nút gửi và chỉ cần thực hiện một loại nút gọi hàm JavaScript nhưng điều gì sẽ xảy ra nếu nó hoạt động hay không? Về cơ bản tôi (tại thời điểm này) muốn đảm bảo mật khẩu giống nhau và nếu không, đừng chuyển sang tệp insert.php nhưng nếu chúng khớp nhau, hãy chuyển dữ liệu biểu mẫu đến insert.php

Answer 1

chỉ cần thêm xử lý sự kiện cho onsubmit hình của bạn:

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

Di onclick từ button và làm cho nó input với loại submit

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

và thêm báo cáo lợi nhuận boolean để functio của bạn 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

thêm video này vào hình thức của bạn:

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

thêm video này vào chức năng của bạn:

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

Một cách tiếp cận JQuery rằng sẽ loại bỏ đang không cần thiết.