Question

According to this definition here:

Unobtrusive JavaScript avoids injecting inline JavaScript into HTML. This makes your HTML smaller and less cluttered, and makes it easier to swap out or customize JavaScript libraries.

However when reading this blog:
The blogger says:
Now for performing validation eagerly, i.e, performing validation each time when users fields focus out, you need to add this script at bottom of the page.

I dont know if I am confused, but for me Unobstrusive javascript validation means in simple words, NO JAVASCRIPT code on the page, only the references to the .js files that have the logic. In that way you separate the validation logic from the presentation.

With this said, I would like to enable unobstrusive validation in my following form. The only difference I see is:
1. Line 1: I dont have it.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<EagerlyPerformingValidation.Models.UserInformation>

1. I should add the jquery logic to a external javascript file and reference it.

Am I missing something here??

public class Position{

            [DatabaseGenerated(System.ComponentModel.DataAnnotations.DatabaseGeneratedOption.Identity)]   
            public int PositionID { get; set; }

            [Required(ErrorMessage = "Position name is required.")]
            [StringLength(20, MinimumLength = 3, ErrorMessage = "Name should not be longer than 20 characters.")]
            [Display(Name = "Position name")]              
            public string name { get; set; }

            [Required(ErrorMessage = "Number of years is required")] 
            [Display(Name = "Number of years")]
            [YearsValidationAttribute(5, ErrorMessage = "{0} value must be greater than {1} years.")]        
            public int yearsExperienceRequired { get; set; }

            public virtual ICollection<ApplicantPosition> applicantPosition { get; set; }
        }




@model Data.Model.Position

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

    @using (Html.BeginForm()) {
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>Position</legend>

            <div class="editor-label">
                @Html.LabelFor(model => model.name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.name)
                @Html.ValidationMessageFor(model => model.name)
            </div>

            <div class="editor-label">
                @Html.LabelFor(model => model.yearsExperienceRequired)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.yearsExperienceRequired)
                @Html.ValidationMessageFor(model => model.yearsExperienceRequired)
            </div>

            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>
    }

    <div>
        @Html.ActionLink("Back to List", "Index")
    </div>

Answer 1

The unobtrusive validation done according to your (correct) understanding is kind of “lazy” in that it only fires when you submit the form. The javascript code referenced by the blog post you linked to simply causes the validation to fire each time you tab out of a control. You’re right that it’s not really unobtrusive javascript as presented.

I think the way you could make it be unobtrusive is either to add data- attributes to each control (a pain) and write code to inject the script, or to add his little bit of script to one of the main javascript files you are referencing, which is probably his intention.

There is a cool bit about this in chapter 8 of this book: Wrox Professional ASP.NET MVC 3