ASP.NET MVC : Email address validation using data Annotations - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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>






What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon