Jak ręcznie wyzwolić walidację za pomocą jQuery validate?

Chcę ręcznie wyzwalać walidację, w tym pokazywać komunikaty o błędach z jQuery Validate .

Scenariusz, który próbuję zrealizować, to taka forma:

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

Po kliknięciu b1tylko i1powinno zostać zatwierdzone. b2tylko kliknięcie i2powinno zostać zatwierdzone. Jednak wszystkie pola muszą zostać wysłane. W jaki sposób mogę to zrobić? Myślałem o obsłudze zdarzenia kliknięcia b1/b2i ręcznej walidacji części formularza.

Wydaje się, że ta biblioteka umożliwia walidację pojedynczych elementów. Po prostu skojarz zdarzenie kliknięcia z przyciskiem i wypróbuj następujące rozwiązania:

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

Przykłady tutaj:

https://jqueryvalidation.org/Validator.element

Lub można po prostu użyć: $('#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
}

Należy pamiętać, że validate()przed sprawdzeniem przy użyciu tej metody należy wywołać formularz.

Link do dokumentacji: https://jqueryvalidation.org/valid/

Moje podejście było jak poniżej. Teraz chciałem, aby mój formularz został zweryfikowany po kliknięciu / zmianie jednego konkretnego pola wyboru:

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

Jak napisano w dokumentacji , sposobem programowego wyzwalania walidacji formularza jest wywołanie funkcji validator.form ()

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

Od wersji 1.14 istnieje nieudokumentowana metoda

validator.checkForm()

Ta metoda dyskretnie sprawdza poprawność zwracania wartości prawda / fałsz. Nie wywołuje komunikatów o błędach.

Eva M z góry, prawie otrzymała odpowiedź, jak napisano powyżej (Dzięki Eva M!):

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

To jest prawie odpowiedź, ale powoduje to problemy, nawet w najbardziej aktualnej wtyczce do walidacji jquery z 13 grudnia 2018 r. Problem polega na tym, że jeśli ktoś bezpośrednio kopiuje tę próbkę i NIGDY wywołuje ".validate ()" więcej niż raz , fokus / przetwarzanie klucza w walidacji może zostać zerwane, a walidacja może nie pokazywać poprawnie błędów.

Oto, jak użyć odpowiedzi Evy M i upewnić się, że problemy z fokusem / klawiszem / ukrywaniem błędów nie występują:

1) Zapisz swój walidator do zmiennej / globalnej.

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

2) NIE WZYWAJ $ ("# myform"). Validate () NIGDY ponownie.

Jeśli wywołasz $ ("# myform"). Validate () więcej niż raz, może to spowodować problemy z fokusem / kluczem / ukrywaniem błędów.

3) Użyj zmiennej / globalnej i formularza wywołania.

var bIsValid = oValidator.form();

W moim podobnym przypadku miałem własną logikę walidacji i po prostu chciałem użyć walidacji jQuery, aby wyświetlić komunikat. To właśnie zrobiłem.

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

próbowałem, zadziałało. tnx @ Anastasiosyal Chcę się nim podzielić w tym wątku.

Nie jestem pewien, jak pola wejściowe nie zostały wyzwolone, gdy opróżniłem pola. Ale udało mi się wyzwolić każde wymagane pole indywidualnie za pomocą:

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

oto mój pogląd

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

i moja jednostka

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

Jest dobry sposób, jeśli używasz validate()parametrów w formularzu i chcesz później ręcznie sprawdzić poprawność jednego pola formularza:

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

Dokumentacja: Validator.element ()