Datetime field error message

Question

I have a field in my application in mvc Asp.net c# to put start date and end date.

    [Required(ErrorMessage = "A data de início é obrigatória")]
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime DataInicio { get; set; }

However, while the user is typing the date appears below the field a message in red:

The field must be a date.

I didn’t implement this, I don’t know where it comes from. Does anyone know how to disappear with this alert?

View

@model Competências.Models.Experiencia

@Scripts.Render("~/bundles/validation")

@using (Ajax.BeginForm(new AjaxOptions
                {
                    InsertionMode = InsertionMode.Replace,
                    HttpMethod = "POST"
                }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)

<div class="modal-body row">
    <div class="col-md-7">
     @Html.LabelFor(model => model.Nome)
       @Html.TextBoxFor(model => model.Nome, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Nome)
    </div>
      <div class="col-md-5">
       @Html.LabelFor(model => model.Funcao)
       @Html.TextBoxFor(model => model.Funcao, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.Funcao)
    </div>

</div>
    <div class="modal-body row">

    <div class="col-md-4">
        @Html.LabelFor(model => model.DataInicio)   
        @Html.EditorFor(model => model.DataInicio, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.DataInicio)
    </div> 

    <div class="col-md-4">
        @Html.LabelFor(model => model.DataFinal)       
        @Html.EditorFor(model => model.DataFinal, new { @class = "form-control" })
        @Html.ValidationMessageFor(model => model.DataFinal)
    </div>


    </div>

<div class="modal-footer">

    <input class="btn btn-primary" type="submit" value="Salvar" />
    <a class="btn btn-default" onclick="FechaModal();">Cancelar</a>
</div>


}

Input generated in the browser

<div class="modal-body row">

    <div class="col-md-4">

         <b>Data de Início</b> 
        <input class="text-box single-line" data-val="true" data-val-date="O campo DataInicio deve ser uma data." data-val-required="A data de início é obrigatória" id="DataInicio" name="DataInicio" type="date" value="">
        <span class="field-validation-valid" data-valmsg-for="DataInicio" data-valmsg-replace="true"></span>
    </div> 

    <div class="col-md-4">

        <b>Data Final</b>
        <input class="text-box single-line" data-val="true" data-val-date="O campo DataFinal deve ser uma data." data-val-required="A data de início é obrigatória" id="DataFinal" name="DataFinal" type="datetime" value="">
        <span class="field-validation-valid" data-valmsg-for="DataFinal" data-valmsg-replace="true"></span>
    </div>

    <div class="col-md-3">



</div>

    </div>

Answer 1

The problem is because an ASP.NET MVC project comes configured with the culture en-US by default. This validation message is done by jQuery using Unobtrusive Ajax and Validation, that need to be coupled to a globalization plugin to work properly.

Step 1: Install Globalization Packages

In Visual Studio, go to View > Other Windows > Package Manager Console.

Install the following packages using the commands below:

PM> Install-Package jQuery.Validation.Globalize

PM> Install-Package jquery-globalize

Step 2: Configure Web.config to use settings in English

Add the following to your web.config:

<configuration>
    <globalization uiCulture="pt-BR" culture="pt-BR" enableClientBasedCulture="true" requestEncoding="UTF-8" responseEncoding="UTF-8" fileEncoding="UTF-8" />
</configuration>

pt-PT also works, if it is the desire of the programmer to use the culture in Portuguese of Portugal.

Step 3: Configure Bundles

Check in your file App_start/Bundleconfig.Cs if there are the following registered Bundles:

public class BundleConfig
{
    // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.IgnoreList.Clear();

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery.replace-text.js"));

        var bundle = new ScriptBundle("~/bundles/jqueryval") { Orderer = new AsIsBundleOrderer() };

        bundle
            .Include("~/Scripts/jquery.unobtrusive-ajax.js")
            .Include("~/Scripts/jquery.validate-vsdoc.js")
            .Include("~/Scripts/jquery.validate.js")
            .Include("~/Scripts/jquery.validate.unobtrusive.js")
            .Include("~/Scripts/globalize/globalize.js")
            .Include("~/Scripts/jquery.validate.globalize.js");
        bundles.Add(bundle);
    }
}

Bundles are portions of code that ASP.NET MVC builds for you. In development environment you can read the original sources. When publishing your website, the codes contained within Bundles are automatically minified.

AsIsBundleOrderer is a file sorter for Bundle. It is used because, as I explained here, the inclusion order of the scripts is not respected, and for this case it is necessary to have an appearance order of these scripts. Its implementation is following.

public class AsIsBundleOrderer : IBundleOrderer
{
    public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
        return files;
    }
}

Step 4: Configure View Layout

Make sure these Bundles are in the file Views/Shared/_Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    ...

    <title>@ViewBag.Title - Seu site</title>
    ...

    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryval")
    ...
    @RenderSection("scripts", required: false)
    @Flash.FlashMessage(TempData)
</head>

The places where I put reticences usually have more code. Try to keep the order of Bundles above, because order is fundamental to the functioning of globalization.

So you don’t need to change anything that has been done and the date validations will work normally.

Answer 2

Four solutions:

Removing the Validationmessagefor

In your view, just below yours

@Html.EditorFor(...)

There must be a code like this:

@Html.ValidationMessageFor(model => model.DataInicio)

It is this code that generates the validation you are seeing.

Setting a default value for the field

Now perhaps the solution is not to take this validation, but to treat. One suggestion I give you is to fill this date automatically in your Controller.

Check message after typing date

Have you checked if after typing the whole date the message disappears? It may be that the message is only shown while typing the date.

Translating the Message

Another solution is to translate the message, in this MSDN article Voce can see how to do.

Updating

Try using formatting like this:

[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]

that is, take the ApplyFormatInEditMode = true

Particularly I use only the attribute [DataType(DataType.Date)] do not use the DisplayFormat.

Answer 3

The only thing that worked for my date in format dd/mm/yyyy was:

//Fixes Chrome validation BUG from Date field in dd/mm/yyyy format

//source https://stackoverflow.com/questions/18546971/mvc-4-how-to-validate-a-non-us-date-with-client-validation

jQuery.validator.methods.date = Function (value, element) { Return this.optional(element) || Moment(value, "DD/MM/YYYY", true). isValid(); };

Answer 4

I had a problem like this recently with the Chrome browser and I decided to put this code:

$.validator.addMethod('date',
        function (value, element, params) {
            if (this.optional(element)) {
                return true;
            }

var result = true;
            try{
                $.datepicker.parseDate('dd/mm/yy', value);
            } catch (e) {
                    result = false;
            }

            return result;
        }
)