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' }); });