проверка формы html не работает

#html #validation

#HTML #проверка

Вопрос:

Я работал над формой html, в которой я должен вводить информацию о пользователе и отправлять. Он перейдет на страницу подключения к php. Проблема в том, что я пытался проверить данные перед отправкой через JavaScript, и этого не происходит.

Ниже я публикую код формы HTML.

     <!DOCTYPE html>
<html>
<head>
<script language = "JavaScript">
        function validate()
        {
            var username = document.getElementById("userName").value;
            var password = document.getElementById("Password").value;
            var repassword = document.getElementById("RePassword").value;

            if (username.length < 0) {
                alert("Please enter the username.");
                return false;
            }
            if (password == null || password == "") {
                alert("Please enter the password.");
                return false;
            }
             if (repassword == null || repassword == "" || repassword != password) {
                alert("Please enter the password.");
                return false;
            }


        } 
</script>

</head>
<body>
<form name="frmMr" action="send_post.php" method="post"  onsubmit="return(validate());">
    User Name:<br> <input type="text" name="userName"><br>
    Enter Password:<br> <input type="text" name="Password"><br>
    Reenter Password:<br> <input type="text" name="RePassword"><br>
    <input type="submit" >
</form>
<p id="error_para" ></p>
</body>
</html>

Ответ №1:

В вашем HTML не было id тега, тогда как в Javascript вы используете getElementById('')

 <!DOCTYPE html>
<html>
<head>
// Changed the script syntax
<script type="text/javascript">
    function validate() {
        var username = document.getElementById("userName").value;
        var password = document.getElementById("Password").value;
        var repassword = document.getElementById("RePassword").value;

        if (username.length <= 0) {
            alert("Please enter the username.");
            return false;
        }
        if (password == null || password == "") {
            alert("Please enter the password.");
            return false;
        }
         if (repassword == null || repassword == "" || repassword != password) {
            // Changed Password message for testing
            alert("Confirm Password empty or do not match.");
            return false;
        }
    } 
</script>
</head>
<body>
    <form name="frmMr" action="send_post.php" method="post"  onsubmit="return(validate());">
        User Name:<br> <input type="text" id="userName" name="userName"><br>
        Enter Password:<br> <input type="text" id="Password" name="Password"><br>
        Reenter Password:<br> <input type="text" id="RePassword" name="RePassword"><br>
       <!-- Added id="" attribute to above 3 lines -->
       <input type="submit" >
   </form>
   <p id="error_para" ></p>
</body>
</html>

Ответ №2:

Вы забыли добавить идентификаторы ко всем полям

  <input type="text" name="userName" id="userName">

и так…

Ответ №3:

Я бы также предложил использовать required атрибут для ввода в HTML5.

 <input type="text" id="userName" name="userName" required>

Поле помечается как обязательное (как указано в названии), и форма не будет отправлена, если в ней нет значения.

1. Спасибо. Требуется полезно, но в случае совпадения пароля вы не сможете его использовать. Поэтому выбрали обычную проверку.

2. Ну, подумайте об этом так, вам все равно нужно, чтобы поля пароля и повторного пароля были обязательными, поэтому используйте для этого функциональность html5. Для их сопоставления вы можете использовать javascript. В веб-разработке всегда полезно реализовать как можно больше уровней безопасности. В данном случае 3, на стороне клиента в html и javascript, и один на стороне сервера, на всякий случай, если кто-нибудь найдет способ обойти это.

3. Спасибо. Я их тоже добавил.

Ответ №4:

наконец, return true; в конце вашей функции