模态弹出窗口上的 Jquery 验证答案

【问题标题】：Jquery validation on modal popup模态弹出窗口上的 Jquery 验证
【发布时间】：2013-09-05 11:02:47
【问题描述】：

我找到了一些关于这个问题的主题，但没有一个适合我的需求，或者解决我的问题。所以这是主页上的：

<div id="contentDiv">
    <div style="margin-top: -31px;">
        <form>
            <table class="tableFormLayout" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <input type="button" id="openOrderItemAddPopup" value="Add" />
                    </td>
                </tr>
            </table>    
            @Html.Partial("~/Views/Orders/OrderItemAddPopup.cshtml", Model)            
        </form> 
    </div>
</div>

在弹出窗口中：

@model MvcAppMobileJQuery.ViewModels.OrderVM

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

<div data-role="none" id="OrderItemAddPopup" data-overlay-theme="b" style="width: 500px;"
    class="ui-corner-all">
    <div data-role="content">

        @Html.ValidationSummary()
        <form id="#orderitemsform">
            <table class="tableFormLayout" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        @Html.LabelFor(m => m.Quantity, new {@class = "label"})
                    </td>
                    <td>
                        @Html.TextBoxFor(m => m.Quantity, new {data_mini = "true", type = "number", id = "txtQuantity"})
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="button" id="load" data-inline="true" value="Save" data-icon="forward"/>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
<script type="text/javascript">

    $('#load').click(function () {
        $('#orderitemsform').validate();

        if ($('#orderitemsform').valid()) {
            alert("valid");
        }
        else {
            alert("invalid");
        }
    });

    $(function () {
        $('#OrderItemAddPopup').modalPopLite({ openButton: '#openOrderItemAddPopup', closeButton: '#closeOrderItemAddPopup', isModal: true });
    });
</script>

还有视图模型：

public class OrderVM
{
    [DisplayName("Quantiy")]
    [Required(ErrorMessage = "Quantity is required")]
    [RegularExpression("^[1-9]\\d*$", ErrorMessage = "Quantity must be positive")]
    public int Quantity { get; set; }
}

问题是我在控制台报错：Uncaught TypeError: Cannot read property 'form' of undefined

如果我改变这个：

$("#orderitemsform").validate();
if ($("#orderitemsform").valid()) {

到这里：

$('form').validate();
if ($('form').valid()) {

它可以工作，但它也会验证主窗口上的表单，我现在不想要。

【问题讨论】：

为什么要在主页面使用form标签？
@Sharun 我在一个更大的项目中遇到了这个问题，这些只是我在一个虚拟项目中为了重现问题而拼凑的一些部分。我实际上在我的项目中使用了@Html.BeginForm(smth...)，但我这样做是为了尽可能准确地重现它。
你真的需要把第二个表单放在主表单里面吗？
并尝试将@Html.ValidationSummary() 移动到表单标签内部
好的。所以正如我所说，您不需要在主窗体中包含第二个窗体。尝试将 `@Html.Partial("~/Views/Orders/OrderItemAddPopup.cshtml", Model)` 放在主窗体之外

标签： jquery jquery-mobile jquery-validate unobtrusive-validation

【解决方案1】：

将表单最后的按钮更改为输入类型Submit，因为在尝试提交表单时会触发不显眼的验证。

还要确保

    <add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

这些键存在于网络配置中。并在加载表单之前加载所有必需的脚本。

检查捆绑包 @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 已渲染。

【讨论】：

正如上面 cmets 中所讨论的，我不提交该表格。

【解决方案2】：

问题解决了：

<div id="contentDiv">
    <div style="margin-top: -31px;">
        <form>
            <table class="tableFormLayout" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <input type="button" id="openOrderItemAddPopup" value="Add" />
                    </td>
                </tr>
            </table>
        </form>
        <div id="mydiv">
            @Html.Partial("~/Views/Orders/OrderItemAddPopup.cshtml", Model)
        </div>
    </div>
</div>

在弹出窗口内：

 <form id="#orderitemsform">
        @Html.ValidationSummary()
        <table class="tableFormLayout" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    @Html.LabelFor(m => m.Quantity, new {@class = "label"})
                </td>
                <td>
                    @Html.TextBoxFor(m => m.Quantity, new {data_mini = "true", type = "number", id = "txtQuantity"})
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" id="load" data-inline="true" value="Save" data-icon="forward"/>
                </td>
            </tr>
        </table>
    </form>

和脚本：

$('#load').click(function () {
    $("#mydiv form").validate(); if ($("#mydiv form").valid()) {
        alert("valid");
    }
    else {
        alert("invalid");
    }
});

【讨论】：