Saturday, April 23, 2016

ASP.NET MVC : Email address validation using data Annotations

In this article I am going to explain how to validate the email address of users in MVC application using Data Annotation
ASP.NET MVC : Email address validation using data Annotations

Description:
We can validate the email address using data annotation regular expression.  Add the below given code before email address property in model class.

[Required(ErrorMessage="Enter Correct Email")]
[DataType(DataType.EmailAddress)]
[RegularExpression(@"[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}", ErrorMessage = "Invalid email")]

Implement:

First of all import the namespace
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;

Model (Employee.cs) :
public partial class Employee
    {
        public int Id { get; set; }

        [Required]
        public string Name { get; set; }

         [Required]
        [DataType(DataType.PhoneNumber)]
        public Nullable<int> Phone { get; set; }

         [Required]
         public Nullable<int> Salary { get; set; }

          [Required]
        public string Department { get; set; }

        [Required(ErrorMessage="Enter Correct Email")]
        [DataType(DataType.EmailAddress)]
        [RegularExpression(@"[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}", ErrorMessage = "Invalid email")]
        public string EmailId { get; set; }

[Required]
public string ImagePath { get; set; }
    }

In controller to validate the data we call the Modelstate.Isvalid. It check the validation errors.
Controller (EmployeeController.cs)
[HttpPost]
public ActionResult Create(Employee objemployee, HttpPostedFileBase file)
        {
            if(ModelState.IsValid)
            {

            }
            return View(objemployee);
        }

In view we have to enable the validation summary: @Html.ValidationSummary(true)
View (create.cshtml):

@model MVC_Project.Models.Employee

@{
    ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm("Create","Employee",FormMethod.Post, new{enctype = "multipart/form-data"}))
{

    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Employee1</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Phone)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Phone)
            @Html.ValidationMessageFor(model => model.Phone)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Salary)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Salary)
            @Html.ValidationMessageFor(model => model.Salary)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Department)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Department)
            @Html.ValidationMessageFor(model => model.Department)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.EmailId)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.EmailId)
            @Html.ValidationMessageFor(model => model.EmailId)
        </div>
        <div class="editor-label">
            @Html.LabelFor(model => model.ImagePath)
        </div>
        <div class="editor-field">
            <input type="file" name="file" id="ImagePath" accept=".png,.jpg,.jpeg" />     
            @Html.ValidationMessageFor(model => model.ImagePath)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

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






No comments:

Post a Comment