必填字段验证在 JQuery Popup MVC 4 中不起作用

Posted 2023-05-09

【中文标题】必填字段验证在 JQuery Popup MVC 4 中不起作用

【英文标题】：Required field validations not working in JQuery Popup MVC 4

【发布时间】：2017-06-29 10:14:20

【问题描述】：

我有 JQuery 弹出窗口，我想在其上放置必需的字段验证，为此我在模型中设置了必需的属性，并且还在视图中为它们设置了验证消息，但必需的字段验证不适用于弹出窗口。必填字段验证在 JQuery Popups 以外的表单上运行良好......请指导我应该如何解决这个问题......以下是我的代码。

型号

[Display(Name = "Material Code")]
[Required(ErrorMessage = "*")]
public string MaterialCode  get; set; 

查看

<li>
    @html.LabelFor(m => m.MaterialCode)
    @Html.TextBoxFor(m => m.MaterialCode)
    @Html.HiddenFor(m => m.MaterialCodeId)
</li>

以下是我打开 JQuery 弹出窗口的代码。

$('#btnAddCharge').on('click', function (event)   
        event.preventDefault();
        var actionURL = '@Url.Action("Edit", "Charges", new  Id = 0, @ticketId = @TicketId, UserId = UserId )';

        $(dialogBox).dialog(
            autoOpen: false,
            resizable: false,
            title: 'Edit',
            modal: true,
            show: "blind",
            width: 'auto',
            hide: "blind",
            open: function (event, ui) 
                $(this).load(actionURL, function (html) 
                    $('form', html).submit(function () 
                        $.ajax(
                            url: this.action,
                            type: this.method,
                            data: $(this).serialize(),
                            success: function (res) 
                                if (res.success) 
                                    $(dialogBox).dialog('close');
                                
                            
                        );
                        return false;
                    );
                );
            
        );

        $(dialogBox).dialog('open');
    );

【问题讨论】：

您是否在弹出窗口中动态加载表单（例如使用 ajax？）

@StephenMuecke 是的，我正在使用 ajax

你需要重新解析验证器。您需要展示您的脚本才能给出答案（编辑问题以包含它）。

【参考方案1】：

验证器在页面最初加载时被解析。添加动态内容时，您需要重新解析验证器。修改您的脚本以在加载内容后包含以下行

$(this).load(actionURL, function (html) 
    // Reparse the validator
    var form = $('form');
    form.data('validator', null);
    $.validator.unobtrusive.parse(form);
    $('form', html).submit(function () 
        ....

旁注：您显示的代码不包括@Html.ValidationMessageFor(m => m.MaterialCode)，但我认为这包括在内。

【讨论】：

这个JS代码和这个有什么区别？ ***.com/questions/7839453/…

@markzzz, $("form").removeData("validator"); 在此上下文中与form.data('validator', null); 基本相同。第一个使用.removeData() 删除先前添加的验证器，而第二个使用.data() 将其设置为null。另一个答案中的$("form").removeData("unobtrusiveValidation"); 并不是真正必要的，因为$.validator.unobtrusive.parse(form); 无论如何都会有效地重置它。 （这提醒我，我将在几天前就您的一个问题添加答案:)