Question

我在这个问题上找到了一些主题，但它们都不符合我的需要，或解决了我的问题。所以这是在主页上：

<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()) {

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

Answer 1

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

也确保

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

这些密钥存在于Web配置中。并且在加载表单之前加载了所有必需的脚本。

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

Answer 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");
    }
});

模态弹出窗口上的Jquery验证

2 个答案: