Validation won't work with multi level models about jquery.validation.unobtrusive.native HOT 3 OPEN

Hi Marc,

Could you provide a more detailed reproduction of the issue please? I don't fully understand the problem at present. If you could put up a GitHub repo that demonstrated the issue that would be helpful.

Best,
John

from jquery.validation.unobtrusive.native.

Hi

I created a new MVC project to show the issue.
Here's the GitHub repo https://github.com/mmefriantine/jqueryvalidationissue7/tree/master/ValidationIssue

I edited Register.cshtml and AccountViewModel.cs to add

public class RegisterViewModelLevel2
    {
        [Required]
        [Display(Name = "User name")]
        public string UserName { get; set; }

        [Required]
        [StringLength(100, ErrorMessage = "The {0} must be at least {2} characters long.",     MinimumLength = 6)]
        [DataType(DataType.Password)]
        [Display(Name = "Password")]
        public string Password { get; set; }

        [DataType(DataType.Password)]
        [Display(Name = "Confirm password")]
        [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
        public string ConfirmPassword { get; set; }
    }
    public class RegisterViewModel
    {
        public RegisterViewModelLevel2 model { get; set; }
    }

If you try to register, you see that even if the passwords match, you have an error. This behavior doesn't happen when you use the default validation by setting the control to false.

Please let me know if you have any questions.

Thank you
Marc

from jquery.validation.unobtrusive.native.

Hi Marc,

I've taken a look and I see the problem. It only affects the Compare / equalTo validation. As far as I'm aware all other types of validation work fine in the nested scenario.

The issue comes down to this line of code:

var equalToSelector = "#" + rule.ValidationParameters["other"].ToString().Substring(2);

This essentially takes the equalTo selector and converts it from the "*.PasswordDemo" style to "#PasswordDemo" style. The underlying assumption for this selector is that the id of the comparison element shares the same name as the "PasswordDemo" portion that comes from the ASP.Net validator code. This is true most of the time - ie when the model is not nested.

However, as you've identified this falls over when you come to nested models.

So what to do?

I've come up with a possibility and I'm not sure if it's a good idea or not at the moment. It would involve replacing the line of code mentioned above with this line instead:

equalToSelector = "[name$='" + rule.ValidationParameters["other"].ToString().Substring(2) + "']"

This would create an name-ends-with-selector which would look something like this:

data-rule-equalto="[name$='PasswordDemo']"

This would try and select the other element using the name. It would pick up any element which ended with (in this example) "PasswordDemo". So it works for your use case. (I've tried it out.) Where it would be a problem is if you had multiple elements on the screen with names that ended with "PasswordDemo". This is unlikely but it's possible.

An alternative is that I could also step in here and implement a JavaScript solution which was more robust. However, one thing I'm pretty committed to with jVUN is not to introduce my own version of jquery.validate.unobtrusive.js. I want people able to use jquery.validate.js in the raw without my own extra bells and whistles in tow.

So I'm not sure if it's a good idea and if it's something I want to implement. Do you have any brighter ideas for ways we could modify the data-rule-equalto selector? I'm open to suggestions.

from jquery.validation.unobtrusive.native.