Help implementing jqueryval with ASP.NET MVC

I'm having trouble getting jqueryval working with my ASP.NET MVC page.  In my MODEL I have a required field called EventName.  I use DataAnnotations to define that it is required.

If you look at my VIEW page I have two very different version of textboxes.  The first one uses the HTML Helper class to create a textbox.  The other one is straight up HTML code (copy and pasted from the jqueryval documentation page.)

The HTML Helper textbox does not fire the invalidHandler function at all when I leave the textbox blank.  

The straight up HTML textbox however does fire.  

What do I need to do in order to get my HTML Helper Class textbox to validate using jqueryval?

Here is my code:

VIEW:

@model AnotherFrontEnd.Models.SystemEventInfo

@{
    ViewBag.Title = "EventGeneralInfo";
}

<h2>EventGeneralInfo</h2>


<form id="eventInfo" name="eventInfo" method="get" action="">
    <fieldset>

        <div>
            @Html.LabelFor(model => model.EventName, new { @class = "mdl-textfield__label" })
            @Html.TextBoxFor(model => model.EventName, new { @class = "mdl-textfield__input" })
            @Html.ValidationMessageFor(model => model.EventName, "", new { @class = "mdl-textfield__error is-invalid" })
        </div>

        <div>
            <label for="cname">Name (required, at least 2 characters)</label><br />
            <input id="cname" name="name" minlength="2" type="text" required>
        </div>

        <button class="btn btn-primary">Save Event</button>

    </fieldset>
</form>


@section scripts
{
    @Scripts.Render("~/bundles/jqueryval")

    <script>

        $("#eventInfo").validate({
            invalidHandler: function (event, validator) {
                // 'this' refers to the form
                var errors = validator.numberOfInvalids();

                if (errors) {
                    alert("There were validation errors!")
                } else {
                    alert("This form is valid!!");
                }
            }
        });

    </script> 
}

Select allOpen in new window

MODEL

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace AnotherFrontEnd.Models
{
    public class SystemEventInfo
    {
        public int Id { get; set; }

        [Required]
        public string EventId { get; set; }

        [Required]
        public string EventName { get; set; }

        [Required]
        public DateTime StartDate { get; set; }

        [Required]
        public DateTime EndDate { get; set; }
    }
}

Select allOpen in new window