Why unobtrusive MVC validations are not working in IE7 and IE8?

Question

I have an application in ASP.NET MVC 3 using Razor. I have setup some data annotations on text boxes along with jQuery validation and unobtrusive validation.

The thing is, some fields have custom validation logic using plain old vanilla JavaScript like the following functions.

function Validation() {
    var signUp = SignUpValidation();
    var book = BookingValidation();
    if (signUp && book) {
        return true;
    }
    else 
    {
        ShowErrorMessage();
        return false;
    }
}

function ShowErrorMessage()
{
    $('span#ErrorMessage').html('These fields are required');
}

where SignUpValidation(), BookingValidation() are functions which returns either true or false on basis of some other validation logic.

This is my code for submit button.

@using (Html.BeginForm(MVC.Booking.Actions.AtWork(model: null), FormMethod.Post, 
new {@onsubmit = "return Validation()" }))
{
    @Html.Partial("_BookingView")
}

This approach is working in all browsers except IE-7/8.

Answer 1

I faced the same issue lately .. and worked out the following solution: instead of giving your additional form validation (apart from the unobtrusive mvc 3 validation) as a separate/second submit handler in form "onsubmit" event, you should "inject" your additional validation function in the main unobtrusive validation process of mvc3.. let it take care of the rest.

Create a custom validation adaptor somewhere in your common javascript code/file:

(function ($) {
  if($.validator && $.validator.unobtrusive) { 
    $.validator.unobtrusive.adapters.addBool("AdditionalFormValidation");
  }
} (jQuery));

In your view file, where you have the form, add this code to create a new jquery validator method for the custom validator adaptor that you defined in your common file above:

(function ($) {
        if ($.validator) {
            $.validator.addMethod("AdditionalFormValidation", function (value, element) {
                return Validation();
            });
        }
    } (jQuery));

Here - "AdditionalFormValidation" is the validator method name same as your custom validation adaptor. - "Validation" is the name of your javascript function that takes care of your additional validation and returns a boolean result for validation successs or failure.

In your form, remove the "onsubmit" handler that you had supplied, add a invisible dummy text field to your form and apply the custom unobtrusive validation adaptor/rule that you created, as given below:

@using (Html.BeginForm(MVC.Booking.Actions.AtWork(model: null), FormMethod.Post)) 
{ 
@Html.Partial(MVC.Booking.Views._BookForAtWork) 
<input type="text" style="visibility:hidden; width: 1px; height: 1px;" name="hiddenValidation" id="hiddenValidation" data-val="true" data-val-AdditionalFormValidation />
} 

This solution worked like a charm for me. To me appears a cleaner solution as it injects the additional validation in the same unobtrusive validation flow of mvc3 rather than creating a second validation flow. Also it is inline to future improvement for creating custom data annotation (validations) for all the custom client side validation work.