Возврат false, не прекращающий подачу формы

Моя цель: если поле поля пользователя и пароля пустые, я хочу остановить отправку формы. Это мой код, который я пытаюсь:

<!DOCTYPE html>
<html>
<head>
    <script>
        function doit() {

            var usr = document.getElementById('ur').value;
            var psw = document.getElementById('pw').value;

            if ((usr.trim() == '') && (psw.trim() == '')) {
                alert("cannot Submit form");
                return false;
            }

        }
    </script>

</head>


<body>

    <form action="post.php" method="post" onsubmit="doit()">
        User:
        <input type="text" id="ur" name="user">
        <br>
        <br> Pass:
        <input type="password" id="pw" name="pass">
        <br>
        <br>
        <button>Submit</button>
    </form>


</body>
</html>

Я изучаю JavaScript. Будет полезно, если вы исправите код с небольшим объяснением, почему он не работает.

Ответ 1

return false работает нормально, так как вы вызываете, что функция неверна.

<form action="post.php" method="post" onsubmit="doit()">

Просто вызывает его, ничего не делает с возвращаемым значением

<form action="post.php" method="post" onsubmit="return doit()"> 
                                                ^

Остановит сообщение формы на ложном возвращенном значении.

Прочитайте это примечание MSDN, хотя оно не является специфичным для IE

Вы можете переопределить это событие, вернув false в обработчик события. Используйте эту возможность для проверки данных на стороне клиента, чтобы предотвратить передачу недопустимых данных на сервер. Если обработчик события вызывается атрибутом onsubmit объекта формы, код должен явно запрашивать возвращаемое значение с помощью функции возврата, а обработчик события должен предоставлять явное возвращаемое значение для каждого возможного пути кода в обработчике события функция.

Теперь на другую важную точку.

Ваше условие if прекратит отправку формы только в том случае, если оба поля пусты, тогда как это должно быть сделано, даже если какое-либо из этих двух полей пустое. Это && (AND) должно быть || (OR), а в конце ваших функций, если ничего не возвращается false, return true then.

Ответ 2

onsubmit событие принимает логические значения, поскольку вы ничего не возвращаете, поэтому по умолчанию оно принимает true. Вам нужно добавить возврат в это событие.

изменить

onsubmit="doit()">

к

onsubmit="return doit()">

Ответ 3

Использование addEventListener при отправке с protectDefault()

document.form1.addEventListener( "submit", function(event) {

    var user = this.querySelector("input[name=user]").value; // this = object of form1
    var pass = this.querySelector("input[name=pass]").value;

    if ( (user.trim() == "") || (pass.trim() == "") ) {
        alert("cannot Submit form");
        event.preventDefault();
    } else {
        alert("submit");
    }

} );

<form action="" method="post" name="form1" >
    Username: <input type="text" name="user" /><br><br>
    Password: <input type="password" name="pass" /><br><hr>
    <input type="submit" value="Submit" />
</form>