How to Validate Email Id by Regular Expression in Asp.Net Core 8 MVC

In today's article I will show you how you can validate the email id entered in TextBox or in TextBopxFor control with regular expression in asp.net core 8 mvc using jQuery. Here first we will validate the entered email id in TextBox control and after that we will validate the TextBoxFor control entered email id.

So, for this article first we will create a new asp.net core 8 mvc project and add model class file. In this class file we will add a property of string type. This we are doing because first we are going to validate the entered email id in TextBoxFor control with regular expression using jQuery.

Validate Email Id - TextBoxFor

namespace Project.Models
{
    public class UserModel
    {        
        public string EmailId { get; set; }
    }
}

After adding the model class file, we will add the controller and in this controller we will add the ActionResult of type HttpGet.

[HttpGet]
public IActionResult Index()
{
     UserModel userModel = new UserModel();
     return View(userModel);
}

In above code I have created the object of model class file and pass it to view(). Now we will create the view and add the below code into it.

<h2>Validate Email Id</h2>
<br />
<div>
    @Html.TextBoxFor(m => m.EmailId, new
        {
            @Id = "txtEmailId",
            @class = "form-control",
            @placeholder = "Enter email id",
            @validation_message = "Please enter correct email id",
            @validation_value = @"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"
        })
    <div id="message" style="color:red;"></div><br />
    <input type="button" value="Submit" onclick="javascript: return ValidateEmail();" />
</div>

Validate Email Id- TextBox

Below is the code for TextBox control. you need use this in your view.

<h2>Validate Email Id</h2>
<br />
<div>
    @Html.TextBox("EmailId","", new
        {
            @Id = "txtEmailId",
            @class = "form-control",
            @placeholder = "Enter email id",
            @validation_message = "Please enter correct email id",
            @validation_value = @"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?"
        })
    <div id="message" style="color:red;"></div><br />
    <input type="button" value="Submit" onclick="javascript: return ValidateEmail();" />
</div>

In above code I have used some custom property as validation_message, validation_value. One property having a message which will get displayed to user when user enter a wrong email id, and the second property in the property which I am having the regular expression. In case of asp.net core mvc while defining the attribute, we use "_" instead of using "-". Otherwise, compilation error will happen.

These properties we will use in our jQuery code to make the textbox entered email id is valid or not. Now you need to add the jQuery library reference in header of the page.

Download jQuery Library To download the jQuery library refer the download link.

Please check the jQuery code to validate the enter value is a valid email id or not in the textbox.

    var ValidateEmail = function () {
        var validationmessage = $("#txtEmailId").attr("validation-message");
        var regexValue = $("#txtEmailId").attr("validation-value");
        var status = RegexValidationStatus(regexValue, $("#txtEmailId").val());
        if (!status) {
            $("#message").html("Please enter a valid email id.");
        } else {
            $("#message").html("");
        }
    }
    var RegexValidationStatus = function (regex, value) {
        var expre = new RegExp(regex);
        return expre.test(value);
    }

In above code I have two mentors. First method is ValidateEmail() and second one is RegexValidationStatus(). In Second method we have created object of RegExp and after we are validating the value is matching to entered value.

In first method we have used jQuery attr() to get the value of attribute of the control. After getting the value i have passed the regular expression and the control value in the RegexValidationStatus() method. to validate if value is valid or not. As per status we are displaying the message to the user.

Now let's run the project and check the output.