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

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

<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 сервлет также вызывается автоматически, что является неправильным..Почему это происходит? Есть решение?

7
forms html javascript

6 ответов

перенаправление на вход происходит, потому что у вас есть ошибка 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;
4

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

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

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

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

однако....

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

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

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

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

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

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

1

Я создал минимальный тестовый случай здесь: 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>

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

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

1

Лучшая практика: если вы хотите гарантировать, что не отправите форму, даже если ваш 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>
1

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

onsubmit="return false;"

не уверен, что происходит... в любом случае перемещение триггера события в вот!--5--> событие исправило проблему.

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

0