Question

I want to validate the Email id format is correct or not

While typing Emailid in Razor textbox it should display the tick mark if it is in correct format

Otherwise error message should display below the textbox.

Please guide me.. how to do it

Answer 1

You could write a custom validation attribute:

public class EmailAttribute : ValidationAttribute, IClientValidatable
{
    private const string Pattern = @"^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$";
    private static readonly Regex _regex = new Regex(Pattern, RegexOptions.Compiled | RegexOptions.IgnoreCase);

    public override bool IsValid(object value)
    {
        if (value == null)
        {
            return true;
        }
        var input = value as string;
        return ((input != null) && (_regex.Match(input).Length > 0));
    }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        yield return new ModelClientValidationRegexRule(
            base.ErrorMessage,
            Pattern
        );
    }
}

that will be used to decorate your view model property with:

public class MyViewModel
{
    [Email(ErrorMessage = "Please specify a valid email address")]
    public string Email { get; set; }
}

and then assuming you have a controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

and a view:

@model MyViewModel
@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(x => x.Email)
        @Html.EditorFor(x => x.Email)
        @Html.ValidationMessageFor(x => x.Email)
    </div>
    <button type="submit">OK</button>
}

you could just write a simple script to plug into the unobtrusive validation framework and achieve what you are looking for. You would then create a separate javascript file (email.js) with the following contents:

$(function () {
    var settings = $('form').data('validator').settings;
    settings.onkeyup = function (element) {
        $(element).nextAll('.tick').remove();
        if ($(element).valid()) {
            $(element).after('<span class="tick">&#10004;</span>');
        }
    };
});

and the last step would of course be to include the 3 scripts to your page to enable client side validation:

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/email.js")" type="text/javascript"></script>