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> 
}

Open 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; }
    }
}

Open in new window

Lynn CurtDeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

zephyr_hex (Megan)DeveloperCommented:
You can add a required attribute.

@Html.TextBoxFor(model => model.EventName, new { @class = "mdl-textfield__input", required = "required" })

Open in new window


This will render the HTML with the required attribute on the textbox.

jqueryval is CLIENT side validation.  The required attribute in your model is for SERVER side validation.

You will still need to validate server side, once the fields have been submitted to the controller.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Lynn CurtDeveloperAuthor Commented:
Just to help me clarify.  You stated that the required attribute in my Model is for SERVER side validation.  However jqueryval uses this code...

@Html.ValidationMessageFor(model => model.EventName)

Open in new window

... to display a error if the field is invalid.

Isn't that client side validation?  or no.
zephyr_hex (Megan)DeveloperCommented:
The ValidationMessage will appear AFTER the form is posted to the controller, and the Model.IsValid fails.

jQuery is doing CLIENT side validation, which means the form will not submit to the controller until that client side validation passes.

Client side validation is considered a good practice for the user's experience.  They get immediate feedback that something is wrong, and they don't have to wait for the form to post and the page reload with the error.  However, client side validation is not secure and can be bypassed.  Server side validation is your verification that the data is correct, and that can not be bypassed.

So, both client and server side validation should be used, but they serve different purposes and they occur at different points in the process.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.