Behind MVC Client End Validation

Let’s straight into what things we require to enable validation at client end

STEP 1: Web.Config

Make sure below keys are required to be set true

<appSettings>
      <add key="ClientValidationEnabled" value="true"/>
      <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

 

STEP 2: Create One Model

using System.ComponentModel.DataAnnotations; // Required at least
public class Category
{
     [Required]
     [RegularExpression(@"^[a-z,'\s']+$", ErrorMessage = "Only A to Z with space")]
     public string Name { get; set; }

     [Required]
     [RegularExpression(@"^\d+$",ErrorMessage="Only number 0 to 9" )]
     public int Order { get; set; }
}

Note: Basically we can validate inputs by model by Annotations

 

STEP 3: Create Simple Controller

public class EmployeeController : Controller
{
     [HttpGet]
     public ActionResult create()
     {
          return View();
     }

     [HttpPost]
     public ActionResult Create(Category cat)
     {
          if (ModelState.IsValid == false)
          {
               return View(cat);
          }
          return Content("success");
     }
}

 

STEP 4: Create View

@model MvcApplication1.Controllers.Category
<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>

@{Html.EnableClientValidation(true);}
@using (Html.BeginForm("Create", "Employee", FormMethod.Post))
{
      @Html.ValidationSummary(false)

      @Html.LabelFor(m => m.Name)
      @Html.TextBoxFor(m => m.Name) <br />

      @Html.LabelFor(m => m.Order)
      @Html.TextBoxFor(m => m.Order) <br />

      <input type="submit" value="Submit" />
}

 

Note: Please go to view source to see the magic (validation metadata)  is emitted as data attributes on the input elements.

<label for="Name">Name</label>
<input data-val="true" data-val-regex="Only A to Z with space" data-val-regex-pattern="^[a-z,'\s']+$" data-val-required="The Name field is required." id="Name" name="Name" type="text" value="" /> <br />

<label for="Order">Order</label>
<input data-val="true" data-val-number="The field Order must be a number." data-val-regex="Only number 0 to 9" data-val-regex-pattern="^\d+$" data-val-required="The Order field is required." id="Order" name="Order" type="text" value="" />

This metadata is consumed by the jquery.unobtrusive JavaScript library and connected to the jQuery Validate plugin’s validation logic.

 

Add Value:- We have added server-side validation (second gate-keeper) to make sure system won’t process invalid data.

[HttpPost]
public ActionResult Create(Category cat)
{
    if (ModelState.IsValid == false)
    {
        return View(cat);
    }
    return Content("success");
}

Because user submit data and it enters in network (un-secured world) where it can be tempered before it is reached to server

*****
Otherwise no need of SSL 😀 By The Way It provides tunnel from client to server using asymmetric cryptography so client data(soldiers) can reach destination and no-body can see what’s transferring.
*****

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