Skip to main content
adicionou 334 caracteres ao conteúdo
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

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 preventDefaultpreventDefault 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.

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 para evitar que o formulário seja submetido.

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

adicionou 83 caracteres ao conteúdo
Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

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 para evitar que o formulário seja submetido.

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. Se retornar false, não.


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 para evitar que o formulário seja submetido.

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 para evitar que o formulário seja submetido.

Fonte Link
hkotsubo
  • 66,9mil
  • 25
  • 87
  • 170

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. Se retornar false, não.


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 para evitar que o formulário seja submetido.