Client Side Validation in ASP.NET MVC

Firstly, you just need to create an ASP.NET MVC application. To create a new ASP.NET MVC application, Open Visual Studio choose File, New, then Project.

It will open a New Project window, from where you need to choose node Visual C# and then Web and from the right pane you need to choose ASP.NET Web Application. Name the application.

It will open new window from where you can choose different type of the ASP.NET MVC project template. You need to choose MVC and click OK.

mvc

It will create a ASP.NET MVC application. When you open the Web.Config file, you can see there are two options by default [If you are working with MVC3 or MVC2, Please see it should be there]. These are ClientValidationEnabled and UnobtrusiveJavaScriptEnabled. And these should be true for client side validation.

add key

Here I am going to use Data Annotation which is widely used by developers because there is no need to write extra code for validation. All are written predefined.

Create a ViewModel for posting some blog data.

PostViewModel.cs

using ClientSideValidationDemo.Data.Entities;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ClientSideValidationDemo.Data.ViewModel
{
public class PostViewModel
{
public int PostId { get; set; }
[Display(Name="Post Title")]
[Required(ErrorMessage="Post Title is required")]
[RegularExpression(@"^.{5,}$", ErrorMessage = "Minimum 3 characters required")]
[StringLength(500,MinimumLength=3, ErrorMessage="Invalid Title Lenght")]
public string PostTitle { get; set; }
[MaxLength(Int32.MaxValue, ErrorMessage = "More than max value")]
[AllowHtml]
[Display(Name = "Short Content")]
[Required(ErrorMessage = "Short Content is required")]
public string ShortPostContent { get; set; }
[AllowHtml]
[MaxLength(Int32.MaxValue, ErrorMessage = "More than max value")]
[Display(Name = "Full Content")]
[Required(ErrorMessage = "Full Content is required")]
public string FullPostContent { get; set; }
[Display(Name = "Meta keywords")]
public string MetaKeywords { get; set; }
[Display(Name = "Meta Description")]
public string MetaDescription { get; set; }
[Required(ErrorMessage="Category is required")]
public int SelectValue
{
get;
set;
}
public virtual Category postCategory { get; set; }
[Display(Name="Post Category")]
public virtual List<Category> PostCategories { get; set; }
public List<Tag> PostTags { get; set; }
}
[Required(ErrorMessage="Tag is required")]
public string hdnTagList { get; set; }
public virtual int CategoryId { get; set; }
public string PostUrl { get; set; }
public User userDetails { get; set; }
public int NumberOfLikes { get; set; }
public int NumberOfComments { get; set; }
public int postPageStatus { get; set; }
public string CategoryName { get; set; }
}
}

postController.cs

[HttpPost]
public ActionResult AddNewPost(PostViewModel model)
{
if (ModelState.IsValid)
{
int varEntityType = 1;
if (PostType.post.Equals("page"))
{
varEntityType = 2;
}
var category = _postRepository.GetCategoryList(model.SelectValue);
var postUrl = string.Empty;
var shortContent = string.Empty;
if (model.PostUrl != null)
{
postUrl = model.PostUrl.ToSeoUrl();
}
else
{
postUrl = model.PostTitle.ToSeoUrl();
}
if (String.IsNullOrEmpty(model.ShortPostContent))
{
if (model.FullPostContent.Length > 1000)
{
shortContent = model.FullPostContent.Substring(0, 1000);
}
else
{
shortContent = model.FullPostContent;
}
}
else
{
shortContent = model.ShortPostContent;
}
var postEntity = new Post
{
PostTitle = model.PostTitle,
MetaKeywords = model.MetaKeywords,
MetaDescription = model.MetaDescription,
ShortPostContent = shortContent,
FullPostContent = model.FullPostContent,
PostAddedDate = DateTime.Now,
EntityType = varEntityType,
PostUpdatedDate = DateTime.Now,
Categories = category,
PostUrl=postUrl,
UserId=LoggedUser.UserId,
};
int postId = Convert.ToInt32(_postRepository.AddNewPost(postEntity));
if (postId > 0)
{
TempData["Success"] = "New Post Added Successfully!";
return RedirectToAction("AddNewPost", "Post");
}
}
}
model.PostCategories = _categoryRepository.GetCategoryList();
ViewBag.Failed = "Filled Required content!";
return View(model);
}

AddNewPost.cshtml

@model ClientSideValidationDemo.Data.ViewModel.PostViewModel
@{
ViewBag.Title = "Add New Blog";
Layout = "~/Areas/Blog/Views/Shared/_LayoutMain.cshtml";
}
<div class="span9">
@using (Html.BeginForm("AddNewPost", "Post", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div class="widget ">
<div class="widget-header"><i class="icon-user"></i><h3>Submit Post</h3></div><div class="widget-content">
@if (TempData["Success"] != null)
{
<p class="alert alert-success" id="successMessageAddPost">@TempData["Success"]</p>
}
@if (ViewBag.Failed != null)
{
<p class="alert" id="failedMessageAddPost">@ViewBag.Failed</p>
}
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">@Html.LabelFor(m => m.PostCategories)</label><div class="controls">
@Html.DropDownListFor(m => m.SelectValue, new SelectList(Model.PostCategories, "CategoryId", "CategoryName"), "Please select category", new { @class = "btn-group open" })
<br />
@Html.ValidationMessageFor(m => m.SelectValue, "", new { @class = "validation_error" })
</div>
</div><div class="control-group">
<label class="control-label">@Html.LabelFor(m => m.PostTitle)</label><div class="controls">
@Html.TextBoxFor(m => m.PostTitle, new { @class = "span6" })
<br />
@Html.ValidationMessageFor(m => m.PostTitle, "", new { @class = "validation_error" })
</div>
</div><div class="control-group">
<label class="control-label">Tags @Html.HiddenFor(m => m.hdnTagList)</label><div class="controls">
<input type="text" id="txtAddNewTag" class="inputBoxMedium" /><input type="button" id="btnAddTag" class="btn btn-primary" value="Add" title="add new tag" /><input type='button' id='btnRemoveTag' class="btn btn-danger" value="Remove" title="remove tag" />
@Html.ValidationMessageFor(m => m.hdnTagList, "", new { @class = "validation_error" })
<br /><br /><span id="TextBoxesGroup"></span>
</div>
</div><div class="tabbable">
<ul class="nav nav-tabs"><li class="active"><a href="#formcontrols" data-toggle="tab">Content</a></li><li><a href="#jscontrols" data-toggle="tab">Options</a></li></ul><br><div class="tab-content">
<div class="tab-pane active" id="formcontrols">
<div class="form-horizontal">
<div>
<b>Short Content</b>
@if (Request.Browser.IsMobileDevice)
{
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>tinymce.init({selector: 'textarea', editor_selector: "ShortPostContent"});</script>
}
else
{
<script src="http://cdn.ckeditor.com/4.4.6/full-all/ckeditor.js"></script>
}
@Html.TextAreaFor(m => m.ShortPostContent, new { @id = "ShortPostContent", @rows = 2, @cols = 2 })
<br />
@Html.ValidationMessageFor(m => m.ShortPostContent, "", new { @class = "validation_error" })
</div><div>
<b>Full Content</b>
@if (Request.Browser.IsMobileDevice)
{
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script>tinymce.init({selector: 'textarea', editor_selector: "FullPostContent"});</script>
}
else
{
<script src="http://cdn.ckeditor.com/4.4.6/full-all/ckeditor.js"></script>
}
@Html.TextAreaFor(m => m.FullPostContent, new { @id = "FullPostContent" })
<input type="hidden" id="hdnCodeStyle" value="" /><br />
@Html.ValidationMessageFor(m => m.FullPostContent, "", new { @class = "validation_error" })
</div>
</div><br />
</div><div class="tab-pane" id="jscontrols">
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">@Html.LabelFor(m => m.PostUrl)</label><div class="controls">
@Html.TextBoxFor(m => m.PostUrl, new { @class = "span6" })
<br />
@Html.ValidationMessageFor(m => m.PostUrl, "", new { @class = "validation_error" })
</div>
</div><div class="control-group">
<label class="control-label">@Html.LabelFor(m => m.MetaKeywords)</label><div class="controls">
@Html.TextAreaFor(m => m.MetaKeywords, new {@class = "span6", @rows = 3, @cols = 2 })
<br />
@Html.ValidationMessageFor(m => m.MetaKeywords, "", new { @class = "validation_error" })
</div>
</div><div class="control-group">
<label class="control-label">@Html.LabelFor(m => m.MetaDescription)</label><div class="controls">
@Html.TextAreaFor(m => m.MetaDescription, new { @class = "span6", @rows = 3, @cols = 2 })
<br />
@Html.ValidationMessageFor(m => m.MetaDescription, "", new { @class = "validation_error" })
</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align: center;"><input type="submit" value="Publish" id="btnAddNewPost" class="btn btn-success" /><input type="submit" value="Preview" id="btnPreview" class="btn btn-warning" /></div></div></div><br /><div><span>@ViewBag.Message</span></div>
</div>
</div>
</div>
}
</div>

When you click on the Publish button without filling the require data, it will not show error message below the control rather than loading the whole page.

control

Please make sure, you are referring the validating jQuery script file with your view or corresponding layout page.

Thanks for reading this article, hope you enjoyed it.

6 Comments

Join the conversation! Your thoughts help the community grow.

Bhanu Korremula8y ago
@mukesh kumar: Is the sample missing category class and tag class code?
Santhakumar Munuswamy10y ago
Thanks for nice article
Suman Verma10y ago
nice one
Aishwarya D10y ago
Good one. Thanks for sharing
Jaipal Reddy10y ago
Nice share sir.
Raja T10y ago
Nice, Thanks for sharing