1

I'm trying to validate an EndDate to be greater than a StartDate using MVC Foolproof Unobtrusive validation.

The problem is that it's using American date format, while my app is supposed to be in European date format. i.e. a period of 03/02 - 02/03 (3 Feb - 2 Mar) is being read as 2 Mar - 3 Feb and thus throwing validation errors.

My model:

    [Required("StartDate")]
    [LessThanOrEqualTo("EndDate", ErrorMessageResourceName = "StartDateLessThanEndDate", ErrorMessageResourceType = typeof(Resources.Resources))]
    [System.ComponentModel.DataAnnotations.DataType(System.ComponentModel.DataAnnotations.DataType.Date)]
    [System.ComponentModel.DataAnnotations.DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime StartDate { get; set; }
    [Required("EndDate")]
    [GreaterThanOrEqualTo("StartDate", ErrorMessageResourceName = "EndDateGreaterThanStartDate", ErrorMessageResourceType = typeof(Resources.Resources))]
    [System.ComponentModel.DataAnnotations.DataType(System.ComponentModel.DataAnnotations.DataType.Date)]
    [System.ComponentModel.DataAnnotations.DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
    public DateTime EndDate { get; set; }

In the .cshtml:

    $('#StartDate, #EndDate').datepicker({
            dateFormat: "dd/mm/yy",
            defaultDate: $(this).val()
        });

-snip-

    <div class="row">
                <label class="col-xs-6">@Resources.StartDate</label>
                <div class="col-xs-6">
                    @Html.TextBoxFor(x => x.StartDate, "{0:dd/MM/yyyy}", new { @class = "form-control" })
                    @Html.ValidationMessageFor(a => a.StartDate)
                </div>
            </div>

I've already done an override on the jQuery validation date parsing as follows, but it seems to have no effect, it's still being compared in American.

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

                    try {
                        $.datepicker.parseDate('dd/mm/yy', value);
                        return true;
                    }
                    catch (err) {
                        return false;
                    }
                });
        }
    });
stevenJ
  • 139
  • 2
  • 8
  • The `$.validator.addMethod('date', ...` function cannot be inside `jQuery(function ($) {` –  Mar 22 '17 at 10:38
  • @Stephen Muecke Should I just remove the encapsulating `jQuery(function ($) {}` block then? (sorry, new to this technology) By the way, the function does appear to be used - if I check $.validator.methods in Javascript console, date method refers to that code. – stevenJ Mar 22 '17 at 10:42
  • Yes, you should remove the `jQuery(function ($) {`. However the issue is that foolproof ignores the `$.validator` and uses its own regex to test dates (your can inspect the `isDate()` function in the [source code](http://foolproof.codeplex.com/SourceControl/latest#Foolproof/Client%20Scripts/mvcfoolproof.unobtrusive.js) and that function only returns `true` for a date in `MM/dd/yyyy` format. I think your only option is to write your own custom conditional attributes. –  Mar 22 '17 at 11:25
  • source code mentioned in @StephenMuecke's comment is [now on github](https://github.com/leniel/foolproof/blob/master/Foolproof/Client%20Scripts/mvcfoolproof.unobtrusive.js) – Eonasdan Aug 23 '17 at 20:46

0 Answers0