Comment déclencher manuellement la validation avec jQuery valider?

Je souhaite déclencher manuellement la validation, y compris les messages d'erreur avec jQuery Valider .

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 devrait être validé. En cliquant sur b2, seul i2 devrait ê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 pour b1 / b2 et à valider manuellement une partie du formulaire.

Cette bibliothèque semble autoriser 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

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 } 

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

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

Il existe une méthode sans papiers à partir de la version 1.14

 validator.checkForm() 

Cette méthode valide silencieusement pour le retour true / false. Il ne déclenche pas de messages d'erreur.

J'ai essayé ça tnx @Anastasiosyal je veux le partager sur ce fil.

Je ne sais pas comment les champs de saisie n'ont pas déclenché 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 point de vue

 @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() avec des paramètres sur un formulaire et que vous souhaitez valider un champ de votre formulaire manuellement après:

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

Documentation: Validator.element ()

Dans mon cas semblable, j'ai eu 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' }); });