O evento de submit
é referente ao formulário (form
), não ao input
, conforme consta na documentação:
Note that the submit event fires on the
<form>
element itself, and not on any<button>
or<input type="submit">
inside it. (Forms are submitted, not buttons.)
Sendo assim, você deve colocar o onsubmit
no form
, não no input
:
function validate(form) {
if (form.f_name.value !== "") return true;
alert('fail');
return false;
};
<form action="arquivo.php" method="POST" onsubmit="return validate(this)">
<input type="text" id="f_name" name="f_name" placeholder="Nome">
<input type="submit" value="Register" name="register" class="aa-browse-btn">
</form>
Repare também que não precisa de duas funções para validar, uma é o suficiente: se o valor não for vazio, retorna true
, senão, exibe o alerta e retorna false
(e esse trecho não precisa necessariamente estar em um bloco else
, pois se entrar no if
o return
já sai da função).
Enfim, se o validate
retornar true
, o formulário é submetido e enviado para arquivo.php
, que é o que eu coloquei no action
. Se retornar false
, ele não é submetido.
Outra forma de obter o mesmo comportamento é usando addEventListener
. O código fica ligeiramente diferente, mas a ideia é a mesma, só submeter o formulário se o campo estiver preenchido:
function validate(event) {
if (event.target.f_name.value === "") {
alert('fail');
event.preventDefault();
}
};
document.querySelector('#formulario').addEventListener('submit', validate);
<form id="formulario" action="arquivo.php" method="POST">
<input type="text" id="f_name" name="f_name" placeholder="Nome">
<input type="submit" value="Register" name="register" class="aa-browse-btn">
</form>
A diferença é que agora eu uso addEventListener
para registrar o evento de submit
, e preventDefault
preventDefault
para evitar que o formulário seja submetido.
Outra diferença é que a função validate
agora recebe um Event
, e o formulário é obtido acessando o target
desse Event
.