MVC 5 - JQuery Validation to dd/mm/yyyyy

Question

I have a MVC 5 application that uses an entity framework SQL Server Model. I built it using the template in Visual Studio.

The page works fine, however the date validation is driving me spare.

The validation will only let me add in a date if it is backwards e.g. yyyy/mm/dd or in american. I have added the uk culture to the webconfig, but this has not helped. Is there a way to override the jquery with a the uk format and where would I put it in my code?

My apologies, am totally new to asp mvc and razor.

My code is below:

@model messageBoard.Models.tblMessage

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>


@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>tblMessage</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.MessageID)

        <div class="form-group">
            @Html.LabelFor(model => model.Sender, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Sender, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Sender, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Receiver, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Receiver, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Receiver, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.YearGroup, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.YearGroup, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.YearGroup, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Expiry, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Expiry, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Expiry, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Message, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

You need to change the culture on your server to one that accepts dates in `dd/MM/yyyy` format (e.g in the `web.config` file) — , Dec 19 '17 at 22:33
"I know that sql server stores the date in this format". No, it doesn't, it uses an internal representation which has nothing to do with any human-readable formats. Also, validation rules are in MVC, nothing to do with SQL. — ADyson, Dec 19 '17 at 22:45
I agree this is all to do with MVC validation and nothing to do with SQL. Anyway can you expand on "The validation will only let me add in a date' - what are you doing and what happens? (what message do you see) — Nick.Mc, Dec 20 '17 at 03:03
My fault about the poor question, sorry am new to MVC. Basically I believe it the is jquery validation that is stopping my put in a date in UK format dd/mm/yyyy. However I have no idea how to change this. I added this line to the webconfig . However it did not help. Any other ideas? — Ross McKenzie, Dec 20 '17 at 07:37
By default, jquery.validate.js` validates based on `MM/dd/yyyy` format. If you want to enter dates in `dd/MM/yyyy` format and have (say) 30/12/2017 as a valide date, then you need to reconfigure the validator. — , Dec 20 '17 at 11:15
Refer [this answer](https://stackoverflow.com/questions/30594128/error-in-date-validation-mvc/30609111#30609111) for an example — , Dec 20 '17 at 11:20
Thankyou Stephen! I used the code from the your answer you linked to. On that answer it appeared to miss the validation text e.g. "This is and error" and the closing parenthesis. I also had to move add a link to jquery as for some reason the default setup did not include this on the page. Once I did this it all worked beautifully. Many thanks again, your support really helped a novice understand MVC and JQuery a little better! — Ross McKenzie, Dec 20 '17 at 19:39
@RossMcKenzie, Sorry, I do not understand what you man by _missing the validation text_. That comes automatically from the validation attribute you apply to the property, e.g. `[Required(ErrorMessage = "Please enter a valid date")]public DateTime Date { get; set; }`. The script is not responsible for that. — , Dec 21 '17 at 02:15

score 0 · Answer 1 · answered Dec 20 '17 at 18:26

You can use jQuery to reconfigure the validator to use the current culture set in the application like below.

$.validator.addMethod('date', function (value, element) {
        var d = new Date();
        return this.optional(element) || !/Invalid|NaN/.test(
        new Date(d.toLocaleDateString(value)));
});

This method will have to be on the page that you have the date input field.

MVC 5 - JQuery Validation to dd/mm/yyyyy

1 Answers1