Remote modal validation attribute in ASP.NET MVC

We can use validation attribute to validate forms. Using Jquery validation plugin we can do client side validation with the help of modal validation attribute in mvc.

I have a post on client side validation.

Client Side Form validation in ASP.NET MVC

So some times we need to connect with server to validate properties. So now it is painless. We have Remote  attribute to validate such properties behind the seen.

Let’s suppose we need to validate user name property. User name should be validated with server. It can not be duplicated. So we can Use Remote validation attribute.

To validate want to connect to the server. So we can provide controller action to Remote attribute to call action and validate property behind the seen.

We can decorate property as below


[Remote("CheckUserName","Home", ErrorMessage ="User name already exists" ) ]
public string UserName { get; set; }

Modal class

usermodal

In action we should return true or false. if false returned from action error message will be shown.

Action


public JsonResult CheckUserName(string username)
{
//logic for check user name with database

return Json(false, JsonRequestBehavior.AllowGet);
}

action

My sample view contains form for enter user data


@model RemoteAttributeTestMVC.Models.User
@{
ViewBag.Title = "Home Page";
}
<div class="row" style="margin-top:10px;">
@using (Html.BeginForm("CreateUser", "Home"))
{
<div class="form-group order-form-group">
@Html.LabelFor(m => m.UserName)
@Html.EditorFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
</div>
}
</div>

This will render following form

form

To allow client side validation we have to add jquery validation plugin . I have added reference in _Layout.cshtml  as below

jval

Then run the project and when we enter values in user name text box and press tab it sends a request to CheckUserName action with parameter of user name behind the seen.

if action return false validation message will be shown in the form.

error

Download source code

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s