0

この問題に関するいくつかのトピックを見つけましたが、どれも私のニーズに合っていないか、問題を解決していません。したがって、これはメインページにあります:

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

それは機能しますが、メイン ウィンドウのフォームも検証しますが、この時点では必要ありません。

4

2 に答える 2