Валидация данных JavaScript

109

21 июня 2019, 13:40

Практикуюсь в JS, решил попробовать написать валидацию и со старта столкнулся с проблемой. Вот так всё работает, и страница не перезагружается.

<form name="welcome_form" ation="" onsubmit="return on_submit()" method="get">
  Login:<input type="text" name="login"/>
  Password:<input type="text" name="pass"/>
  <input type="submit" value="Go" />
</form>
<script>
  function on_submit() {
    var login = document.forms["welcome_form"]["login"].value;
    if (login == "") {
      alert("Error!");
      return false;
    }
  }
</script>

А вот так -- уже нет. Алерт выскакивает, после чего происходит перезагрузка страницы.

//HTML
<form name="welcome_form" ation="" method="get">
  Login: <input type="text" name="login"/>
  Password: <input type="text" name="pass"/>
  <input type="submit" value="Go" />
</form>
<script src="./script.js"></script>
//JS
document.forms["welcome_form"].addEventListener("submit", on_submit);
function on_submit() {
  var login = document.forms["welcome_form"]["login"].value;
  if (login == "") {
    alert("Error!");
    return false;
  }
}

Всё дело в

"onsubmit="return ..."

Без него страница все равно перезагружается при любой реализации.

Как разделить HTML и JS, и при этом заставить валидацию работать верно?

Answer 1

document.forms["welcome_form"].addEventListener("submit", on_submit); 
function on_submit(e) { 
  var login = document.forms["welcome_form"]["login"].value; 
  if (login == "") { 
    alert("Error!"); 
    e.preventDefault(); 
  } 
}

<form name="welcome_form" action="" method="get"> 
  Login: <input type="text" name="login"/> 
  Password: <input type="text" name="pass"/> 
  <input type="submit" value="Go" /> 
</form>

или

document.forms["welcome_form"].onsubmit = on_submit; 
function on_submit(e) { 
  var login = document.forms["welcome_form"]["login"].value; 
  if (login == "") { 
    alert("Error!"); 
    //e.preventDefault(); - это тоже работает 
    return false; 
  } 
}

<form name="welcome_form" action="" method="get"> 
  Login: <input type="text" name="login"/> 
  Password: <input type="text" name="pass"/> 
  <input type="submit" value="Go" /> 
</form>

Первый способ предпочтительнее, так как позволяет прикреплять больше одного обработчика.