Проверка формы Javascript с подтверждением пароля

Я пытаюсь написать страницу регистрации, и у меня самое сложное время.

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

Это мой код на странице регистрации. Как я могу вызвать функцию JavaScript и оставить сообщение и выполнить действие? Я сделал это как простой модуль, который является отдельным, но я хотел бы объединить их

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

Мне не нужна помощь в их слиянии, я знаю, что мне придется переключать некоторые вещи, но если они вместе, как мне вызвать функцию JavaScript?

Это будет сделано более аккуратно после того, как я выясню, что делать. Так что будет лучшим способом вызвать мою функцию JavaScript и, если она будет успешной, перейдите к сообщению и части действия формы. Я мог бы отбросить кнопку отправки и просто сделать тип кнопки, который вызывает функцию JavaScript, но что произойдет, если он работает или нет? Я по существу (на данном этапе) хочу, чтобы пароли были одинаковыми, а если нет, не двигайтесь вперед к insert.php, но если они совпадают, передайте данные формы вместе с insert.php

Ответ 1

Просто добавьте обработчик событий onsubmit для вашей формы:

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

Удалите onclick из button и сделайте его input с типом submit

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

И добавьте логические операторы return в вашу функцию:

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

Ответ 2

добавьте это в вашу форму:

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

добавьте это в свою функцию:

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

Ответ 3

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

Подход JQuery, который устранит ненужный код.