การตรวจสอบที่ไม่สร้างความรำคาญไม่ทำงานกับเนื้อหาแบบไดนามิก

ฉันมีปัญหาในการพยายามรับการตรวจสอบความถูกต้อง jquery ที่ไม่สร้างความรำคาญเพื่อทำงานกับมุมมองบางส่วนที่โหลดแบบไดนามิกผ่านการเรียก AJAX

ฉันใช้เวลาหลายวันในการพยายามทำให้รหัสนี้ทำงานโดยไม่มีโชค

นี่คือมุมมอง:

@model MvcApplication2.Models.test

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

มุมมองบางส่วน:

@model MvcApplication2.Models.test

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

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

นางแบบ:

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

ตัวควบคุม:

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

และสุดท้ายจาวาสคริปต์:

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

การตรวจสอบความถูกต้องไม่ทำงาน แม้ว่าฉันจะไม่กรอกข้อมูลใด ๆ ในเท็กซ์บ็อกซ์ แต่เหตุการณ์ส่งจะแสดงการแจ้งเตือน ('ถูกต้อง')

อย่างไรก็ตามหากแทนที่จะโหลดมุมมองแบบไดนามิกฉันใช้ @Html.Partial("test", Model)การแสดงผลมุมมองบางส่วนในมุมมองหลัก (และฉันไม่ได้เรียก AJAX) การตรวจสอบความถูกต้องก็ใช้ได้ดี

อาจเป็นเพราะถ้าฉันโหลดเนื้อหาแบบไดนามิกการควบคุมยังไม่มีอยู่ใน DOM แต่ฉันโทรไป $.validator.unobtrusive.parse($("#res")); ซึ่งน่าจะเพียงพอที่จะให้ validator เกี่ยวกับตัวควบคุมที่โหลดใหม่ ...

ใครสามารถช่วย?

หากคุณพยายามแยกวิเคราะห์ฟอร์มที่แยกวิเคราะห์แล้วจะไม่อัปเดต

สิ่งที่คุณสามารถทำได้เมื่อคุณเพิ่มองค์ประกอบแบบไดนามิกลงในแบบฟอร์มคือ

1. คุณสามารถลบการตรวจสอบความถูกต้องของแบบฟอร์มและตรวจสอบความถูกต้องได้เช่นนี้:

   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. เข้าถึงunobtrusiveValidationข้อมูลของแบบฟอร์มโดยใช้dataวิธีjquery :

   $(form).data('unobtrusiveValidation')
   

   จากนั้นเข้าถึงคอลเล็กชันกฎและเพิ่มแอตทริบิวต์องค์ประกอบใหม่ (ซึ่งค่อนข้างซับซ้อน)

คุณยังสามารถอ่านบทความนี้เกี่ยวกับการใช้การตรวจสอบ jquery ที่ไม่สร้างความรำคาญกับเนื้อหาแบบไดนามิกใน ASP.Net MVCสำหรับปลั๊กอินที่ใช้สำหรับการเพิ่มองค์ประกอบแบบไดนามิกลงในฟอร์ม ปลั๊กอินนี้ใช้โซลูชันที่ 2

นอกจากคำตอบของ Nadeem Khedr แล้ว ....

หากคุณโหลดแบบฟอร์มใน DOM ของคุณแบบไดนามิกแล้วโทร

jQuery.validator.unobtrusive.parse(form); 

(ด้วยบิตพิเศษที่กล่าวถึง) จากนั้นจะส่งแบบฟอร์มนั้นโดยใช้ ajax อย่าลืมโทร

$(form).valid()

ซึ่งส่งคืนจริงหรือเท็จ (และเรียกใช้การตรวจสอบความถูกต้องจริง) ก่อนที่คุณจะส่งแบบฟอร์ม

เพิ่มสิ่งนี้ใน _Layout.cshtml ของคุณ

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

น่าแปลกที่เมื่อฉันดูคำถามนี้เอกสาร ASP.NET อย่างเป็นทางการยังไม่มีข้อมูลเกี่ยวกับparse()วิธีการที่ไม่สร้างความรำคาญหรือวิธีใช้กับเนื้อหาแบบไดนามิก ฉันมีอิสระในการสร้างปัญหาที่ repo ของเอกสาร (อ้างอิงคำตอบเดิมของ @ Nadeem) และส่งคำขอดึงเพื่อแก้ไข ตอนนี้ข้อมูลนี้สามารถมองเห็นได้ในส่วนการตรวจสอบฝั่งไคลเอ็นต์ของหัวข้อการตรวจสอบโมเดล

ทดสอบสิ่งนี้:

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

ฉันประสบปัญหาเดียวกันและไม่มีอะไรได้ผลยกเว้นสิ่งนี้:

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

และเพิ่ม

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

ที่คุณพยายามบันทึกแบบฟอร์ม

ฉันกำลังบันทึกแบบฟอร์มผ่าน Ajax call

หวังว่านี่จะช่วยใครบางคนได้

เพียงแค่คัดลอกรหัสนี้อีกครั้งในส่วนท้ายของรหัสโมดอล

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

;)