validasi yang tidak mengganggu tidak berfungsi dengan konten dinamis


96

Saya mengalami masalah saat mencoba mendapatkan validasi jquery yang tidak mengganggu untuk bekerja dengan tampilan parsial yang dimuat secara dinamis melalui panggilan AJAX.

Saya telah menghabiskan waktu berhari-hari mencoba membuat kode ini berfungsi tanpa hasil.

Berikut Tampilannya:

@model MvcApplication2.Models.test

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true);
 <div id="res"></div>
 <input id="submit" type="submit" value="submit" />
}

Pandangan Parsial:

@model MvcApplication2.Models.test

@Html.TextAreaFor(m => m.MyProperty);
@Html.ValidationMessageFor(m => m.MyProperty);

<script type="text/javascript" >
  $.validator.unobtrusive.parse(document);
</script>

Model:

  public class test
  {
    [Required(ErrorMessage= "required field")]
    public int MyProperty { get; set; }
  }

Pengendali:

    public ActionResult GetView()
    {
        return PartialView("Test");
    }

dan terakhir, javascript:

$(doument).ready(function () {
$.ajax({
    url: '/test/getview',
    success: function (res) {

        $("#res").html(res);
        $.validator.unobtrusive.parse($("#res"));
    }
});

$("#submit").click(function () {
    if ($("form").valid()) {
        alert('valid');
        return true;
    } else {
        alert('not valid');
        return false;
    }
});

Validasi tidak berfungsi. Bahkan jika saya tidak mengisi informasi apa pun di texbox, acara kirim menunjukkan peringatan ('valid').

Namun, jika alih-alih memuat tampilan secara dinamis, saya gunakan @Html.Partial("test", Model)untuk membuat Tampilan parsial di Tampilan utama (dan saya tidak melakukan panggilan AJAX), maka validasi berfungsi dengan baik.

Ini mungkin karena jika saya memuat konten secara dinamis, kontrolnya belum ada di DOM. Tapi saya melakukan panggilan $.validator.unobtrusive.parse($("#res")); yang seharusnya cukup untuk membiarkan validator tentang kontrol yang baru dimuat ...

Adakah yang bisa membantu?


Saya juga mengalami masalah yang sama, tetapi di MVC 2. Saya melakukan langkah demi langkah sebagai: weblogs.asp.net/imranbaloch/archive/2010/07/11/… Ini mungkin juga membantu Anda. weblogs.asp.net/imranbaloch/archive/2011/03/05/… Semoga bantuan ini :)
Naresh Parmar

2
Catatan, unobtrusive.parsefungsi mengambil selektor sebagai argumen, bukan elemen.
Fred

Jawaban:


228

Jika Anda mencoba mengurai formulir yang sudah diurai, formulir tidak akan diperbarui

Apa yang dapat Anda lakukan saat menambahkan elemen dinamis ke formulir adalah

  1. Anda dapat menghapus validasi formulir dan memvalidasinya kembali seperti ini:

    var form = $(formSelector)
        .removeData("validator") /* added by the raw jquery.validate plugin */
        .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/
    
    $.validator.unobtrusive.parse(form);
  2. Akses data formulir unobtrusiveValidationmenggunakan datametode jquery :

    $(form).data('unobtrusiveValidation')

    kemudian akses kumpulan aturan dan tambahkan atribut elemen baru (yang agak rumit).

Anda juga dapat melihat artikel ini tentang Menerapkan validasi jquery yang tidak mengganggu ke konten dinamis di ASP.Net MVC untuk plugin yang digunakan untuk menambahkan elemen dinamis ke formulir. Plugin ini menggunakan solusi kedua.


17
Dude you rock, benar-benar menyelamatkan hariku! Jawaban yang luar biasa!
Dimitar Dimitrov

Saya takut saya harus mengundangnya sendiri. Script dari halaman itu bekerja dengan sangat baik.
cezarypiatek

Kode, berfungsi dengan baik - pembaruan cepat (jika saya boleh) 1. Saya menggunakan sistem gugur dan mendapatkan nama bidang dengan baik sepertinya jadi masalah. $ .validator.unobtrusive.parseDynamicContent ('form'); (untuk mendapatkan semua bidang), di bagian akhir saat mengirimkan. 2. Ini bagus johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/… untuk memberi Anda cara memberi nama bidang (yang tampaknya diperlukan? Saya menggunakan jquery bootstrap yang tidak mengganggu di atas dari 2 lainnya jadi keadaan mungkin berbeda)
Richard Housham

Hanya catatan bahwa pengaturan khusus formulir apa pun yang telah Anda terapkan $("form").data("validator").settingsakan dihapus $(formSelector).removeData("validator")dan diganti dengan default dari $.validator.defaultssaat reparsing formulir. Ini adalah cara terbaik untuk menyertakan bidang dinamis, tetapi pastikan untuk mengulangi kode inisialisasi ubahsuaian apa pun pada setiap parse baru.
KyleMit

19

Sebagai tambahan dari jawaban Nadeem Khedr ....

Jika Anda telah memuat formulir ke DOM Anda secara dinamis dan kemudian memanggil

jQuery.validator.unobtrusive.parse(form); 

(dengan bit ekstra yang disebutkan) dan kemudian akan mengirimkan formulir itu menggunakan ajax remember to call

$(form).valid()

yang mengembalikan benar atau salah (dan menjalankan validasi sebenarnya) sebelum Anda mengirimkan formulir.


hai, saya menghadapi masalah yang sama. im menampilkan tampilan dinamis saya dalam pop up (dialog jquery). validasi yang tidak mengganggu tidak berfungsi. di mana saya memanggil $ (form) .valid () dalam tampilan dinamis saya atau di mana lagi?
mmssaann

Saya selalu mencegah formulir mengirimkan dengan mengembalikan false di dalam $ (formulir) .submit karena saya melakukan pengiriman AJAX, tetapi kemudian saya membutuhkan cara untuk tidak memanggil pengiriman AJAX saat validasi gagal. $ (form) .valid () adalah jawabannya! Terima kasih!
jgerman

6

tambahkan ini ke _Layout.cshtml Anda

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });

3
Ini sangat tidak efisien.
Liam

5

Anehnya, ketika saya melihat pertanyaan ini, dokumen resmi ASP.NET masih tidak memiliki info apa pun tentang parse()metode yang tidak mengganggu atau cara menggunakannya dengan konten dinamis. Saya mengambil kebebasan untuk membuat masalah di repo dokumen (merujuk pada jawaban asli @ Nadeem) dan mengirimkan permintaan tarik untuk memperbaikinya. Informasi ini sekarang dapat dilihat di bagian validasi sisi klien dari topik validasi model.


3

uji ini:

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}

2

Saya mengalami masalah yang sama dan tidak ada yang berhasil kecuali ini:

$(document).ready(function () { 
    rebindvalidators();
});

function rebindvalidators() {
    var $form = $("#id-of-form");
    $form.unbind();
    $form.data("validator", null);
    $.validator.unobtrusive.parse($form);
    $form.validate($form.data("unobtrusiveValidation").options);
}

dan tambahkan

// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
    return;

tempat Anda mencoba menyimpan formulir.

Saya menyimpan formulir melalui panggilan Ajax.

Semoga ini bisa membantu seseorang.


1
Yang ini berhasil untuk saya. Saya menemukan solusi dari beberapa hari terakhir, Ini berfungsi di asp.net core 2. Terima kasih.
Pradip Rupareliya

0

cukup salin kode ini lagi di akhir kode modal

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

;)

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.