ASP.NET MVC Unobtrusive validation not working on IE9 - asp.net-mvc

Question

I am working on code written by someone else.
Its a Reset Password form. The current client side validation works on most browsers including IE 10 and IE 11. On IE 9 the Confirm Password does not match error keeps getting displayed even though I am sure I am typing the exact same thing in both fields.
The code:
<div class="form-group">
<div class="input-group input-phone">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" id="Password" name="Password" class="form-control input-lg default-focus" data-val="true" data-val-required="Password is required." placeholder="Password" autocomplete="off">
</div>
<div class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></div>
</div>
<div class="form-group form-group-login-bottom">
<div class="input-group input-pin">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input type="password" id="ConfirmPassword" name="ConfirmPassword" class="form-control input-lg" data-val="true" data-val-equalto="Confirm Password does not match." data-val-equalto-other="*.Password" placeholder="Confirm Password" autocomplete="off">
</div>
<div class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></div>
</div>
I searched a lot yesterday but none of the solution seems to work.
I tried: updating the jquery.validate.js and jquery.validate.unobtrusive.js files.
I tried debugging, in the jquery.validate.js file, this snippet,
// http://docs.jquery.com/Plugins/Validation/Methods/equalTo
equalTo: function( value, element, param ) {
// bind to the blur event of the target in order to revalidate whenever the target field is updated
// TODO find a way to bind the event just once, avoiding the unbind-rebind overhead
var target = $(param);
if ( this.settings.onfocusout ) {
target.unbind(".validate-equalTo").bind("blur.validate-equalTo", function() {
$(element).valid();
});
}
return value === target.val();
},
target is the input field with id Password. On IE 10 and IE 11, alerting target.val()
returns the correct value of type in. On IE 9 it returns empty. Cannot figure out why it does not work on IE 9 specifically. Any suggestions would be helpful.

Answer 1

What versions of jQuery, jQuery validate and ASP MVC are you using?
I just created a fiddle using your html and including the latest versions of those libraries (jquery 2.1.0, validate 1.13 and validate-unobtrusive from MVC 5). I verified the validation works on IE9 (Mine is version 9.0.8112.16421)
However I have found this issue which means you may find this error in IE9 with incorrect html on your page. You could make sure you don´t have any open tags (like a <p> without its corresponding </p>). For example if in the fiddle you just add a <p> right before the <form> the validation stops working in IE9 but not in Firefox. (See this updated fiddle that doesn´t work on IE9)
In case this doesn´t help, I would check the library versions and any other library that you might be loading in your page that could interfere (If you could replicate your issue in a fiddle that would be great!). If nothing helps, you can try removing the validate-unobtrusive library from the fiddle (it is added on external references) and uncomment the JS code to manually use the validation plugin. At least that would let you find out if the issue is related with jquery.validate or with Microsoft´s jquery.validate-unobtrusive:
//This is commented in the fiddle. Only uncomment to try jquery.validate without jquery.validate-unobtrusive
$(document).ready(function () {
$("#testForm").validate({
debug: false,
rules: {
Password: {
required: true
},
ConfirmPassword: {
required: true,
equalTo: "#Password"
}
},
submitHandler: function (form) {
// just for the fiddle demo
alert('valid form submitted');
return false;
}
});
});