Почему моя HTML-форма все еще отправляется, когда я возвращаю false из onsubmit?

Question

Я написал простой скрипт для проверки формы входа в систему следующим образом:

<script type="text/javascript">
    function validateLoginForm(){
    var idV = document.forms["LoginForm"]["id"].value;
    var pwdV = document.forms["LoginForm"]["pwd"].value;

    if (idV == null || idV == "" || idV.length < 5) {
          alert("user ID must be filled and of more than 4 characters!!");
          id.focus();
          return false;
    }

    if (pwdV == null || pwdV == "" || pwdV.length < 5) {
        alert("Password must be filled and of more than 4 characters!!");
        pwd.focus();
        return false;
    }

    return true;
}
</script>

и назвал его так:

<form name="LoginForm" method="POST" onsubmit="return validateLoginForm()" action="Login" >
.
.
.
.
</form>

Проблема в том, что javaScript выдает предупреждение, как я установилправильно, но в итоге сервлет Login также вызывается автоматически, что неправильно .. Почему это происходит?Любое решение?

Answer 1

Перенаправление на страницу входа происходит из-за ошибки js.

Вы не определяете переменную id и psw.

Так что, когда вы пытаетесь id.focus() или psw.focus() - у вас ошибка js и выдается значение true по умолчанию

Добавьте этот код:

var id = document.forms["LoginForm"]["id"];
var pwd = document.forms["LoginForm"]["pwd"];
var idV = document.forms["LoginForm"]["id"].value;
var pwdV = document.forms["LoginForm"]["pwd"].value;

Answer 2

Попробуйте это,

<script type="text/javascript">
    function validateLoginForm(){
    var idV = document.forms["LoginForm"]["id"].value;
    var pwdV = document.forms["LoginForm"]["pwd"].value;
    var err = '';
    if (idV == null || idV == "" || idV.length < 5) {
          err = "user ID must be filled and of more than 4 characters!! \n";
          document.getElementById("id").focus()
    }

    if (pwdV == null || pwdV == "" || pwdV.length < 5) {
        err  = "Password must be filled and of more than 4 characters!! \n";
         document.getElementById("pwd").focus()
    }
    if(err == '')
        return true;
    else
      {
        alert(err);
        return false;
      }
}
</script>

Answer 3

Ну, как ни странно, моя форма все еще была отправлена, даже когда я возвратил false из моего function и вернул возврат этой функции к onsubmit формы ... Я даже попытался:

onsubmit="return false;"

Не уверен, что происходит ... в любом случае перемещение триггера события на onclick кнопку submit решило проблему.

Обновление : Закончилось обнаружение, что к коду, который я редактировал, был присоединен другой обработчик JS к событию onsubmit, поэтому он игнорировал мой return false;

Answer 4

Рекомендация: если вы хотите гарантировать, что форма не будет отправлена, даже если ваш Javascript выдает исключение en, ​​вам следует заключить код в блоки try / catch:

<script type="text/javascript">


function validateLoginForm(){
  try{
    var idV = document.forms["LoginForm"]["id"].value;
    var pwdV = document.forms["LoginForm"]["pwd"].value;

    if (idV == null || idV == "" || idV.length < 5) {
      alert("user ID must be filled and of more than 4 characters!!");
      id.focus();
      return false;
    }

    if (pwdV == null || pwdV == "" || pwdV.length < 5) {
      alert("Password must be filled and of more than 4 characters!!");
      pwd.focus();
      return false;
    }
 }catch(e){
   console.log(e);
   return false;
 }

return true;
}
</script>

Answer 5

Я создал минимальный тестовый пример: http://www.pauldwaite.co.uk/test-pages/7723381/

<script>
function pretendValidation(){
    alert("Validatation failed!");
    return false;
}
</script>

<form action="http://www.google.co.uk/" method="POST" onsubmit="return pretendValidation();">
    <input type="submit" value="Submit">
</form>

Когда я нажимаю «Отправить», появляется предупреждение, и форма не отправляется. Так что по идее ваш код должен работать.

Как уже упоминалось @ Shawty , у вас может быть проблема с HTML-формой Если вы также разместите весь HTML-код, мы можем это проверить.

Answer 6

Без того, чтобы вы указали все содержание вашей формы, я не могу быть уверен, но я собираюсь сделать хорошее предположение здесь. Я хочу сказать, что ваши теги для полей идентификатора пользователя и пароля имеют только атрибуты имени?

Когда вы имеете дело с формами в HTML, вы должны использовать name = для имен параметров, которые будут переданы в принимающий скрипт. Это то, что дает вашему сценарию бит? Id = blah & pwd = blah в URL или как полезную нагрузку после публикации.

Однако ....

Когда вы обращаетесь к значениям, используя DOM (объектную модель документа), как в вашем скрипте, вам нужно идентифицировать элемент с атрибутом 'id ='.

То же самое относится к любому элементу в любом месте вашего документа, к которому вам нужно получить доступ, используя сценарий в js.

Если вы также заметите, вы получите предупреждение, но если вы не вернете false, ваш фокус-вызов также никогда не будет вызван, именно это заставит ваш скрипт прерваться, так как элемент с именем 'id' не может быть найден .

добавьте id = "id" и id = "pwd" рядом с вашими атрибутами name = "id" и name = "pwd" во входных тегах, и вы должны обнаружить, что все будет работать так, как ожидается. EG:

    <input type="text" name="id" id="id" ... />

И последнее замечание: я бы рекомендовал вам переписать эту функцию, используя что-то вроде jQuery, вы найдете модель гораздо более интуитивной и кроссплатформенной.