How to make a field required without data annotation

Question

I am using the MvcContrib Grid to display a table on the page. I am using a custom column to produce a checkbox on the table so that the user can select multiple rows and submit the form.

I don't want the form to submit unless at least one checkbox has been selected. I could easily write this Javascript myself to enforce the validation, but I wanted to know how I could fit it in with the unobtrusive library supplied with MVC3.

I imagine I just need to set my inputs with the proper classes and attributes and then the scripts (validate and validate.unobtrusive) on the page should pick them up and mark them as needing validation, but I haven't been able to get the right combination thus far.

Here is the input that I am currently generating:

<input type="checkbox" 
       name="foo" 
       value="@item.foo" 
       class="input-validation-error" 
       data-val-required="Please select an option." 
       data-val="true" />

Answer 1

Try setting the data-val attributes on the item, then you have to tell jQuery you have new content to re-parse the form via something like:

 $.validator.unobtrusive.parse($('#yourForm'));

where form is of course a reference to your form element.

There is also this great posting and jQuery has a few internal adapters you can call: from http://www.devtrends.co.uk/blog/the-complete-guide-to-validation-in-asp.net-mvc-3-part-2

jQuery.validator.unobtrusive.adapters.addSingleVal("notequalto", "otherproperty", "mynotequaltofunction")

Answer 2

From my experience, a commonly overlooked mistake with displaying client-side validation is putting a Html.ValidationMessageFor(lambda) on the page.

Without that, no client-side validation will fire to prevent the form submit and/or display the message that is generated using annotations on the client-side.

Hope this helps.

Answer 3

<div class="editor-field">
    <input class="text-box single-line" 
    data-val="true" data-val-number="The field Qty Available must be a number." 
    data-val-range="The field Qty Available must be between 0 and 120." 
    data-val-range-max="120" data-val-range-min="0" 
    data-val-required="The Qty Available field is required." 
    id="QtyOnHand" name="QtyOnHand" type="text" value="12" />
    <span class="field-validation-valid" data-valmsg-for="QtyOnHand" 
          data-valmsg-replace="true"></span>
</div>

The tie-in between the data model annotations and the data-val-* attributes should be clear after reading the above code, but it's where the client side validation ties in might not be so obvious. Open the \Scripts\jquery.validate.unobtrusive.js file and search for "data-val". Right away you'll see that the JavaScript uses the data-val-, input- and field-* CSS classes to display/hide validation messages on the client.

The above is taken from this great article, which you might want to read in full.