Validação do formulário jQuery - 'submmit ()' Problema
-
19-09-2019 - |
Pergunta
Estou tentando aprender a validar um formulário e tenho esse problema:
Quando eu executo esse código e não digito nada - o formulário não deve enviar, mas o faz. Minha pergunta é ... por que e como posso consertar?
o html:
<form method="post" action="#">
<fieldset>
<legend>Formular</legend>
<label for="name">Name: </label>
<input type="text" class="required" name="name" value="" />
<br /><br />
<label for="pass">Password: </label>
<input type="password" class="required" name="pass" value="" />
<br /><br />
<input type="submit" value="Submit!" />
</fieldset>
</form>
o jQuery:
$('#obal form').submit(function() {
$('.required').each(function() {
if($(this).val() == "") {
if (errorCount === undefined) {
var errorCount = 1;
} else {
++errorCount;
}
}
});
if (errorCount > 0) {
window.alert( 'You didnt pass' );
return false;
} else {
return true;
}
});
Se você conhece outras melhorias que o código pode levar, pode me dizer também, obrigado .. :-)
Solução
Seu código atual não está funcionando porque o ErrorCount é local para a função anônima passada para cada método. Não será visível lá fora.
Isso significa quando você faz errorCount > 0
Após o seu método, ele avalia para False e envia o formulário.
Eu escreveria sua função assim,
$('#obal form').submit(
function(ev)
{
var errorCount = 0; //define your errorCount variable to zero before you
//iterate using each, errorCount will be available inside your each iteration function.
$('.required').each(
function()
{
//Due to JavaScript clousures, you can access errorCount in this function.
if($(this).val() === '')
errorCount++;
}
);
//If we don't find any errors, we return. This will let the browser continue submitting the form.
if(errorCount == 0)
return;
//If control comes here, it means there were errors. Prevent form submission and display error message.
ev.preventDefault();
alert('Validation failure.');
}
);
EDITAR:
Por que seu código não funciona?
Vamos dar o nome à função anônima (digamos, myEachloop) passou para o método '.Each'.
$('#obal form').submit(function() {
$('.required').each(
function myEachLoop ()
{
if($(this).val() == "") {
if (errorCount === undefined) {
var errorCount = 1; //you have defined the errorCount which is 'local' to the 'myEachLoop' function. Once myEachLoop function is over. errorCount variable is gone!
} else {
++errorCount;
}
}
});
//errorCount is 'undefined' here because the previously defined errorCount variable is gone.
if (errorCount > 0) {
window.alert( 'You didnt pass' );
return false;
} else {
return true;
}
});
Você agora vê o erro no seu código?
Você também precisa entender o fechamento de JavaScript para saber por que meu código está funcionando.
Outras dicas
Mude isso:
$('#obal form').submit(function() {
para isso:
$('#obal form').submit(function(event) {
event.preventDefault();
E se o seu formulário for válido, faça isso (dentro da sua função .Submit):
$(this).submit();
e seu formulário será enviado.
Você pode querer experimentar este jQuery plugar. É extremamente flexível e fácil de usar.
Eu declararia a contagem de erros antes do loop para garantir que o escopo esteja correto:
var errorCount = 0;
$('.required').each(function() {
if($(this).val() == "") {
errorCount++;
}
});