4

私はMVC jqueryモバイルアプリケーションを持っており、ページの1つに日時ピッカーがあり、jqyery.validateで使用すると、ピッカーに検証がないにもかかわらず、クロムでこのエラーが発生します。私は実際に別のコントロールを検証したいと考えています。コードを貼り付けます: メイン ビュー:

@model MvcAppMobileJQuery.ViewModels.OrderVM
@{
    ViewBag.Title = "";
    Layout = "~/Views/Shared/Layouts/_BaseLayout.cshtml";
}
@section Content
{
    <div id="contentDiv">
        <div style="margin-top: -31px;">
            @using (Html.BeginForm("SaveOrder", "Orders"))
            { 
                <table class="tableFormLayout" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            @Html.LabelFor(m => m.OrderDate, new { @class = "ui-input-text" })
                            @Html.TextBox("OrderDate", @Model.OrderDate.ToString("dd MMMM yyyy"), new { data_mini = "true", id = "orderDate" })
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="button" id="openOrderItemAddPopup" value="Add" />
                        </td>
                    </tr>
                </table>    
                @Html.Partial("~/Views/Orders/OrderItemAddPopup.cshtml", Model)            
            }
        </div>
    </div>
}
@section Style
{
    @Styles.Render("~/Content/mobileScrollControlCss")
}
@section Scripts
{
    @Scripts.Render("~/bundles/jquerymobileScrollControl")
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            // create a datepicker with default settings
            $("#orderDate").scroller({
                preset: 'date',
                theme: 'jqm',
                display: 'modal',
                mode: 'mixed',
                //animate: 'pop',
                dateOrder: 'dd mm yy',
                dateFormat: 'd MMMM yyyy'
            });
        });

    </script>
}

これは、メイン ビューから開くポップアップで、検証が含まれています。

@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()
        @using (Html.BeginForm())
        {
            <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">
                        <a noloader="true" href="#" id="closeOrderItemAddPopup" data-role="button" data-inline="true"
                           data-icon="back">Cancel</a>
                        <input type="button" id="load" data-inline="true" value="Save" data-url="@Url.Action("LoadItemsPartial", "Orders")" data-icon="forward"/>
                    </td>
                </tr>
            </table>
        }
    </div>
</div>
<script type="text/javascript">
    $('#load').click(function () {
        $('form').valid();
    });

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

したがって、日付ピッカーをクリックすると、クロムのタイトルからメッセージが表示されます。また、クリックせずにポップアップを開いた場合は、ポップアップデータを保存してみてください。ピッカーから検証を取り出すと、正常に動作します。

4

1 に答える 1

8

この投稿のfretjeの回答のおかげで、なんとか解決できました。

この行も変更する必要がありました。

@Html.TextBox("OrderDate", @Model.OrderDate.ToString("dd MMMM yyyy"), new { data_mini = "true", id = "orderDate" })

に

@Html.TextBox("OrderDate", @Model.OrderDate.ToString("dd-MM-yyyy"), new { data_mini = "true", id = "orderDate" })

スクリプト セクションは次のようになります。

@section Scripts
    {
        @Scripts.Render("~/bundles/jquerymobileScrollControl")
        <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
        <script type="text/javascript">

            $(document).ready(function () {
                // create a datepicker with default settings
                $("#orderDate").scroller({
                    preset: 'date',
                    theme: 'jqm',
                    display: 'modal',
                    mode: 'mixed',
                    //animate: 'pop',
                    dateOrder: 'dd mm yy',
                    dateFormat: 'dd-mm-yy'
                });
            });

            $(function () {
                // Replace the builtin US date validation with UK date validation
                $.validator.addMethod(
                    "date",
                    function (value, element) {
                        var bits = value.match(/([0-9]+)/gi), str;
                        if (!bits)
                            return this.optional(element) || false;
                        str = bits[1] + '/' + bits[0] + '/' + bits[2];
                        return this.optional(element) || !/Invalid|NaN/.test(new Date(str));
                    },
                    ""
                );
            });

        </script>
    }
于 2013-09-04T11:09:07.697 に答える