Date problem with globalize.js and jquery.validation.globalize.js. How to solve?

Navigation
12

I'm having problems with the date fields of my application.

Followingthisresponse,whichIfoundtobethemostappropriate, Error message in datetime field , I set up my ASP.NET MVC application as follows:

  • I installed the jquery-globalize package via Install-Package jquery-globalize ;

  • I installed the package jquery.validation.globalize via Install-Package jquery.validation.globalize ;

  • IaddedtheWeb.configtabtothelanguage..

    <system.web>...<globalizationuiCulture="pt-BR" culture="pt-BR" enableClientBasedCulture="true"
        requestEncoding="UTF-8" responseEncoding="UTF-8" fileEncoding="UTF-8" />
    ...
</system.web>
    •   

    Although the answer indicates to add in <configuration> , the application reported error in the Web.config file and then I got in the <system.web> tag.

  • I set up my BundleConfig.cs :

  • Iorganizedmyscriptsaccordingtotheresponseexample,thusleaving:

    The script with Globalize.culture("pt-BR"); at the end of the image was one last attempt I made.  Jquery.validation.js I load the other views, when I need them, via @section footerSection{ Scripts.Render("~/js/jqueryval"); } .  So my script output looks like this, in debug mode:

  • SoherearethepropertiesofmyViewModelusedtorenderthefields:

    [DataType(DataType.Date)][DisplayName("Data Vencto.")]
[Required(ErrorMessage = "Informe o campo {0}")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime? txtDataVencimento { get; set; }

[DataType(DataType.Date)]
[DisplayName("Data Pagto.")]
[Required(ErrorMessage = "Informe o campo {0}")]
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:dd/MM/yyyy}")]
public DateTime? txtDataPagamento { get; set; }

    I already tested with DataFormatString = "{0:yyyy-MM-dd}" , but it also did not work.

  • Razor: 

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

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

    • Then I ask you for help: What may still be missing or wrong?

    EDITION

    According to the response from Cigano Morrison , the order of my scripts should be different and I applied the Bundle accordingly. 

    var bundle = new ScriptBundle("~/js/jqueryval") { Orderer = new AsIsBundleOrderer() };
bundle
    .Include("~/Static/js/jquery.validate.js")
    .Include("~/Static/js/jquery.validate.unobstrusive.js")
    .Include("~/Static/js/globalize/globalize.js")
    .Include("~/Static/js/jquery.validate.globalize.js");
bundles.Add(bundle);

    With this my scripts were in the order indicated:

    However,theerrorstillremains,butdisplayingamessageinEnglish:" Please enter a valid date. "

    Thatwasinbold,black.

    EDITION

    Wheneditingmybundlestomakethemlooklikethis:

    publicstaticvoidRegisterBundles(BundleCollectionbundles){bundles.Add(newScriptBundle("~/js/jquery").Include(
        "~/Static/js/jquery-{version}.js",
        "~/Static/js/jquery.plugin.js"));

    bundles.Add(new ScriptBundle("~/js/jqueryval").Include(
        "~/Static/js/jquery.validate.js",
        "~/Static/js/jquery.validate.unobtrusive.js",
        "~/Static/js/globalize/globalize.js",
        "~/Static/js/jquery.validate.globalize.js"));

    bundles.Add(new ScriptBundle("~/js/bootstrap").Include(
        "~/Static/js/bootstrap.js"));


    bundles.Add(new StyleBundle("~/Static/css/styles").Include(
        "~/Static/css/bootstrap.css",
        "~/Static/css/site.css"));
}

    And with the default sort order made by BundleConfig, my scripts were in that order:

    Datevalidationhaspassed,butvaluehasgoneawry:

        
    asked by anonymous 28.04.2015 / 15:48

    1 answer

    14

    This is not a simple problem (it actually consumed me the effort of one night to find out). The problem is the order of the js that needs to be respected:

  • jquery.validate.js ;
  • jquery.validate.unobstrusive.js ;
  • globalize/globalize.js ;
  • jquery.validate.globalize.js .

    • Except the default implementation of ScriptBundle reorders even with the specified order correctly in Bundle .

    The way to implement Bundle is in order: 

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

    And then: 

            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.unobstrusive.js")
            .Include("~/Scripts/globalize/globalize.js")
            .Include("~/Scripts/jquery.validate.globalize.js");
        bundles.Add(bundle);

    EDIT

    In the case of numbers, you need to work a bit on the numeric validator, which for some reason is not accepting a comma: 

    // Esta parte pode ser colocada em um script da aplicação e juntado ao Bundle
jQuery.validator.addMethod("mynumber", function (value, element) {
    return this.optional(element) || /^(\d+|\d+,\d{1,2})$/.test(value);
}, "O campo " + element + " deve ser um número.");

// Esta parte é para cada form
$("#meuForm").validate({
    rules: {
        field: {
            required: true,
            mynumber: true
        }
    }
});

    Or as the questioner suggested, use the example of Cleyton Ferrari , which is more or less the same thing. / p>     

    28.04.2015 / 16:12
    What does% = mean? Turn HTML into PDF