MVC 5 Remote Validation

Question

I need to validate an input field value from user before the form is submitted.

I have created an action in my custom controller and decorated the field with it:

action name: CheckValue controller name: Validate

[Remote("CheckValue", "Validate"), ErrorMessage="Value is not valid"]
public string Value { get; set; }

The problem is when I press submit, the form is being submitted and then the message Value is not valid is shown if the value entered by the user is not valid.

How can I validate the value entered by user and prevent the form to be submitted if value is not valid, and display the error message?

If I try in JavaScript to check if the form is valid $("#formId").valid() that returns true, that means no matter what is the status of the value (valid or not) the form is valid.

In the other hand if I decorate another field with the [Required] attribute the form is not submitted and the error is shown for that field that is required. However the validation doesn't occur behind the scene for the remote validation field.

Answer 1

The complete solution of Remote Validation in MVC. It will check if the email exists in database and show the following error:

Email already exists

1. Account Controller Action

   [AllowAnonymous]
   [HttpPost]
   public ActionResult CheckExistingEmail(string Email)
   {
       try
       {
           return Json(!IsEmailExists(Email));
       }
       catch (Exception ex)
       {
           return Json(false);
       }
   }
   
   private bool IsEmailExists(string email)
       =>  UserManager.FindByEmail(email) != null;
   

2. Add Model Validation

   [Required]
   [MaxLength(50)]
   [EmailAddress(ErrorMessage = "Invalid Email Address")]
   [System.Web.Mvc.Remote("CheckExistingEmail", "Account", HttpMethod = "POST", ErrorMessage = "Email already exists")]
   public string Email { get; set; }
   

3. Add Scripts

   <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>