Uncaught RangeError: Invalid language tag on Chrome

Question

I have an MVC jquery mobile application, and on one of the pages I have a datetime picker that when I use with jqyery.validate gives this error on chrome, even though I don't have any validation on the picker. I actually want to validate another control. I will paste the code: The main view:

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

And this is the popup that opens from the main view, and that contains the validation:

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

So when I click on the date picker I get the message from the title on chrome. Also if I don't click it, and open the popup, then try to save the popup data. If I take out the validations from the picker, it works fine.

Answer 1

I have managed to solve it, thanks to fretje's answer in this post.

I also had to change this line:

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

to

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

and the scripts section looks now like this:

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