Question

我有一个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上的标题中获取消息。此外，如果我不单击它，并打开弹出窗口，然后尝试保存弹出数据。如果我从选择器中取出验证，它就可以正常工作。

Answer 1

我已经设法解决了这个问题，感谢fretje在this帖子中的答案。

我还必须改变这一行：

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

未捕获的RangeError：Chrome上的语言标记无效

1 个答案: