Soumettre le formulaire après l'appel de l'e.preventDefault()

Je fais une simple validation de formulaire ici et est resté coincé sur une question très fondamentale. J'ai 5 paires de champs pour le nom et l'entrée (pour un dîner d'inscription). L'utilisateur peut entrer 1-5 paires, mais un plat doit être sélectionné si un nom est présent. Code:

http://jsfiddle.net/eecTN/1/

<form>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    <input type="submit" value="Submit">
</form>

//Prevent form submit if any entrees are missing
$('form').submit(function(e){

    e.preventDefault();

    //Cycle through each Attendee Name
    $('[name="atendeename[]"]', this).each(function(index, el){

        //If there is a value
        if ($(el).val()) {

            //Find adjacent entree input
            var entree = $(el).next('input');

            //If entree is empty, don't submit form
            if ( ! entree.val()) {
                alert('Please select an entree');
                entree.focus();
                return false;
            }
        }
    });

    $('form').unbind('submit').submit();

});

Le message d'erreur est le travail, mais c'est de la soumission du formulaire à chaque fois. Je sais qu'il ya quelque chose de mal avec cette ligne:

$('form').unbind('submit').submit();

...mais je ne suis pas sûr de ce que je dois faire.

Pourquoi vous faites unbind pour soumettre votre formulaire ???
J'ai vu ce post, mais les solutions look douteux et l'utilisation setTimeout: stackoverflow.com/questions/14866626/...
Afin de ne pas exécuter la validation de nouveau. S'il vous plaît, aidez moi que dois - je faire?
Mais c' ** doit ** exécuter la validation de tous les temps, n'est-ce pas? Je veux dire, que si l'utilisateur n'a pas à corriger les erreurs et clique sur le bouton de nouveau?
Il n'est pas nécessaire de relancer la validation si la validation est déjà passé. Je n'avais juste pas envie de se retrouver dans une boucle infinie (qui est arrivé pendant que j'écrivais plus tôt). Il n'y a probablement pas de bonnes raisons pour unbind.
La boucle infinie qui s'est passé parce que votre code a été mal, de sorte que, même si la validation a échoué, la forme essayé de présenter, qui a ensuite entraîné la validation et ainsi de suite. Avec mes modifications, ou l'un des autres posté ici, le formulaire doit être soumis seulement si il n'y a pas d'erreurs.
Pourquoi ne pas modifier de sorte que e.preventDefault() n'est appelée que si la validation échoue? Ensuite, vous pouvez supprimer la ligne avec .unbind().submit().
Une bonne solution aussi. Probablement le meilleur.
Je ne savais pas que je pouvais retarder l'appel de e.preventDefault() dans le script. Cela me semble la bonne solution.
Vous cloué, je vais avoir un carnage jour donc, excusez-moi. Merci une tonne, n'hésitez pas à poster réponse pour crédit, voici mon code final: jsfiddle.net/eecTN/6
Ok autre est OK, mais également l'idée ici jsfiddle.net/eecTN/9 je vous remercie pour la patience
il travail lorsqu'elles sont modifiées à Mootols tous les Soirs thaks dans advancved

InformationsquelleAutor Wesley Murch | 2014-03-12

71

La solution la plus simple est juste de pas appel e.preventDefault() à moins que la validation ne parvient pas réellement. Déplacer la ligne à l'intérieur de l'intérieur if déclaration, et de supprimer la dernière ligne de la fonction avec l' .unbind().submit().
- Pour une raison que je croyais que je devais appeler e.preventDefault() avant que quelque chose d'autre ou de risque de certains types de condition de course. Merci pour le siècle des lumières.
- Non, l'ensemble de la fonction complète avant l'action par défaut continue (ou ne pas continuer si vous avez annulée). Si vous saviez que vous n'avez jamais voulu l'action par défaut pour un événement particulier, il serait logique de mettre que la première ligne où il est évident (par exemple, si vous souhaitez envoyer les données via Ajax plutôt qu'avec la soumission d'un formulaire, ou dans un gestionnaire de clic sur un lien qui déclenche JS au lieu de faire de la navigation standard). Sinon, en le plaçant dans la logique conditionnelle est très bien.
- Je suis positive dans le passé avec certains fortement ajax axées sur les sites des conditions de course ont été un problème si la première ligne est toujours e.preventDefault(). Êtes-vous sûr à 100% qu'il est sûr de faire ce qu'on vous suggère?
- Je suis positif qu'il est sécuritaire. Dans un très Ajax basé sur le site des conditions de course peut être un problème si il y a de multiples requêtes Ajax fait avant les réponses de revenir, car il n'y a aucune garantie que les réponses pourront revenir dans un ordre particulier - mais même alors, vous n'avez toujours pas besoin de e.preventDefault() que la première ligne, parce que l'actuel bloc de code synchrone est complet avant toute rappels Ajax sont déclenchées. C'est, JS va pas interrompre le cours d'exécution de la fonction d'appel Ajax de rappel ou un deuxième gestionnaire d'événement ou de l'expiration de rappel ou de quoi que ce soit.
- Ah ok. Je vais doubler vérifier moi-même sur le prochain projet, mais c'est super si ce n'est pas un problème. Merci pour la réponse.
- Si simple!!! merci!!!!
- C'est tout simplement génial!
- le travail est très bien!!! merci man!
InformationsquelleAutor nnnnnn

Utiliser le natif element.submit() pour contourner la preventDefault dans le jQuery gestionnaire, et de constater que votre instruction return renvoie uniquement à partir de la chaque tour de boucle, il n'a pas de retour à partir du gestionnaire d'événement

$('form').submit(function(e){
    e.preventDefault();

    var valid = true;

    $('[name="atendeename[]"]', this).each(function(index, el){

        if ( $(el).val() ) {
            var entree = $(el).next('input');

            if ( ! entree.val()) {
                entree.focus();
                valid = false;
            }
        }
    });

    if (valid) this.submit();

});

ce doit être la accepté de répondre facilement

InformationsquelleAutor adeneo

13

Le problème est que, même si vous voyez l'erreur, votre return false affecte la fonction de rappel de la .each() méthode ... donc, même si il y a une erreur, vous atteignez la ligne
```
$('form').unbind('submit').submit();
```
et le formulaire est soumis.

Vous devez créer une variable, validated, par exemple, et attribuez la valeur true. Ensuite, dans le rappel, au lieu de return false, ensemble validated = false.

Enfin...
```
if (validated) $('form').unbind('submit').submit();
```
De cette façon, si et seulement si il n'y a pas d'erreurs le formulaire.

InformationsquelleAutor Oscar Paz

$('form').submit(function(e){

    var submitAllow = true;

    //Cycle through each Attendee Name
    $('[name="atendeename[]"]', this).each(function(index, el){

        //If there is a value
        if ($(el).val()) {

            //Find adjacent entree input
            var entree = $(el).next('input');

            //If entree is empty, don't submit form
            if ( ! entree.val()) {
                alert('Please select an entree');
                entree.focus();
                submitAllow = false;
                return false;
            }
        }
    });

    return submitAllow;

});

InformationsquelleAutor falinsky

Effectivement cela semble être la façon correcte:

$('form').submit(function(e){

    //prevent default
    e.preventDefault();

    //do something here

    //continue submitting
    e.currentTarget.submit();

});

InformationsquelleAutor Mike Cottier

Désolé pour le retard, mais je vais essayer de faire une forme parfaite 🙂

Je vais ajouté Compter les étapes de validation et de vérifier à chaque fois de ne pas .val(). Vérifier .length, parce que je pense est le meilleur modèle dans votre cas. Bien sûr supprimer unbind fonction.

Mon jsFiddle

De cours de code source:

//Prevent form submit if any entrees are missing
$('form').submit(function(e){

    e.preventDefault();

    var formIsValid = true;

    //Count validation steps
    var validationLoop = 0;

    //Cycle through each Attendee Name
    $('[name="atendeename[]"]', this).each(function(index, el){

        //If there is a value
        if ($(el).val().length > 0) {
            validationLoop++;

            //Find adjacent entree input
            var entree = $(el).next('input');

            var entreeValue = entree.val();

            //If entree is empty, don't submit form
            if (entreeValue.length === 0) {
                alert('Please select an entree');
                entree.focus();
                formIsValid = false;
                return false;
            }

        }

    });

    if (formIsValid && validationLoop > 0) {
        alert("Correct Form");
        return true;
    } else {
        return false;
    }

});

InformationsquelleAutor d.danailov

Pourquoi ne pas lier le bouton soumettre événement que le formulaire lui-même?
il serait vraiment beaucoup plus facile et plus sûr si vous liez les boutons de la forme elle-même comme la forme principalement de présenter moins d'utiliser des preventDefault()

JS:

$("#btn-submit").on("click", function (e) {
    var submitAllow = true;
    $('[name="atendeename[]"]', this).each(function(index, el){
        //If there is a value
        if ($(el).val()) {
            //Find adjacent entree input
            var entree = $(el).next('input');

            //If entree is empty, don't submit form
            if ( ! entree.val()) {
                alert('Please select an entree');
                entree.focus();
                submitAllow = false;
                return false;
            }
        }
    });
    if (submitAllow) {
        $("#form-attendee").submit();
    }
});

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form-attendee">
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    Name: <input name="atendeename[]">
    Entree: <input name="entree[]"><br>
    <button type="button" id="btn-submit">Submit<button>
</form>

InformationsquelleAutor Norvert John Abella

Vous devez vous connecter pour publier un commentaire.