Comment déclencher manuellement la validation avec jQuery validate?

Je souhaite déclencher manuellement la validation, y compris l'affichage des 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>

En cliquant b1, seul i1doit être validé. poule en cliquant b2, seul i2doit être validé. Cependant, tous les champs doivent être affichés. Comment puis-je faire ceci? J'ai pensé à gérer l'événement de clic b1/b2et à valider manuellement une partie du formulaire.

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:

https://jqueryvalidation.org/Validator.element

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
}

Notez qu'il validate()doit être appelé sur le formulaire avant de le vérifier en utilisant cette méthode.

Lien de documentation: https://jqueryvalidation.org/valid/

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

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

Comme écrit dans la documentation , la façon de déclencher la validation de formulaire par programme est d'appeler validator.form ()

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

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. Il ne déclenche pas de messages d'erreur.

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

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

C'est presque la réponse, mais cela pose des problèmes, même dans le plugin de validation jquery le plus récent au 13 décembre 2018. Le problème est que si l'on copie directement cet échantillon et que JAMAIS appelle ".validate ()" plus d'une fois , le traitement du focus / 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 vous assurer que ces problèmes de focus / clé / masquage d'erreur ne se produisent pas:

1) Enregistrez votre validateur dans une variable / global.

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

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

Si vous appelez $ ("# myform"). Validate () plus d'une fois, cela peut provoquer des problèmes de focus / clé / masquage d'erreur.

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

var bIsValid = oValidator.form();

Dans mon cas similaire, j'avais ma propre logique de validation et je voulais juste 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'
  });
});

je l'ai essayé a fonctionné 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 obligatoire 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; }
.....
}

Il existe un bon moyen si vous utilisez validate()des paramètres sur un formulaire et que vous souhaitez valider manuellement un champ de votre formulaire par la suite:

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

Documentation: Validator.element ()