Algum tempo atrás, eu precisava de algo muito semelhante ... e consegui.
Então, o que eu coloco aqui é como eu faço os truques para que um formulário possa ser enviado por JavaScript sem validar e executar validação somente quando o usuário pressiona um botão (normalmente um botão de envio).
Para o exemplo, usarei um formulário mínimo, apenas com dois campos e um botão de envio.
Lembre-se do que se deseja: No JavaScript, ele deve poder ser enviado sem nenhuma verificação. No entanto, se o usuário pressionar esse botão, a validação deverá ser feita e o formulário enviado somente se for aprovado na validação.
Normalmente, tudo começaria com algo próximo a isso (removi todas as coisas extras que não são importantes):
<form method="post" id="theFormID" name="theFormID" action="">
<input type="text" id="Field1" name="Field1" />
<input type="text" id="Field2" name="Field2" />
<input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>
Veja como a tag do formulário não tem onsubmit="..."
(lembre-se de que era uma condição não a ter).
O problema é que o formulário é sempre enviado, independentemente de onclick
devoluções true
ou false
.
Se eu mudar type="submit"
para type="button"
, parece trabalho, mas não o faz. Ele nunca envia o formulário, mas isso pode ser feito facilmente.
Então, finalmente, usei isso:
<form method="post" id="theFormID" name="theFormID" action="">
<input type="text" id="Field1" name="Field1" />
<input type="text" id="Field2" name="Field2" />
<input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>
E function Validator
, onde return True;
está, também adiciono uma sentença de envio de JavaScript, algo semelhante a este:
function Validator(){
// ...bla bla bla... the checks
if( ){
document.getElementById('theFormID').submit();
return(true);
}else{
return(false);
}
}
O id=""
é apenas para JavaScript getElementById
, o name=""
é apenas para que ele apareça nos dados do POST.
De tal maneira, funciona como eu preciso.
Coloquei isso apenas para pessoas que não precisam de onsubmit
função no formulário, mas faço alguma validação quando um botão é pressionado pelo usuário.
Por que não preciso enviar submissões na tag de formulário? Fácil, em outras partes do JavaScript, preciso realizar um envio, mas não quero que haja nenhuma validação.
O motivo: se é o usuário que realiza o envio, desejo e preciso que a validação seja feita, mas se for JavaScript, às vezes, preciso fazer o envio, embora essas validações o evitem.
Pode parecer estranho, mas não quando se pensa, por exemplo: em um Login ... com algumas restrições ... como não permitir o uso de sessões PHP e nem os cookies são permitidos!
Portanto, qualquer link deve ser convertido para o envio desse formulário, para que os dados de login não sejam perdidos. Quando nenhum login ainda é feito, ele também deve funcionar. Portanto, nenhuma validação deve ser realizada nos links. Mas quero apresentar uma mensagem ao usuário se o usuário não tiver inserido os dois campos, user e pass. Portanto, se um estiver faltando, o formulário não deve ser enviado! existe o problema
Veja o problema: o formulário não deve ser enviado quando um campo estiver vazio somente se o usuário tiver pressionado um botão, se for um código JavaScript, ele deverá poder ser enviado.
Se eu fizer o trabalho na onsubmit
tag do formulário, precisarei saber se é o usuário ou outro JavaScript. Como nenhum parâmetro pode ser passado, isso não é possível diretamente, portanto, algumas pessoas adicionam uma variável para dizer se a validação deve ou não ser feita. A primeira coisa na função de validação é verificar o valor da variável, etc ... Muito complicado e o código não diz o que realmente é desejado.
Portanto, a solução é não enviar submissões na tag do formulário. A Insead coloca onde é realmente necessário, no botão.
Por outro lado, por que colocar código de submissão, pois, conceitualmente, não quero a validação de submissão? Eu realmente quero validação de botão.
Não apenas o código é mais claro, é onde deve estar. Lembre-se disso: - Não quero que o JavaScript valide o formulário (que deve sempre ser feito pelo PHP no lado do servidor) - Quero mostrar ao usuário uma mensagem informando que todos os campos não devem estar vazios, que precisa de JavaScript (cliente lado)
Então, por que algumas pessoas (pensam ou me dizem) isso deve ser feito com uma validação no local? Não, conceitualmente não estou realizando uma validação no cliente no lado do cliente. Estou apenas fazendo algo em um botão ser pressionado, então por que não deixar que isso seja implementado?
Bem, esse código e estilo funcionam perfeitamente. Em qualquer JavaScript que eu precise enviar o formulário, basta colocar:
document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there
E isso pula a validação quando eu não preciso. Apenas envia o formulário e carrega uma página diferente, etc.
Mas se o usuário clicar no botão enviar (também conhecido como type="button"
não type="submit"
), a validação será feita antes de permitir que o formulário seja enviado e, se não for válido, não será enviado.
Bem, espero que isso ajude outras pessoas a não tentar códigos longos e complicados. Só não use onsubmit
se não for necessário e use onclick
. Mas lembre-se de mudar type="submit"
para type="button"
e não se esqueça de fazer o submit()
JavaScript.