web-dev-qa-db-fra.com

Comment déclencher manuellement la validation avec jQuery validate?

Je souhaite déclencher manuellement la validation, notamment l'affichage de messages d'erreur avec jQuery Validate .

Le scénario que j'essaie d'accomplir est une forme comme celle-ci:

<form>
 <input id=i1> <button id=b1>
 <input id=i2> <button id=b2>
</form>

Lorsque vous cliquez sur b1, seul i1 doit être validé. Lorsque vous cliquez sur b2, seul i2 doit être validé. Cependant, tous les champs doivent être postés. Comment puis-je faire ceci? J'ai pensé à la gestion de l'événement click pour b1/b2 et à la validation manuelle d'une partie du formulaire.

javascriptjqueryhtmljquery-validate
125
usr

Cette bibliothèque semble permettre la validation d'éléments uniques. Associez simplement un événement de clic à votre bouton et essayez ce qui suit:

$("#myform").validate().element("#i1");

Exemples ici:

http://docs.jquery.com/Plugins/Validation/Validator/element#element

158
Roberto Aloi

Ou on peut simplement utiliser: $('#myElem').valid()

if ($('#myElem').valid()){
   // will also trigger unobtrusive validation only for this element if in place 
   // add your extra logic here to execute only when element is valid
}
96
Anastasiosyal

Mon approche était comme ci-dessous. Maintenant, je voulais juste que mon formulaire soit validé quand une case spécifique était cochée/modifiée:

$('#myForm input:checkbox[name=yourChkBxName]').click(
 function(e){
  $("#myForm").valid();
}
)
25
Yoosaf Abdulla

Comme indiqué dans la documentation , le moyen de déclencher la validation de formulaire par programme consiste à appeler validator.form ()

var validator = $( "#myform" ).validate();
validator.form();
6
Eva M

Il existe une méthode non documentée à partir de la version 1.14

validator.checkForm()

Cette méthode valide silencieusement le retour vrai/faux. Cela ne déclenche pas de message d'erreur.

4
user5936891

Eva M d'en haut, a presque eu la réponse ci-dessus (Merci Eva M!):

var validator = $( "#myform" ).validate();
validator.form();

C'est presque la solution, mais cela pose des problèmes, même dans le plug-in de validation de jQuery le plus récent à compter du 13 décembre 2018. Le problème est que si l'on copie directement cet échantillon, et si on appelle ".validate ()" plusieurs fois , le traitement cible/clé de la validation peut être interrompu et la validation peut ne pas afficher correctement les erreurs.

Voici comment utiliser la réponse d'Eva M et veiller à ce que ces problèmes de focalisation/clé/dissimulation d'erreur ne se produisent pas:

1) Enregistrez votre validateur dans une variable/globale.

var oValidator = $("#myform").validate();

2) NE PAS appeler $ ("# myform"). Validate () à nouveau.

Si vous appelez $ ("#myform"). Validate () plusieurs fois, des problèmes de focus/clé/masquage d'erreur peuvent survenir.

3) Utilisez la variable/global et le formulaire d’appel.

var bIsValid = oValidator.form();
1
J-S-B

Il existe un bon moyen d'utiliser validate() avec les paramètres d'un formulaire et de valider manuellement un champ de votre formulaire par la suite:

var validationManager = $('.myForm').validate(myParameters);
...
validationManager.element($(this));

Documentation: Validator.element ()

0
Tobi G.

j'ai essayé de travailler tnx @Anastasiosyal je veux le partager sur ce fil.

Je ne suis pas sûr de savoir comment les champs de saisie ne se sont pas déclenchés lorsque j'ai vidé les champs. Mais j'ai réussi à déclencher chaque champ requis individuellement en utilisant:

$(".setting-p input").bind("change", function () {
        //Seven.NetOps.validateSettings(Seven.NetOps.saveSettings);
        /*$.validator.unobtrusive.parse($('#saveForm'));*/
        $('#NodeZoomLevel').valid();
        $('#ZoomLevel').valid();
        $('#CenterLatitude').valid();
        $('#CenterLongitude').valid();
        $('#NodeIconSize').valid();
        $('#SaveDashboard').valid();
        $('#AutoRefresh').valid();
    });

voici mon avis

@using (Html.BeginForm("SaveSettings", "Settings", FormMethod.Post, new {id = "saveForm"}))
{
    <div id="sevenRightBody">
        <div id="mapMenuitemPanel" class="setingsPanelStyle" style="display: block;">
            <div class="defaultpanelTitleStyle">Map Settings</div>
            Customize the map view upon initial navigation to the map view page.
            <p class="setting-p">@Html.LabelFor(x => x.NodeZoomLevel)</p>
            <p class="setting-p">@Html.EditorFor(x => x.NodeZoomLevel) @Html.ValidationMessageFor(x => x.NodeZoomLevel)</p>
            <p class="setting-p">@Html.LabelFor(x => x.ZoomLevel)</p>
            <p class="setting-p">@Html.EditorFor(x => x.ZoomLevel) @Html.ValidationMessageFor(x => x.ZoomLevel)</p>
            <p class="setting-p">@Html.LabelFor(x => x.CenterLatitude)</p>
            <p class="setting-p">@Html.EditorFor(x => x.CenterLatitude) @Html.ValidationMessageFor(x => x.CenterLatitude)</p>
            <p class="setting-p">@Html.LabelFor(x => x.CenterLongitude)</p>
            <p class="setting-p">@Html.EditorFor(x => x.CenterLongitude) @Html.ValidationMessageFor(x => x.CenterLongitude)</p>
            <p class="setting-p">@Html.LabelFor(x => x.NodeIconSize)</p>
            <p class="setting-p">@Html.SliderSelectFor(x => x.NodeIconSize) @Html.ValidationMessageFor(x => x.NodeIconSize)</p>
        </div>

et mon entité

   public class UserSetting : IEquatable<UserSetting>
    {
        [Required(ErrorMessage = "Missing Node Zoom Level.")]
        [Range(200, 10000000, ErrorMessage = "Node Zoom Level must be between {1} and {2}.")]
        [DefaultValue(100000)]
        [Display(Name = "Node Zoom Level")]
        public double NodeZoomLevel { get; set; }

        [Required(ErrorMessage = "Missing Zoom Level.")]
        [Range(200, 10000000, ErrorMessage = "Zoom Level must be between {1} and {2}.")]
        [DefaultValue(1000000)]
        [Display(Name = "Zoom Level")]
        public double ZoomLevel { get; set; }

        [Range(-90, 90, ErrorMessage = "Latitude degrees must be between {1} and {2}.")]
        [Required(ErrorMessage = "Missing Latitude.")]
        [DefaultValue(-200)]
        [Display(Name = "Latitude")]
        public double CenterLatitude { get; set; }

        [Range(-180, 180, ErrorMessage = "Longitude degrees must be between {1} and {2}.")]
        [Required(ErrorMessage = "Missing Longitude.")]
        [DefaultValue(-200)]
        [Display(Name = "Longitude")]
        public double CenterLongitude { get; set; }

        [Display(Name = "Save Dashboard")]
        public bool SaveDashboard { get; set; }
.....
}
0
bherto39

Dans mon cas similaire, j'avais ma propre logique de validation et je voulais simplement utiliser la validation jQuery pour afficher le message. C'est ce que j'ai fait.

//1) Enable jQuery validation
var validator = $('#myForm').validate();

$('#myButton').click(function(){
  //my own validation logic here
  //.....
  //2) when validation failed, show the error message manually
  validator.showErrors({
    'myField': 'my custom error message'
  });
});

0
user538220