0

No formulário abaixo, executei testes com os campos em branco, mas a função validate não parece ser chamada.

Além disso, o programa PHP (if(isset($_POST['register']))) só irá rodar se o evento onsubmit (que chama a função JavaScript) retornar true? De qualquer maneira o script não deveria retornar um alerta (independente de o programa rodar ou não)?

function validate(form) {
    fail  = validateForename(form.f_name.value);
    if (fail == "") { return true; }
    else { alert('fail'); return false; }
};
 
function validateForename(field)
{
    if (field == "") { return "No Forename was entered.\n"; }
    else {
    return ""; }
};
<body>
<form action="" method="post">
<input type="text" id="f_name" name="f_name" placeholder="Nome"> 
<input type="submit" value="Register" name="register" onsubmit="return validate(this)" class="aa-browse-btn">
</form>
</body>

<?php
if(isset($_POST['register'])){
        $c_fname = $_POST['f_name'];
        $insert_c = "insert into customers (customer_fname) 
                    values ('$c_fname'')";
?>
2
  • onsubmit é um atributo do form não do input submit. Já que aparentemente você tem um script php também, crie um <form></form> e coloque o seu submit como um atributo dele. Além disso, tem outros erros menores que você vai precisar corrigir.
    – user142154
    Commented 2/03/2020 às 15:47
  • obrigado por responder. Nao está claro, eh a nivel experimental.
    – zanoth
    Commented 2/03/2020 às 15:58

1 Resposta 1

2

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.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .