jquery validation plugin not working with unobtrusive js reference

Question

I have a MVC4 project that is using unobtrusive validation, but for one section I am using knockoutjs.

I have setup knockout to use the jquery validation plugin, but when I call $("form").valid() it is not behaving as expected.

I have knockout rendering a table within the form that will have a few rows to validate. The first row of the table shouldl be ignored in validation and is being used to add new objects to the list. I have given each object in this first row a class of "firstRow"

I have setup the validator as such

var validator = $("form").validate({
                ignore: ".firstRow"
            });

but when I call

$("form").valid()

I notice that all element that are invalid (including the first row) are having the class "input-validation-error" added to them.

Firstly I would expect that this first row would be ignored.

Secondly I would not expect this class to be applied as this is unobtrusive validation doing this. I would expect the class "error" to be applied instead out of jquery validation plugin.

When I exclude the reference to jquery.validation.unobtrusive.js then everything works, but I cannot do this as it's needed for the rest of the site.

I think this is the code being executed somehow from jquery.validation.unobtrusive but I would like to know how to stop this from executing?

function validationInfo(form) {
    var $form = $(form),
        result = $form.data(data_validation),
        onResetProxy = $.proxy(onReset, form);

    if (!result) {
        result = {
            options: {  // options structure passed to jQuery Validate's validate() method
                errorClass: "input-validation-error",
                errorElement: "span",
                errorPlacement: $.proxy(onError, form),
                invalidHandler: $.proxy(onErrors, form),
                messages: {},
                rules: {},
                success: $.proxy(onSuccess, form)
            },
            attachValidation: function () {
                $form
                    .unbind("reset." + data_validation, onResetProxy)
                    .bind("reset." + data_validation, onResetProxy)
                    .validate(this.options);
            },
            validate: function () {  // a validation function that is called by unobtrusive Ajax
                $form.validate();
                return $form.valid();
            }
        };
        $form.data(data_validation, result);
    }

    return result;
}

Have you looked into [Knockout-Validation](http://stackoverflow.com/questions/8996449/knockout-validation)? — nwayve, Sep 17 '13 at 11:14
I haven't yet as the examples on the knockoutjs page were using jquery validator. — Ryan Dobbs, Sep 17 '13 at 15:38

score 0 · Answer 1 · answered Sep 19 '13 at 15:26

I ended up splitting up the bundles and putting jquery.validator files together and the unobtrusive files in another bundle.

Then in my layout file I used Viewbag to check to see if the bundle for the unobtrusive files should be included.

By default it will include then unless Viewbag.ExcludeUnobtrusive == true, which will be set in the pages that I do not want unobtrusive script references.

Layout file

@{
var includeUnobtrusive = ViewBag.ExcludeUnObtrusive == null || ViewBag.ExcludeUnObtrusive   == false;
}
....
....
 @if (includeUnobtrusive)
{
    @Scripts.Render("~/bundles/jqueryunobtrusive")
}

jquery validation plugin not working with unobtrusive js reference

1 Answers1