JQuery validate ile elle doğrulama nasıl tetiklenir?

El ile jQuery Validate hata iletileri gösteren de dahil olmak üzere doğrulama tetiklemek istiyorum .

Gerçekleştirmeye çalıştığım senaryo şöyle:

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

Tıklarken b1sadece i1doğrulanmalıdır. tıklandığında b2, yalnızca i2doğrulanmalıdır. Ancak tüm alanların kaydedilmesi gerekir. Bunu nasıl yapabilirim? Tıklama olayı işleme b1/b2ve formun bir bölümünü el ile doğrulamayı düşündüm .

Bu kütüphane tek elemanlar için doğrulamaya izin veriyor gibi görünüyor. Bir tıklama etkinliğini düğmenizle ilişkilendirip aşağıdakileri deneyin:

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

Buradaki örnekler:

https://jqueryvalidation.org/Validator.element

Veya sadece şunu kullanabilirsiniz: $('#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
}

validate()Bu yöntemi kullanarak formu kontrol etmeden önce form üzerinde çağrılması gerektiğini unutmayın .

Dokümantasyon bağlantısı: https://jqueryvalidation.org/valid/

Benim yaklaşımım aşağıdaki gibiydi. Şimdi sadece belirli bir onay kutusu tıklandığında / değiştirildiğinde formumun doğrulanmasını istedim:

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

Belgelerde yazıldığı gibi , form doğrulamasını programsal olarak tetiklemenin yolu validator.form () yöntemini çağırmaktır

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

1.14 sürümünden itibaren belgelenmemiş bir yöntem var

validator.checkForm()

Bu yöntem, true / false döndürmesini sessizce doğrular. Hata mesajlarını tetiklemez.

Eva M yukarıdan, neredeyse yukarıdaki gibi cevaba sahipti (Teşekkürler Eva M!):

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

Bu neredeyse cevaptır, ancak 13 Aralık 2018 tarihinden itibaren en güncel jquery doğrulama eklentisinde bile sorunlara neden olur. Sorun, biri doğrudan bu örneği kopyalar ve EVER ".validate ()" öğesini bir kereden fazla çağırırsa , doğrulamanın odak / anahtar işlemi bozulabilir ve doğrulama hataları düzgün göstermeyebilir.

Eva M'in cevabını nasıl kullanacağınız ve bu odak / anahtar / hata gizleme sorunlarının oluşmadığından emin olun:

1) Doğrulayıcınızı bir değişkene / global olarak kaydedin.

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

2) $ ("# myform") işlevini ÇAĞIRMAYIN. Validate () EVER.

$ ("# Myform"). Validate () öğesini birden çok kez çağırırsanız, odak / anahtar / hata gizleme sorunlarına neden olabilir.

3) Değişken / genel ve çağrı formunu kullanın.

var bIsValid = oValidator.form();

Benzer durumumda, kendi doğrulama mantığım vardı ve sadece mesajı göstermek için jQuery doğrulamasını kullanmak istedim. Ben de öyle yaptım.

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

i çalıştı tnx @Anastasiosyal i çalıştı bu konu üzerinde paylaşmak istiyorum.

Alanları boşalttığımda girdi alanlarının nasıl tetiklenmediği konusunda olumlu değilim. Ama gerekli her alanı ayrı ayrı tetiklemeyi başardım:

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

işte benim görüşüm

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

ve Varlığım

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

validate()Bir formdaki parametrelerle kullanırsanız ve daha sonra formunuzun bir alanını manuel olarak doğrulamak istiyorsanız iyi bir yol vardır :

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

Belgeler: Validator.element ()