Mixing asp mvc3 unobtrusive validation with jquery validation plugin

Question

For asp mvc3 client side validation, is it possible to mix the default, out of the box unobtrusive style with the jquery validation plugin?

This is the form in the view :

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "newRatingForm" }))
{   
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Rating</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Rate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Rate)
            @Html.ValidationMessageFor(model => model.Rate)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Unobtusive works great by default using the usual validation attributes on the properties of the model . The goal is to replace the 'model.Rate' bits in the form with [fyneworks][1] jquery star rating plugin and use the jquery validation plugin just for that part of the form:

<span>Your Rating:</span>
<div id="ratingStars">
    <input class="star {split:2}" type="radio" name="Rating" value="0.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="1.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="1.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="2.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="2.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="3.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="3.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="4.0"/>
    <input class="star {split:2}" type="radio" name="Rating" value="4.5"/>
    <input class="star {split:2}" type="radio" name="Rating" value="5.0"/>
</div>

I've hijacked the submit action for the form and converted form values to Json to do an ajax request with :

$("#newRatingForm").submit(function (event) {
    event.preventDefault();

    if ($(this).valid()) {        
        newRatingSubmit();
    }    
}); 

function newRatingSubmit() {
    //jquery ajax request using form values converted to Json
}

Radio buttons seem to break the form and the hijack code no longer works i.e. when I click submit, no request is made to server (watching on firebug console) and the form just disappears. Again, it all works fine with just plain mvc3 form.

I tried adding a jquery validation rule for the rating radio buttons but didn't seem to make any difference :

$("#newRatingForm").validate({
    meta: "validate", 
    errorLabelContainer: "#ErrorDiv",
    wrapper: "div",
    rules:
    {
        Rating: {
            required: true
        }
    },

    messages:
    {
        Rating: {
            required: 'A Rating required.'
        }
    },

    onfocusout: false,
    onkeyup: false,

    //handle validation ok, POST submit
    submitHandler: function (label) {
        newRatingSubmit();
    }
 });

As an alternative I can validate a standard html form using the star rating plugin using the jquery validation plugin and submit that with the above code but that doesnt seem very 'asp.net mvc'. For example I then need 2 sets of validation messages - 1 for the server using validation attributes and another for the client view.

Vadim Lozinskiy Vadim Lozinskiy · Accepted Answer · 2011-04-29T07:05:31

jQuery.validator.addMethod("methodeName", function (value, element, params) {
        if (somthing) {
            return false;
        }
        return true;
    });

    jQuery.validator.unobtrusive.adapters.addBool("methodeName");

and in html add 2 attributes

dal-val = true and dal-val-methodeName="errorMessage"

Mixing asp mvc3 unobtrusive validation with jquery validation plugin

2 Answers