Wie kann die Validierung manuell mit jQuery validate ausgelöst werden?

Ich möchte die Validierung manuell auslösen, einschließlich der Anzeige von Fehlermeldungen mit jQuery Validate .

Das Szenario, das ich zu erreichen versuche, ist eine Form wie diese:

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

Beim Anklicken b1, nur i1sollte validiert werden. Wenn Sie klicken b2, i2sollte nur validiert werden. Es müssen jedoch alle Felder gebucht werden. Wie kann ich das machen? Ich dachte darüber nach, das Klickereignis für b1/b2einen Teil des Formulars zu behandeln und manuell zu validieren.

Diese Bibliothek scheint die Validierung einzelner Elemente zu ermöglichen. Verknüpfen Sie einfach ein Klickereignis mit Ihrer Schaltfläche und versuchen Sie Folgendes:

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

Beispiele hier:

https://jqueryvalidation.org/Validator.element

Oder man kann einfach verwenden: $('#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
}

Beachten Sie, dass validate()das Formular aufgerufen werden muss, bevor es mit dieser Methode überprüft wird.

Dokumentationslink: https://jqueryvalidation.org/valid/

Mein Ansatz war wie folgt. Jetzt wollte ich nur, dass mein Formular validiert wird, wenn ein bestimmtes Kontrollkästchen angeklickt / geändert wurde:

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

Wie in der Dokumentation beschrieben , können Sie die Formularüberprüfung programmgesteuert auslösen, indem Sie validator.form () aufrufen.

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

Ab Version 1.14 gibt es eine undokumentierte Methode

validator.checkForm()

Diese Methode überprüft stillschweigend, ob true / false zurückgegeben wird. Es werden keine Fehlermeldungen ausgelöst.

Eva M von oben hatte fast die Antwort wie oben (Danke Eva M!):

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

Dies ist fast die Antwort, aber es verursacht Probleme, selbst im aktuellsten JQuery-Validierungs-Plugin ab dem 13. Dezember 2018. Das Problem ist, dass wenn man dieses Sample direkt kopiert und EVER ".validate ()" mehr als einmal aufruft kann die Fokus- / Schlüsselverarbeitung der Validierung unterbrochen werden und die Validierung zeigt möglicherweise keine Fehler richtig an.

So verwenden Sie die Antwort von Eva M und stellen sicher, dass diese Probleme mit Fokus / Schlüssel / Fehlerverstecken nicht auftreten:

1) Speichern Sie Ihren Validator in einer Variablen / global.

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

2) Rufen Sie $ ("# myform") NICHT erneut auf. Validate () EVER.

Wenn Sie $ ("# myform"). Validate () mehrmals aufrufen, kann dies zu Problemen beim Verbergen von Fokus / Schlüssel / Fehler führen.

3) Verwenden Sie die Variable / global und das Aufrufformular.

var bIsValid = oValidator.form();

In meinem ähnlichen Fall hatte ich meine eigene Validierungslogik und wollte nur die jQuery-Validierung verwenden, um die Nachricht anzuzeigen. Das habe ich getan.

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

Ich habe versucht, es hat funktioniert tnx @Anastasiosyal Ich möchte es auf diesem Thread teilen.

Ich bin mir nicht sicher, wie die Eingabefelder nicht ausgelöst wurden, als ich die Felder geleert habe. Aber ich habe es geschafft, jedes erforderliche Feld einzeln auszulösen, indem ich:

$(".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();
    });

Hier ist meine Ansicht

@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>

und mein Wesen

   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; }
.....
}

Es gibt eine gute Möglichkeit, wenn Sie validate()Parameter in einem Formular verwenden und anschließend ein Feld Ihres Formulars manuell validieren möchten:

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

Dokumentation: Validator.element ()