Question

Using MVC3 Razor, I have a partial view with some text, two text boxes (StartDate & EndDate), a Cancel and a Search button.

When invalid dates are entered into the StartDate and EndDate textboxes, the textboxes highlight red with the unobstrusive decoration the datepicker uses?

I cannot figure out how to require these fields and highlight them red as the invalid data entry does.

Here is my code

<script type="text/javascript">
$(document).ready(function () {
    $('.date').datepicker({ dateFormat: "mm/dd/yy" });

    $("#printnoteform").validate({
        rules: {
            startdate: {
                required: true
            },
            enddate: {
                required: true
            }
        },
        messages: {
            startdate: {
                required: "Required"
            },
            enddate: {
                reqquierd: "Required 2"
            }
        }
    });
});
</script>

The form…

@using (Html.BeginForm("PrintNotes", "Note", FormMethod.Post, new { id = "printnoteform", name = "printnoteform" }))
{
    ......

HTML for StartDate & EndDate

<input type="text" id="startdate" name="startdate" class="date" />
<input type="text" id="enddate" name="enddate" class="date" />

I have no browser errors, StartDate and EndDate are not part of a model and I don’t want to make one if I don’t have to. Web.config is setup properly.

What am I missing?

Answer 1

You have two mutually exclusive possibilities:

1. Use jquery unobtrusive
2. Manually hook up the validation rules of the form

If you want to use jquery unobtrusive you shouldn’t be manually adding any .validate rules to your form (as you did). This is done automatically by the jquery unobtrusive script. Of course for it to be able to do it your input fields should be decorated with HTML5 data-* attributes in order to indicate the rules and messages to use. For example:

<input class="text-box single-line" data-val="true" data-val-required="The startdate field is required." id="startdate" name="startdate" type="text" value="" />
<input class="text-box single-line" data-val="true" data-val-required="The enddate field is required." id="enddate" name="enddate" type="text" value="" />

Normally this is the output that standard Html helpers such as EditorFor generate when you use a view model and bind to its properties. They use Data Annotations on your view model to infer the validation rules and transpose them as data-* attributes.

The second possibility is to manually hook up the validation rules. In this case you should remove any traces of the jquery unobtrusive script as it will conflict with your .validate rules on the form. It is up to you in this case to define the rules and messages.