JQUERY FORM Validation - 'Soumider ()' Problème
-
19-09-2019 - |
Question
J'essaie d'apprendre à valider un formulaire et j'ai ce problème:
Lorsque j'exécute ce code et que je n'entre rien - le formulaire ne doit pas envoyer, mais c'est le cas. Ma question est ... pourquoi et comment puis-je le réparer?
Le 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 vous connaissez d'autres améliorations que le code pourrait apporter, vous pouvez me dire aussi, merci .. :-)
La solution
Votre code actuel ne fonctionne pas car ErrorCount est local à la fonction anonyme transmise à chaque méthode. Il ne sera pas visible à l'extérieur.
Cela signifie quand tu fais errorCount > 0
Après votre méthode, il évalue False et soumet le formulaire.
Je l'écrirai votre fonction comme celle-ci,
$('#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.');
}
);
ÉDITER:
Pourquoi votre code ne fonctionne pas?
Donnons le nom à la fonction anonyme (disons MyEachloop) transmise à la méthode «.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;
}
});
Voyez-vous maintenant l'erreur dans votre code?
Vous devez également comprendre les fermetures JavaScript pour savoir pourquoi mon code fonctionne.
Autres conseils
Change ça:
$('#obal form').submit(function() {
pour ça:
$('#obal form').submit(function(event) {
event.preventDefault();
Et si votre formulaire est valide, faites-le (dans votre fonction .Submitte):
$(this).submit();
et votre formulaire sera soumis.
Vous voudrez peut-être essayer cette jQuery brancher. Il est extrêmement flexible et facile à utiliser.
Je déclarerais le nombre d'erreurs avant la boucle pour s'assurer que la portée est correcte:
var errorCount = 0;
$('.required').each(function() {
if($(this).val() == "") {
errorCount++;
}
});