validasi yang tidak mengganggu tidak berfungsi dengan konten dinamis

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?

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.

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.

tambahkan ini ke _Layout.cshtml Anda

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

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.

uji ini:

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

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.

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>

;)