Check email username availability before form submit in .net mvc

In this blog post, we will discuss how to validate a user's username and email address using the Remote attribute in ASP.NET MVC. We will provide a step-by-step guide, along with code examples, to help you get started.

The Remote attribute in ASP.NET MVC is a validation attribute that allows developers to perform server-side validation of user input on the client side. This attribute is particularly useful for checking if a value already exists in the database, such as a username or email address, to prevent duplicate values.

By default, the Remote attribute uses jQuery to make an AJAX call to the server to perform the validation. If the validation fails, an error message is displayed next to the input field. If the validation passes, the form is submitted to the server.

Step-by-Step Guide to Validating User Input Using the Remote Attribute

Step 1: Create a new ASP.NET MVC project
Create a new ASP.NET MVC project in Visual Studio.

Step 2: Add model class
Create a new class in the Models folder and name it as User.

public class User
{
    public int UserId { get; set; }
 
    [Remote("CheckUserName", "User", ErrorMessage = "User name already exists")]
    public string UserName { get; set; }
 
    [Remote("CheckEmail", "User", ErrorMessage = "Email already exists")]
    public string Email { get; set; }
}

Step 3: Add controller
Add a new controller named UserController.

public class UserController : Controller
{
    private ApplicationDbContext db = new ApplicationDbContext();
 
    public JsonResult CheckUserName(string UserName)
    {
        bool result = db.Users.FirstOrDefault(u => u.UserName == UserName) == null;
 
        return Json(result, JsonRequestBehavior.AllowGet);
    }
 
    public JsonResult CheckEmail(string Email)
    {
        bool result = db.Users.FirstOrDefault(u => u.Email == Email) == null;
 
        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

Step 4: Add view
Add a new view named Index for the UserController.

@model User
 
@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
 
    

        
User
        

        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 
        

            @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
            

                @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
            
        
 
        

            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
            

                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
            
        
 
        

            

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

Step 5: Run the application
Run the application and test the validation by entering an existing user name or email address.

The Remote attribute in ASP.NET MVC allows us to validate user input on the client side by making a server call. It is useful for checking if a value already exists in the database, for example, to prevent duplicate user names or email addresses.

Before submitting the page, the validation is done on the client side, and if it passes, the form is submitted. If the validation fails, an error message is displayed next to the input field.