Jak ręcznie uruchomić sprawdzanie poprawności za pomocą jQuery validate?

Question

Chcę ręcznie włączyć sprawdzanie poprawności, w tym wyświetlanie komunikatów o błędach z jQuery Validate.

Scenariusz próbuję wykonać jest formą tak:

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

Po kliknięciu b1 tylko i1 powinny zostać zatwierdzone. kliknięcie b2, tylko powinno zostać zatwierdzone. Jednak wszystkie pola muszą zostać opublikowane. Jak mogę to zrobić? Pomyślałem o obsłudze zdarzenia kliknięcia dla b1/b2 i ręcznego sprawdzania poprawności części formularza.

Answer 1

Ta biblioteka wydaje się umożliwiać sprawdzanie poprawności pojedynczych elementów. Wystarczy powiązać zdarzenie click do przycisku i wykonaj następujące czynności:

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

Przykłady tutaj:

http://docs.jquery.com/Plugins/Validation/Validator/element#element

Answer 2

Moje podejście było jak poniżej. Teraz chciałem tylko moja forma zostać zatwierdzone, gdy jeden specyficzny wyboru został kliknięty/zmieniony:

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

Answer 3

Albo 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 
} 

Answer 4

próbowałem to działało tnx @Anastasiosyal chcę podzielić to w tym wątku.

Nie jestem pewien, jak pola wejściowe nie wyzwoliły się, gdy opróżniłem pola. Ale udało mi się wyzwolić każdego wymaganego pola indywidualnie przy użyciu:

$(".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 widok

@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 mój Podmiot

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

Answer 5

Jest nieudokumentowana metoda od wersji 1.14

validator.checkForm() 

Ta metoda w trybie cichym sprawdza poprawność na true/false. Nie powoduje wyświetlania komunikatów o błędach.

Answer 6

Jest to dobry sposób, jeśli używasz validate() z parametrami na formularzu i chcą potwierdzić jedno pole formularza ręcznie potem:

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

Dokumentacja: Validator.element()

Answer 7

W moim podobnym przypadku, miał moją własną logikę walidacji i po prostu chciał użyć sprawdzania poprawności 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' 
 
    }); 
 
});