Example of server side and client side validation example using asp.net mvc data annotation

In this example, I demonstrate how we can implement client and server side data annotation in asp.net MVC.The major issue in checkbox generally occurred in client-side validations here client and server side validations are working fine using jQuery I just create an employee controller and 2 views(Index.cshtml and Message.cshtml).

Server Side Data Annotation - With Client Side Validation

Index.cshtml

@model HtmlHelpers1.Models.Emp

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>Emp</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.name, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.email, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.email, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.empdept, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.empdept, new List<SelectListItem>
           {
               new SelectListItem { Text="IT", Value="1" },
                 new SelectListItem { Text="Sales", Value="2" }
           },"--Select Department--",new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.empdept, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.terms, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <div class="checkbox">
                    @Html.CheckBoxFor(model => model.terms)
                    @Html.ValidationMessageFor(model => model.terms, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
        (function ($) {
            $.validator.unobtrusive.adapters.addBool("checkboxrequired", "required");
        }(jQuery));
</script>

Emp Model Class

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace HtmlHelpers1.Models
{
    public class Emp
    {
        [Required]
        public string name { get; set; }
        [Required]
        public string email { get; set; }
        [Required]
        public string empdept { get; set; }
        [validatecheckbox(ErrorMessage ="Please check Terms and condition")]
      

        public bool terms { get; set; }
         public class validatecheckbox : ValidationAttribute, IClientValidatable
      
        {
            public override bool IsValid(object value)
            {
                return (bool)value;
            }
            public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
            {
                yield return new ModelClientValidationRule
                {
                    ErrorMessage = FormatErrorMessage(metadata.GetDisplayName()),
                    ValidationType = "checkboxrequired"
                };
            }
        }
    }
}


Employee Controller

using HtmlHelpers1.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace HtmlHelpers1.Controllers
{
    public class EmployeeController : Controller
    {
        // GET: Employee
        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Index(Emp obj)
        {
            if(ModelState.IsValid)
            {
                return RedirectToAction("Message");
            }
            return View();
        }
        public ActionResult Message()
        {
            return View();
        }
    }
}


Message.cshtml


@{
    ViewBag.Title = "Message";
}

<h2>Message</h2>

Output:

Data Annotation Example