MVC Razor View with jQuery validation not validating empty fields

Question

I have form built from a MVC model with a variety of validation requirements. If I enter the field and input an incorrect value (doesn't match regular expression or meet minimum length) the validation works just fine.

What it's not doing is validating the required fields that are left empty

Here's an excerpt of my model:

public partial class Order
{
    public int Id { get; set; }
    [Required]
    [Display(Name = "Name")]
    public string ContactName { get; set; }
    [Required]
    [RegularExpression(@"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$", ErrorMessage = "Not a valid phone number")]
    [Display(Name = "Phone")]
    public string ContactPhone { get; set; }
    [Display(Name="Email")]
    [Required(ErrorMessage = "Email is required")]
    [DataType(DataType.EmailAddress)]
    [EmailAddress]
    public string ContactEmail { get; set; }
}

When I run $("#OrderForm").validate().form() it returns true when required fields are blank.

Here is the generated markup:

<form action="/Order/SubmitOrder" id="OrderForm" method="post">
<table width="400">
    <tr>
        <th colspan="2">Contact Information</th>
    </tr>
    <tr>
        <td><label for="OrderInfo_ContactName">Name</label></td>
        <td><input class="text-box single-line" data-val="true" data-val-required="The Name field is required." id="OrderInfo_ContactName" name="OrderInfo.ContactName" type="text" value="" /></td>
    </tr>
    <tr>
        <td><label for="OrderInfo_ContactEmail">Email</label></td>
        <td><input class="text-box single-line" data-val="true" data-val-email="The Email field is not a valid e-mail address." data-val-required="Email is required" id="OrderInfo_ContactEmail" name="OrderInfo.ContactEmail" type="email" value="" /></td>
    </tr>
</table>
<input id="ordersubmit" type="submit" value="Submit" />
</form>

Here are my script tags:

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui-1.10.4.custom.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/order.js"></script>

What am I missing?

Answer 1

I was initializing the validator in document.ready with

$(document).ready(function () {
    $("#OrderForm").removeAttr("novalidate");
    $("#OrderForm").validate({ ignore: [] });
});

Previously, a "novalidate" attribute was being added to my form. I'm not sure why. Once I removed those 2 lines it works as expected. I'm not sure why that is, it just is.

Thank you for input.

Answer 2

This works out of the box for me but only when I've remember to include the bundle that includes all the unobtrusive and validation scripts. In a modern ASP.NET MVC there is a bundle called ~/bundles/jqueryval which is defined as:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

Make sure you include it either in your view or in your layout.