Validación de formulario jQuery - 'enviar ()' Problema
-
19-09-2019 - |
Pregunta
Estoy tratando de aprender a validar un formulario y tengo este problema:
Cuando ejecuto este código y no ingreso nada, el formulario no debe enviar, pero lo hace. Mi pregunta es ... ¿por qué y cómo puedo solucionarlo?
el 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>
La 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;
}
});
Si conoce alguna otra mejoría que el código podría tomar, puede decirme también, gracias ... :-)
Solución
Su código actual no funciona porque ErrorCount es local para la función anónima pasada a cada método. No será visible afuera.
Esto significa cuando lo haces errorCount > 0
Después de cada método, se evalúa en falso y envía el formulario.
Lo escribiría tu función de esta manera,
$('#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 qué su código no funciona?
Demos un nombre a la función anónima (digamos myeachloop) pasó al 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;
}
});
¿Ves ahora el error en tu código?
También debe comprender los cierres de JavaScript para saber por qué mi código está funcionando.
Otros consejos
Cambia esto:
$('#obal form').submit(function() {
a esto:
$('#obal form').submit(function(event) {
event.preventDefault();
Y si su formulario es válido, haga esto (dentro de su función .submit):
$(this).submit();
y su formulario será enviado.
Es posible que desee probar esta jQuery enchufar. Es extremadamente flexible y fácil de usar.
Declararía el recuento de errores antes del bucle para asegurarme de que el alcance sea correcto:
var errorCount = 0;
$('.required').each(function() {
if($(this).val() == "") {
errorCount++;
}
});