1 
<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.

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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.
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, 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.
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 bradwilson.typepad.com/blog/2010/10/… but it doesnt completely explain what jquery to write such as what exactly are the 'adapters' etc.? Do you know anything on this?
@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 and answer 2 which is a follow-up of the first answer.
|
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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.