Bagaimana cara memicu validasi secara manual dengan memvalidasi jQuery?

Saya ingin memicu validasi secara manual termasuk menampilkan pesan kesalahan dengan jQuery Validate .

Skenario yang saya coba selesaikan adalah bentuk seperti ini:

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

Saat mengklik b1, hanya i1harus divalidasi. hen mengklik b2, hanya i2harus divalidasi. Namun semua bidang harus diposting. Bagaimana saya bisa melakukan ini? Saya berpikir untuk menangani acara klik b1/b2dan memvalidasi bagian formulir secara manual.

Perpustakaan itu tampaknya memungkinkan validasi untuk elemen tunggal. Kaitkan saja acara klik ke tombol Anda dan coba yang berikut ini:

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

Contoh di sini:

https://jqueryvalidation.org/Validator.element

Atau seseorang dapat dengan mudah menggunakan: $('#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
}

Catatan yang validate()perlu dipanggil pada formulir sebelum memeriksanya menggunakan metode ini.

Tautan dokumentasi: https://jqueryvalidation.org/valid/

Pendekatan saya adalah seperti di bawah ini. Sekarang saya hanya ingin formulir saya divalidasi ketika satu kotak centang diklik / diubah:

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

Seperti yang tertulis dalam dokumentasi , cara untuk memicu validasi formulir secara terprogram adalah dengan memanggil validator.form ()

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

Ada metode tidak berdokumen pada versi 1.14

validator.checkForm()

Metode ini diam-diam memvalidasi untuk mengembalikan benar / salah. Itu tidak memicu pesan kesalahan.

Eva M dari atas, hampir memiliki jawaban seperti yang diposting di atas (Terima kasih Eva M!):

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

Ini hampir merupakan jawaban, tetapi ini menyebabkan masalah, bahkan pada plugin validasi jquery yang paling mutakhir pada 13 Desember 2018. Masalahnya adalah jika seseorang secara langsung menyalin sampel itu, dan PERNAH memanggil panggilan ".validate ()" lebih dari satu kali , pemrosesan fokus / kunci validasi dapat rusak, dan validasi mungkin tidak menunjukkan kesalahan dengan benar.

Berikut adalah cara menggunakan jawaban Eva M, dan memastikan bahwa masalah fokus / kunci / penyembunyian kesalahan tidak terjadi:

1) Simpan validator Anda ke variabel / global.

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

2) JANGAN panggil $ ("# formulir"). Validasikan () PERNAH lagi.

Jika Anda memanggil $ ("# myform"). Validate () lebih dari sekali, ini dapat menyebabkan masalah fokus / kunci / kesalahan-penyembunyian.

3) Gunakan variabel / global dan formulir panggilan.

var bIsValid = oValidator.form();

Dalam kasus serupa saya, saya memiliki logika validasi saya sendiri dan hanya ingin menggunakan validasi jQuery untuk menampilkan pesan. Inilah yang saya lakukan.

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

saya mencobanya berhasil tnx @Anastasiosyal saya ingin membagikannya di utas ini.

Saya tidak yakin bagaimana bidang input tidak terpicu ketika saya mengosongkan bidang. Tapi saya berhasil memicu setiap bidang yang diperlukan secara individual menggunakan:

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

inilah pandangan saya

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

dan Entitas saya

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

Ada cara yang baik jika Anda menggunakan validate()dengan parameter pada formulir dan ingin memvalidasi satu bidang formulir Anda secara manual sesudahnya:

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

Dokumentasi: Validator.element ()