Client Side Validations in Asp.Net MVC using jQuery
In my previous article Applying Validations in Asp.Net MVC, we discussed server side validations in Asp.Net MVC. Today we learn how to apply client side validations using jQuery with the same example.
Open Microsoft Visual Studio 2015, Create Asp.Net MVC Application and copy HomeController.cs & CreateProduct.cshhtml view from the previous example. Moreover, also, Copy Products.cs class with validation attributes as shown below.
namespace FirstMVCApp.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
public partial class Product
{
[Required(ErrorMessage = "Please enter Product Id"),
Range(1, 1000, ErrorMessage = "Product Id Should be between 1 and 1000")]
public int Id { get; set; }
[Required(ErrorMessage = "Please enter Product Name"),
StringLength(50, ErrorMessage = "Product Name length should not be more than 50")]
public string ProductName { get; set; }
[Required(ErrorMessage = "Please enter Product Description")]
public string ProductDesc { get; set; }
[Required(ErrorMessage = "Please enter Product URL"),
StringLength(50, ErrorMessage = "Product URL length should not be more than 50")]
public string ProductUrl { get; set; }
[Required(ErrorMessage = "Please enter Product Available Time"),
Range(typeof(DateTime), "10/31/2016", "12/31/2017",
ErrorMessage = "Product Available time should be between 10/31/2016 12/31/2017")]
public string ProductAvailableTime { get; set; }
}
}
Now enable client side validations in web.config by making ClientValidationEnabled and UnobtrusiveJavaScriptEnabled true as shown below.
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
We used to write our own javascript function to validate the input controls. But by using jQuery plug-ins we no need to write any custom code, we have jquery.validate.min.js for validations. Add paths for jquery script files as shown below.
@model FirstMVCApp.Models.Product
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Create Product</title>
<script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"
type="text/javascript"></script>
<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>
</head>
<body>
<div>
@using (Html.BeginForm())
{
@Html.ValidationSummary()
<p>
@Html.LabelFor(model => model.Id)
@Html.EditorFor(model => model.Id)
@Html.ValidationMessageFor(model => model.Id)
</p>
<p>
@Html.LabelFor(model => model.ProductName)
@Html.EditorFor(model => model.ProductName)
@Html.ValidationMessageFor(model => model.ProductName)
</p>
<p>
@Html.LabelFor(model => model.ProductDesc)
@Html.EditorFor(model => model.ProductDesc)
@Html.ValidationMessageFor(model => model.ProductDesc)
</p>
<p>
@Html.LabelFor(model => model.ProductUrl)
@Html.EditorFor(model => model.ProductUrl)
@Html.ValidationMessageFor(model => model.ProductUrl)
</p>
<p>
@Html.LabelFor(model => model.ProductAvailableTime)
@Html.EditorFor(model => model.ProductAvailableTime)
@Html.ValidationMessageFor(model => model.ProductAvailableTime)
</p>
<p>
<input type="submit" value="Create Product" />
</p>
}
</div>
</body>
</html>
Run the application now and click on submit button without entering any data. It displays the validations without calling server-side code by using jquery.validate.min.js.
