Bootstrap avec le plugin de validation jQuery


154

J'essaie d'ajouter une validation à mon formulaire avec le plugin de validation jQuery, mais j'ai un problème où le plugin place les messages d'erreur lorsque j'utilise des groupes d'entrée.

le problème

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

Mon code: http://jsfiddle.net/hTPY7/4/


J'ai hérité d'une application avec Bootstrap 3, j'ai ri en disant que j'avais trouvé cela et que je l'avais mis en signet il y a des années lorsque j'ai hérité d'une application avec Bootstrap 3 pour la dernière fois
Adrian J. Moreno

Réponses:


347

pour une compatibilité totale avec twitter bootstrap 3, je dois remplacer certaines méthodes de plugins:

// override jquery validate plugin defaults
$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

Voir l'exemple: http://jsfiddle.net/mapb_1990/hTPY7/7/


1
Fonctionne très bien, je voulais juste mentionner d'ajouter $ (élément) .removeClass (errorClass); pour désactiver la mise en évidence et $ (element) .addClass (errorClass); pour mettre en évidence si vous voulez réussir à ne pas utiliser la classe de bloc d'aide bootstrap
Jay Rizzi

3
Cela fonctionne bien, sauf pour une chose: tester avec jQuery Validate 1.11.1 et faire appel resetForm()au validateur d'un formulaire n'appellera unhighlightpas les éléments invalides, ce qui oblige à supprimer la has-errorclasse à la main lors de la réinitialisation d'un formulaire. Ce que je fais est d'appeler la fonction suivante au lieu d'appeler resetForm()directement le validateur :function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); }
Adrian Lopez

Je ne sais pas pourquoi le code ne fonctionne pas sur mon formulaire :(
Alyssa Reyes

Par golly ça marche comme un charme! Merci beaucoup !!! Vous m'avez économisé potentiellement une heure ou deux de recherche.
racl101

1
Si vous avez des boutons radio comme le suggère Bootstrap (entrées radio placées à l'intérieur des étiquettes d'étiquettes), vous voudrez ajouter quelque chose comme ça à cela si le bloc:else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); }
Elliot Cameron

86

Pour une compatibilité totale avec Bootstrap 3, j'ai ajouté la prise en charge du groupe d' entrée , de la radio et de la case à cocher , qui manquait dans les autres solutions.

Mise à jour 20/10/2017 : Suggestions inspectées des autres réponses et prise en charge supplémentaire du balisage spécial de la radio en ligne , meilleur placement des erreurs pour un groupe de radios ou de cases à cocher et prise en charge d'une classe .novalidation personnalisée pour empêcher la validation des contrôles. J'espère que cela aide et merci pour les suggestions.

Après avoir inclus le plugin de validation, ajoutez l'appel suivant:

$.validator.setDefaults({
    errorElement: "span",
    errorClass: "help-block",
    highlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        // Only validation controls
        if (!$(element).hasClass('novalidation')) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    },
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        }
        else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        }
        else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent());
        }
        else {
            error.insertAfter(element);
        }
    }
});

Cela fonctionne pour toutes les classes de formulaire Bootstrap 3. Si vous utilisez un formulaire horizontal, vous devez utiliser le balisage suivant. Cela garantit que le texte du bloc d'aide respecte les états de validation ("has-error", ...) du groupe de formulaires .

<div class="form-group">
    <div class="col-lg-12">
        <div class="checkbox">
            <label id="LabelConfirm" for="CheckBoxConfirm">
                <input type="checkbox" name="CheckBoxConfirm" id="CheckBoxConfirm" required="required" />
                I have read all the information 
            </label>
        </div>
    </div>
</div>

1
J'ai peaufiné errorClass: "help-block error-help-block". J'utilisais déjà .help-block pour les informations d'aide régulières, et cela l'écrasait avec des messages de validation de formulaire. L'ajout d'une deuxième classe l'a rendu unique et donc maintenant il ajoute plutôt qu'il n'écrase mon "vrai" message d'aide.
Scott Stafford

Méthode Hilight non appelée
Vlado Pandžić

Bonjour Vlado, pourriez-vous nous expliquer pourquoi cela ne fonctionne pas pour vous?
Andreas Krohn

Pour un groupe de boutons radio, cela ajoutera le message d'erreur sous la première option qui semble bizarre. Vous voudrez probablement modifier cela pour traiter les boutons radio différemment.
Elliot Cameron

Merci beaucoup Mister @AndreasKrohn ^ _ ^
Jeancarlo Fontalvo

23

J'utilise des formulaires conçus uniquement avec Twitter Bootstrap 3. Je définis des fonctions par défaut pour validor et n'exécute que la méthode de validation avec des règles. J'utilise des icônes de FontAweSome, mais vous pouvez utiliser Glyphicons comme dans l'exemple doc.

entrez la description de l'image ici

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('i.fa').remove();
            $(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
        }
    }
});

Terminé. Après avoir exécuté la fonction de validation:

$("#default-register-user").validate({
    rules: {
        'login': {
            required: true,
            minlength: 5,
            maxlength: 20
        },
        'email': {
            required: true,
            email: true,
            minlength: 5,
            maxlength: 100
        },
        'password': {
            required: true,
            minlength: 6,
            maxlength: 25
        },
        'confirmpassword': {
            required: true,
            minlength: 5,
            maxlength: 25,
            equalTo: "#password"
        }
    }
});

Exemple JSFiddle


1
Ce serait génial d'avoir un JSFiddle pour cela
kofifus

Pourriez-vous publier le code HTML que vous avez utilisé pour la capture d'écran, s'il vous plaît? L'exemple de violon n'a pas le message d'erreur de style rouge ni les icônes. Merci!
Christopher Francisco

Christopher Francisco, j'ai mis à jour l'exemple JSFiddle et ajouté une police impressionnante css.
DARK_DIESEL

Salut excellente solution! Comment modifieriez-vous cela pour que seuls les champs contenant des règles affichent des messages de réussite ou d'échec? À droite, votre code fait que tous les champs affichent le css, qu'il y ait des règles ou non
Michael Smith

La solution est d'ajouter: 'ignore: ".ignore,: hidden"' juste au-dessus des règles. Ensuite, ajoutez simplement une classe 'ignorer' à tous les champs que vous ne voulez pas valider
Michael Smith

10

En ajoutant à la réponse de Miguel Borges ci-dessus, vous pouvez donner à l'utilisateur ce retour de réussite vert en ajoutant la ligne suivante dans le bloc de code de mise en surbrillance / désactivation.

    highlight: function(element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
    }

8

c'est la solution dont vous avez besoin, vous pouvez utiliser la errorPlacementméthode pour remplacer où placer le message d'erreur

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    errorPlacement: function(error, element) {
        error.insertAfter('.form-group'); //So i putted it after the .form-group so it will not include to your append/prepend group.
    }, 
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    }
});

ça marche pour moi comme par magie. À votre santé


error.insertAfter('.form-group');mettre des erreurs dans tous les .form-group. mais cela m'a montré l'idée. merci
Miguel Borges

5

pour bootstrap 4 ce travail avec moi bien

    $.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").addClass('is-invalid');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').find(".form-control:first").removeClass('is-invalid');
        $(element).closest('.form-group').find(".form-control:first").addClass('is-valid');

    },
    errorElement: 'span',
    errorClass: 'invalid-feedback',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

j'espère que cela aidera!


Cela fonctionne très bien hors de la boîte! La seule chose que j'ai ajoutée étaitvalidClass: 'valid-feedback'
Simon Zyx

Merci, cela a fonctionné pour moi pour Bootstrap 4 avec validClass: 'valid-feedback'.
Zaki Mohammed le

4

Voici ce que j'utilise lors de l'ajout de la validation au formulaire:

// Adding validation to form.
        $(form).validate({
            rules: {
                title: {
                    required: true,
                    minlength: 3,
                },
                server: {
                    ipAddress: true,
                    required: true
                }   
            },
            highlight: function(element) {
                $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            },
            success: function(element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            errorClass: 'help-block'
        });

Cela a fonctionné pour moi pour le style Bootstrap 3 lors de l'utilisation de la bibliothèque de validation jquery.


3

J'ai utilisé ceci pour la radio:

    if (element.prop("type") === "checkbox" || element.prop("type") === "radio") {
        error.appendTo(element.parent().parent());
    }
    else if (element.parent(".input-group").length) {
        error.insertAfter(element.parent());
    }
    else {
        error.insertAfter(element);
    }

de cette façon, l'erreur est affichée sous la dernière option radio.


Brillamment simple réponse, merci - juste fendus la clause de type supplémentaire dans ma logique de errorPlacement existante
theotherdy

3

Je sais que cette question concerne Bootstrap 3, mais comme certaines questions liées à Bootstrap 4 sont redirigées vers celle-ci en tant que doublons, voici l'extrait de code compatible avec Bootstrap 4:

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-danger');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-danger');
    },
    errorElement: 'small',
    errorClass: 'form-control-feedback d-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if(element.prop('type') === 'checkbox') {
            error.appendTo(element.parent().parent().parent());
        } else if(element.prop('type') === 'radio') {
            error.appendTo(element.parent().parent().parent());
        } else {
            error.insertAfter(element);
        }
    },
});

Les quelques différences sont:

  • L'utilisation de la classe has-danger au lieu dehas-error
  • Meilleures radios de positionnement d'erreur et cases à cocher

Bootstrap 4 n'a plus les .has-*classes. getbootstrap.com/docs/4.3/migration/#forms-1
Fred

2

Pour la version bêta de bootstrap 4, il y a eu de gros changements entre les versions alpha et bêta de bootstrap (et aussi bootstrap 3), esp. en ce qui concerne la validation du formulaire.

Tout d'abord, pour placer les icônes correctement, vous devrez ajouter un style qui équivaut à ce qui était dans bootstrap 3 et non plus dans bootstrap 4 beta ... voici ce que j'utilise

.fa.valid-feedback,
.fa.invalid-feedback {
    position: absolute;
    right: 25px;
    margin-top: -50px;
    z-index: 2;
    display: block;
    pointer-events: none;
}

.fa.valid-feedback {
    margin-top: -28px;
}

Les classes ont également changé car la version bêta utilise «l'état» du contrôle plutôt que des classes que votre code publié ne reflète pas, de sorte que votre code ci-dessus peut ne pas fonctionner. Quoi qu'il en soit, vous devrez ajouter la classe `` a été validée '' au formulaire dans les rappels de réussite ou de mise en surbrillance / désélection.

$(element).closest('form').addClass('was-validated');

Je recommanderais également d'utiliser le nouvel élément et les nouvelles classes pour le texte d'aide du contrôle de formulaire

errorElement: 'small',
errorClass: 'form-text invalid-feedback',

1

Cela compose les champs

 $("#form_questionario").validate({
                debug: false,
                errorElement: "span",
                errorClass: "help-block",
                highlight: function (element, errorClass, validClass) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).closest('.form-group').removeClass('has-error');
                },
                errorPlacement: function (error, element) {
                    if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                        error.insertBefore(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                // Specify the validation rules
                rules: {
                        'campo1[]': 'required',
                        'campo2[]': 'required',
                        'campo3[]': 'required',
                        'campo4[]': 'required',
                        'campo5[]': 'required'
                        },

                submitHandler: function (form) {
                    form.submit();
                }
            });

1

ajouter un correctif radio en ligne à ce https://stackoverflow.com/a/18754780/966181

$.validator.setDefaults({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else if (element.parent('.radio-inline').length) {
            error.insertAfter(element.parent().parent());
        } else {
            error.insertAfter(element);
        }
    }
});

C'est simple, c'est très utile. Je vous remercie.
Chofoteddy

0

La réponse de DARK_DIESEL a très bien fonctionné pour moi; voici le code pour tous ceux qui veulent l'équivalent en utilisant des glyphicons:

jQuery.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
            $(element).closest('.form-group').find('span.glyphicon').remove();
            $(element).closest('.form-group').append('<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
        }
    },
    unhighlight: function (element, errorClass, validClass) {
        if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
            $(element).closest('.form-group').find('span.glyphicon').remove();
            $(element).closest('.form-group').append('<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
        }
    }
});

0

Essayez d'utiliser cet exemple de code. Utilisation du plugin de validation Jquery et de méthodes supplémentaires. C'est le code de travail de mon projet. J'espère que cela vous aide

//jquery validation booking page
	
	// Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("form[name='book']").validate({
	  //on key up validation
	  onkeyup: function(element) {
      $(element).valid(); 
    },  
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      fname: {
        required: true,
        lettersonly: true
        },
      lname:{
        required: true,
        lettersonly: true
        },
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      fname: {
      required:"Please enter your firstname",
      lettersonly:"Letters allowed only"
      },
      lname: {
      required:"Please enter your lastname",
      lettersonly:"Letters allowed only"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
.error {
  color: red;
  margin-left: 5px;
  font-size:15px;
}
<script src="design/bootstrap-3.3.7-dist/js/jquery.validate.js"></script>
<script src="design/bootstrap-3.3.7-dist/js/additional-methods.js"></script>

<form name="book" id="book" action="" method="post">

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="fname">First Name</label>
            <input type="text" name="fname" id="fname" class="form-control" placeholder="First Name">
        </div>
        <div class="col-md-6">
            <label class="" for="lname">Last Name</label>
            <input type="text" name="lname" id="lname" class="form-control" placeholder="Last Name">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-6 ">
            <label class="" for="date">Date</label>
            <input type="text" id="date" class="form-control datepicker px-2" placeholder="Date of visit">
        </div>
        <div class="col-md-6">
            <label class="" for="email">Email</label>
            <input type="email" name="email" id="email" class="form-control" placeholder="Email">
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="treatment">Service You Want</label>
            <select name="treatment" id="treatment" class="form-control">
                <option value="">Hair Cut</option>
                <option value="">Hair Coloring</option>
                <option value="">Perms and Curls</option>
                <option value="">Hair Conditioning</option>
                <option value="">Manicure</option>
                <option value="">Pedicure</option>
                <option value="">Nails Extension</option>
                <option value="">Nail Design</option>
                <option value="">Waxing Eyebrows</option>
                <option value="">Waxing Hands/Legs</option>
                <option value="">Full Face Waxing</option>
                <option value="">Full Body/Body Parts Wax</option>
            </select>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <label class="" for="note">Notes</label>
            <textarea name="note" id="note" cols="30" rows="5" class="form-control" placeholder="Write your notes or questions here..."></textarea>
        </div>
    </div>

    <div class="row form-group">
        <div class="col-md-12">
            <center><input type="submit" value="Book Now" class="btn btn-primary btn-lg"></center>
        </div>
    </div>

</form>


-1

Une autre option consiste à placer un conteneur d'erreurs en dehors de votre groupe de formulaires à l'avance. Le validateur l'utilisera ensuite si nécessaire.

<div class="form-group">
  <label class="control-label" for="new-task-due-date">When is the task due?</label>
  <div class="input-group date datepicker">
    <input type="text" id="new-task-due-date" class="required form-control date" name="dueDate" />
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>                          
  </div>
  <label for="new-task-due-date" class="has-error control-label" style="display: none;"></label>
</div>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.