What jQuery do I write with Unobtrusive Client Validation in ASP.NET MVC 3?

Question

<form>
<div class="clrfix">
  <label for="first_name">First Name</label>
  <input data-val="true" data-val-required="Your First Name is required." id="first_name" name="first_name" type="text" value="" />
  <span class="field-validation-valid" data-valmsg-for="first_name" data-valmsg-replace="true"></span>
</div>
<div class="clrfix">
  <label for="last_name">Last Name</label>
  <input data-val="true" data-val-required="Your Last Name is required." id="last_name" name="last_name" type="text" value="" />
  <span class="field-validation-valid" data-valmsg-for="last_name" data-valmsg-replace="true"></span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="/Scripts/mvc/jquery.validate.min.js" type="text/javascript"></script>
<script src="/Scripts/mvc/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="/Scripts/mvc/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

So I am trying to understand this concept of Unobtrusive Client Validation in ASP.NET MVC 3. So I did the above, now the biggest question, how do I validate with jQuery? What exactly do I write? That is what is confusing me. How do I call the error messages and what not?

If anyone can give me any insight as to what are the next steps, I would really appreciate it.

score 6 · Answer 1 · answered Jan 26 '11 at 16:07

6

Here's an example of how this works. You start by defining a model which will contain the properties decorated with attributes indicating the different validation rules:

public class PersonViewModel
{
    [Required(ErrorMessage = "The first name is required")]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "The last name is required")]
    public string LastName { get; set; }
}

then a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new PersonViewModel());
    }

    [HttpPost]
    public ActionResult Index(PersonViewModel model)
    {
        return View(model);
    }
}

and finally a view:

@model AppName.Models.PersonViewModel
@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(x => x.FirstName)
        @Html.TextBoxFor(x => x.FirstName)
        @Html.ValidationMessageFor(x => x.FirstName)
    </div>

    <div>
        @Html.LabelFor(x => x.LastName)
        @Html.TextBoxFor(x => x.LastName)
        @Html.ValidationMessageFor(x => x.LastName)
    </div>

    <input type="submit" value="OK" />
}

The Html helpers used to generate the corresponding form fields in the view will use HTML5 data-* attributes to translate the validation rules on your model. Then by simply including the jquery.validate.js and jquery.validate.unobtrusive.js scripts into your page those rules will be enforced when you try to submit the form.

answered Jan 26 '11 at 16:07

Darin Dimitrov

1,023,142
271
3,287
2,928

I believe I understand that. Much thanks for that. This is my first time working in ASP.NET MVC so still trying to grasp the whole picture. – user570104 Jan 26 '11 at 21:32
So I am assuming, I don't do any JavaScript/jQuery because the Controller/Model are working it out. If that is so, isn't that just the back end doing the work? Should JavaScript be doing something client side, if that makes sense? – user570104 Jan 26 '11 at 21:34
@user570104, when you decorate your model with validation properties, the HTML helpers which generate the resulting HTML will use the HTML5 `data-*` attributes on the input fields to represent the validation rules and unobtrusive client validation is automatically applied by the `jquery.validate` and the `user570104` scripts. Server side validation is also performed in the cases where the user has javascript disabled. – Darin Dimitrov Jan 26 '11 at 22:13
Gotcha. I understand it now. What confuses me is I don't understand what jQuery to write to make sure an individual has entered a name in the field? I had been reading this article to understand this http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html but it doesnt completely explain what jquery to write such as what exactly are the 'adapters' etc.? Do you know anything on this? – user570104 Jan 27 '11 at 16:05
@user570104, you don't need to write any javascript for required fields validation. On the other hand if you want to write a custom validator you need adapters. Here's are two answers I provided illustrating the concept: [answer 1](http://stackoverflow.com/questions/4747184/perform-client-side-validation-for-custom-attribute/4747466#4747466) and [answer 2](http://stackoverflow.com/questions/4784943/asp-net-mvc-3-client-side-validation-with-parameters/4784986#4784986) which is a follow-up of the first answer. – Darin Dimitrov Jan 27 '11 at 16:10
You also need to ensure that you have UnobtrusiveJavaScriptEnabled = "true" in your web.config or programmatically set elsewhere. This is true by default in an MVC3 project, but false by default if you upgraded. It is still not clear to me whether ClientValidationEnabled also needs to be set to true - I have it as true but am not getting client side validation to work. – sydneyos Feb 10 '11 at 22:40
@all : post reading this post, I realised that adding these two scripts in partial views helps us to validate the forms in it :) – Naveen Feb 25 '11 at 07:42

score 0 · Answer 2 · answered Sep 16 '13 at 18:38

0

this link may help you to understand how to work with client side validation.

http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx

answered Sep 16 '13 at 18:38

Mou

15,673
43
156
275

What jQuery do I write with Unobtrusive Client Validation in ASP.NET MVC 3?

2 Answers2