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

143

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.

usr
quelle
Warum nicht manuell validieren? Dieses Plugin ist sehr nützlich, um das gesamte Formular zu validieren, aber in diesem Fall ist es einfacher, das Formular manuell zu validieren.
Anatoliy
Die Form ist größer als in meinem Beispiel. Ich möchte es automatisiert.
usr

Antworten:

176

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

Roberto Aloi
quelle
15
Dies validiert das gesamte Formular ... um nur 1 Feld zu validieren, ist der richtige Weg: stackoverflow.com/a/12195091/114029
Leniel Maccaferri
Aus irgendeinem Grund erhalte ich den benutzerdefinierten Fehlertext nicht, wenn ich auf diese Weise validiere. Kann etwas damit zu tun haben, dass ich mich in einem Durandal-Dialog befinde. In diesem Zusammenhang gibt es unzählige Probleme mit diesem Rahmen.
P.Brian.Mackey
@ Roberto Aloi: Link ist veraltet
Sebastian
@Sebastian Danke für den Ping, habe den Link jetzt aktualisiert!
Roberto Aloi
112

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/

Anastasiosyal
quelle
15
validate()muss auf dem Formular aufgerufen werden, bevor es mit dieser Methode überprüft wird.
GETah
Ich habe eine solche Abfrage, wenn ($ ('# myElem'). val () == '2017-4-12') {Datumsauswahl falsch} sonst {gültige Auswahl}
srinivas gowda
29

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();
}
)
Yoosaf Abdulla
quelle
Meine Abfrage if ($ ('# someID) ===' 2017-4-12) {$ ("# myform"). Validate (). Element ("# i1"). Valid ();} else {$ ( "#myform"). validate (). element ("# i1"). invalid ();} ist der Code korrekt
srinivas gowda
14

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();
Eva M.
quelle
2
Dies beantwortet die Frage nicht, da es bei der Frage darum geht, nur ein bestimmtes Feld zu validieren. Aber es ist genau das, wonach ich gesucht habe. Vielen Dank!
28.
4

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.

user5936891
quelle
9
undokumentiert = kann jederzeit brechen.
usr
2

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();
JSB
quelle
1

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

user538220
quelle
0

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; }
.....
}
bherto39
quelle
3
Diese Antwort setzt eine .NET-Umgebung voraus, wenn die Frage explizit die jQuery-Validierung betrifft.
Kenogu Labz
0

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 ()

Zu groß.
quelle