4

我有一个 MVC jquery 移动应用程序，并且在其中一个页面上我有一个日期时间选择器，当我与 jqyery.validate 一起使用时，它会在 chrome 上出现此错误，即使我没有对选择器进行任何验证。我实际上想验证另一个控件。我将粘贴代码： 主视图：

@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>

因此，当我单击日期选择器时，我会从 chrome 上的标题中收到消息。此外，如果我不单击它并打开弹出窗口，然后尝试保存弹出数据。如果我从选择器中取出验证，它工作正常。

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 回答