“the value 'emailaddress' is invalid” Validation fails in asp.net mvc

Question

I'm developing an application and I have a form in which each textbox has validations.I've included custom validation statements.They are working better.But I've email address data type for one of the text boxes.But when I submit the form I'm hitting error "the value 'emailaddress' is invalid"..Please look at my code and let me know if anything wrong.. My model class is

[Table("email")]
   public  class eMail
    {
       [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
       public int ID { get; set; }

       [Required(ErrorMessage="The Name is Required")]
       [StringLength(20,ErrorMessage="The maximum length of the name should be 20 Characters")]
       [Display(Name="Your Name")]
       public string Name { get; set; }

       [Required(ErrorMessage = "Email is required")]
       [EmailAddress(ErrorMessage = "Enter a proper email address")]
       [StringLength(25, ErrorMessage = "Maximum length allowed for an email is 30 characters")]
       public string Email { get; set; }

       [Required(ErrorMessage="Please print your request")]
       [StringLength(200,ErrorMessage="Maximum Characters allowed Are 200")]
       [Display(Name="Prayer Request")]
       [DataType(DataType.MultilineText)]
       public string Request{get;set;}
    }

My controller is :

using CTCFremont.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CTCFremont.Controllers
{
    public class eMailController : Controller
    {
        private CTCFremontEntities db = new CTCFremontEntities();

        //
        // GET: /eMail/

        public ViewResult Index()
        {
            return View();
        }



        public ActionResult Create()
        {
            return View();
        }

        //
        // POST: /eMail/Create

        [HttpPost]
        public ActionResult Create(eMail email)
        {
            if (ModelState.IsValid)
            {
                db.eMails.Add(email);
                db.SaveChanges();
                return RedirectToAction("Index");
            }

            return View(email);
        }

        //
        // GET: /eMail/Edit/5


        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
    }
}

My view is :

@model CTCFremont.Models.eMail

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></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>
<style type="text/css">
#RequestForm {
    position:absolute;
    top: 50%;
    left: 25%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
}
    div.request {
       box-shadow: 10px 10px 5px #888888
    }

</style>

<h2>Submit Your Prayer Request</h2>
@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)  
        <div id="#Actual" style ="background-image:url('../../Images1/pray.jpg')">
        <div class="request" id="RequestForm" style="width:1000px">
            <div class="container">
            <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.Email)
        </div>
        <div class="text-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Request)
        </div>
        <div class="editor-field"  >
            @Html.TextAreaFor(model => model.Request,new { style = "width:400px ",maxlength = 200 })
            @Html.ValidationMessageFor(model => model.Request)
        </div>
          <p>
            <input type="submit" value="Create" />
        </p>
        </div>     
        </div>    
        </div>

}


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

My Table is :

CREATE TABLE [dbo].[eMail] (
    [ID]      INT            IDENTITY (1, 1) NOT NULL,
    [Name]    NVARCHAR (20)  NOT NULL,
    [Email]   NVARCHAR (25)  NOT NULL,
    [Request] NVARCHAR (200) NOT NULL,
    PRIMARY KEY CLUSTERED ([ID] ASC)
);

Answer 1

I believe the reason is that the MVC Model binder is getting confused between your eMail model class and the Email property on that class.

You can verify that by setting a breakpoint on ModelState.IsValid and verify the ModelState.Errors object to see what's going wrong.

Also, can you try renaming your Email property to Email1 everywhere you are referring it and add the Column attribute for it to be in sync with your Table.

Something like this and try :

[Column("Email")]
        [Required]
        [EmailAddress(ErrorMessage = "Enter a proper email address")]
        [StringLength(25, ErrorMessage = "Maximum length allowed for an email is 30 characters")]
        public string Email1 { get; set; }