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 ie 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.

Answer 1

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"

Answer 2

As suggested by @Vadim, I decorated the star rating controls of my form with data-val="true" data-val-required="Please enter your rating" as in;

<div id="ratingStars">
        <input class="star {split:2}" type="radio" name="Rating" value="0.5" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="1.0" data-val="true"data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="1.5" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="2.0" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="2.5" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="3.0" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="3.5" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="4.0" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="4.5" data-val="true" data-val-required="Please enter your rating"/>
        <input class="star {split:2}" type="radio" name="Rating" value="5.0" data-val="true" data-val-required="Please enter your rating"/>
    </div>
    <span data-valmsg-replace="true" data-valmsg-for="Rating" class="field-validation-valid" style="display:block; width:80px"></span>

I dont need a custom validator I think as the jquery default 'required' validator will do fine. This kinda works. However, the 1st time I click submit I get the exact result Im hoping for;

If I then select a rating and click submit again (without, say, inputting an email) the form just 'disappears' from view and my controller is not hit.

If I replace the radio buttons with a plain text box instead to accept the rating;

<input type="text" name="Rating" id="Rating" data-val-required="Please enter your rating" data-val="true" class="text-box single-line"/>

it works great and my controller is hit when I click submit. Text box no good for the rating though unfortunately.