Bagaimana cara memicu validasi secara manual dengan memvalidasi jQuery?


143

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.


Mengapa tidak memvalidasi secara manual? Plugin ini sangat berguna untuk memvalidasi seluruh formulir, tetapi dalam hal ini formulir validasi lebih situable secara manual.
Anatoliy

Bentuknya lebih besar dari pada contoh saya. Saya ingin ini otomatis.
usr

Jawaban:


176

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


15
Ini memvalidasi seluruh formulir ... untuk memvalidasi hanya 1 bidang, cara yang benar adalah ini: stackoverflow.com/a/12195091/114029
Leniel Maccaferri

Untuk alasan apa pun saya tidak mendapatkan teks kesalahan khusus ketika saya memvalidasi cara ini. Mungkin ada hubungannya dengan fakta bahwa saya menjalankan dialog Durandal. Memiliki banyak masalah dengan kerangka kerja ini dalam konteks tersebut.
P.Brian.Mackey

@Roberto Aloi: Tautan sudah usang
Sebastian

@Sebastian Terima kasih atas pingnya, perbarui tautannya sekarang!
Roberto Aloi

113

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/


15
validate()perlu dipanggil pada formulir sebelum memeriksanya menggunakan metode ini.
GETah

saya punya pertanyaan seperti ini jika ($ ('# myElem'). val () == '2017-4-12') {pilihan tanggal salah} lain {pilihan sah}
srinivas gowda

29

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

Pertanyaan saya jika ($ ('# someID) ===' 2017-4-12) {$ ("# myform"). Validate (). Element ("# i1"). Valid ();} else {$ ( "#myform"). validate (). element ("# i1"). invalid ();} adalah kode yang benar
srinivas gowda

14

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

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

2
Ini tidak menjawab pertanyaan, karena pertanyaannya adalah tentang memvalidasi hanya satu bidang tertentu. Tapi itulah tepatnya yang saya cari. Terima kasih!
jlh

4

Ada metode tidak berdokumen pada versi 1.14

validator.checkForm()

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


9
undocumented = dapat rusak kapan saja.
usr

2

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

1

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


0

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

3
Jawaban ini mengasumsikan lingkungan .Net ketika pertanyaan secara eksplisit menyangkut validasi jQuery.
Kenogu Labz

0

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.