Question

I have two email fields on a form to validate that the user entered his email properly. However, jquery.validate.unobtrusive always shows an error message even when the email is entered twice correctly.

This is an ASP.Net MVC 3 project, and I am using the Compare Attribute on the second email field.

Here is the html code of that region on my web page:

<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-length="The field Adresse de courriel must be a string with a maximum length of 50." data-val-length-max="50" data-val-required="L&amp;#39;adresse de courriel doit &amp;#234;tre sp&amp;#233;cifi&amp;#233;e" id="Requerant_Individu_Courriel" name="Requerant.Individu.Courriel" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Requerant.Individu.Courriel" data-valmsg-replace="true"></span>
</div>
<div class="editor-field">
    <input class="text-box single-line" data-val="true" data-val-equalto="Les deux adresses de courriel doivent &amp;#234;tre identiques" data-val-equalto-other="*.Courriel" data-val-required="L&amp;#39;adresse courriel de confirmation doit &amp;#234;tre sp&amp;#233;cifi&amp;#233;e" id="Requerant_Individu_ConfirmCourriel" name="Requerant.Individu.ConfirmCourriel" type="text" value="" />
    <span class="field-validation-valid" data-valmsg-for="Requerant.Individu.ConfirmCourriel" data-valmsg-replace="true"></span>
</div>

I noticed this attribute on the second email input: data-val-equalto-other=”*.Courriel”
I am wondering whether that asterisk is correct.

And here is what I have in my model:

    [Required(ErrorMessage = "L'adresse de courriel doit être spécifiée")]
    [StringLength(50)]
    [Display(Name = "Adresse de courriel")]
    public String Courriel { get; set; }

    [Compare("Courriel", ErrorMessage = "Les deux adresses de courriel doivent être identiques")]
    [Required(ErrorMessage = "L'adresse courriel de confirmation doit être spécifiée")]
    [Display(Name = "Retapez votre adresse de courriel")]
    public string ConfirmCourriel { get; set; }

Anyone has ever encountered that problem? Suggestions?

Note: I am using jQuery 1.6.3 and jQuery Validation Plugin 1.8.1

Answer 1

I finally found the answer to my problem on this post:

JQuery 1.5 breaks Compare Validate (JQuery Validate 1.8)

In file jquery.validate.unobtrusive.js, line 288:

element = $(options.form).find(":input[name=" + fullOtherName + "]")[0];

has to be replaced with this code:

element = $(options.form).find(":input[name='" + fullOtherName.replace(".", "\\.").replace("[", "\\[").replace("]", "\\]") + "']")[0];

Same thing for line 309:

return $(options.form).find(":input[name='" + paramName + "']").val();

which has to be replaced by:

return $(options.form).find(":input[name='" + paramName.replace(".", "\\.").replace("[", "\\[").replace("]", "\\]") + "']").val();