Question posted in
The official documentation can be found here.

ASP.NET Core MVC Custom Email Validation with Custom Domains Based on Select Option

I am working on a registration system with ASP.NET Core MVC. I have a Select field that prompts the user to select which company he works in (e.g. Microsoft, IBM) and based on his choice I want to validate the email domain that the user enters based on that choice.

For example:
If the users chooses Microsoft then the email domain must be @microsoft.com, if he chooses IBM the email domain must be @ibm.com.

I don’t think that this can be done using Regex because I have two related fields. Most likely, it needs to be done by implementing a Custom Validation Attribute but I don’t know how to capture the two values from both fields and compare them.

Form Code:

 <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label asp-for="Input.Email"></label>
                <input asp-for="Input.Email" class="form-control" />
                <span asp-validation-for="Input.Email" class="text-danger"></span>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label asp-for="Input.Company"></label>
                <select asp-for="Input.Company" class="form-control">
                    <option value="">Please Choose a Company</option>
                    <option value="ibm" email-domain="ibm.com">IBM/option>
                    <option value="microsoft" email-domain="microsoft.com">Microsoft</option>
                    <option value="apple" email-domain="apple.com">Apple</option>
                </select>
                <span asp-validation-for="Input.Company" class="text-danger"></span>
            </div>
        </div>
    </div>

Note that I added a custom HTML attribute email-domain if it could help.

Register.cshtml:

    [Required]
    [EmailAddress]
    [Display(Name = "Email")]
    public string Email { get; set; }

    [Required(ErrorMessage = "Please choose which Company you are working for")]
    [DataType(DataType.Text)]
    [Display(Name = "Company")]
    public string Company{ get; set; }

As I said I don’t think that Regex can help in this, I think it needs a Custom Validation Attribute but I don’t know how to implement it for this use case.

I am still a newbie with ASP.NET

Thanks in Advance !!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I managed to solve the issue with the following approach.

    First: add a custom HTML attribute email-domain to the options in the select HTML Tag

                <select asp-for="Input.Company" class="form-control" id="company-name">
                <option value="">Please Choose a Company</option>
                <option value="ibm" email-domain="ibm.com">IBM</option>
                <option value="micrososft" email-domain="microsoft">Microsoft</option>
                <option value="apple" email-domain="apple">Apple</option>
                <option value="nic" email-domain="nic.gov.us">National Information Center</option>
            </select>

    then after adding this custom attribute which is a more dynamic solution because not all companies email domain is the same as its own name. We will read the email input and split the domain by the @ sign then compare user input domain with the selected option email-domain.

    /*
 * Read email input from the corresponding field
 * Take the domain by splitting the email into two parts
 * Read company input from the corresponding field
 * Read company email domain custom attribute
 * Validate email domain with the chosen company
 */
$(document).ready(function () {
    $('#register-button').click(function () {
        // read email input from field by ID
        var email = $('#user-email').val()
        // split the domain
        // @@ is escape character in C# it will be rendered as single at
        var splittedEmail = email.split('@@')
        // read the domain after the at sign
        var userDomain = splittedEmail[1]
        // read chosen company email domain by accessing custom attribute
        var companyEmail= $('#company-name option:selected').attr('email-domain')
        // compare email domain with selected hospital
        if (!(userDomain.toLowerCase() === comapnyEmail.toLocaleLowerCase())) {
            // display the hidden div that contains the error message
            $('#email-validation-error').show()
            // prevent submitting
            return false
        } else {
            // submit form
            return true
        }
    })
  
})

    I added a hidden div that will be displayed in case of miss match

    <div class="text-danger" id="email-validation-error" style="display: none;">Email does not Match Company Domain</div>

  2. 0

    as per my knowledge, you can not do using model Validation, If try to use Remote validation even, it will be working only for the specific Property and you will not get the value of other column in that method. So as per my understanding, you need to implement it in Jquery or Submit Button’s code.

    Login or Signup to reply.
  3. 0

    Here is a working demo:

    public class Register
    {
        public Input Input { get; set; }
    }
    public class Input
    {
        [Required]
        [Remote(action: "VerifyEmail", controller: "B", AdditionalFields = nameof(Company))]
        [Display(Name = "Email")]
        public string Email { get; set; }
        [Required(ErrorMessage = "Please choose which Company you are working for")]
        [DataType(DataType.Text)]
        [Display(Name = "Company")]
        public string Company { get; set; }
    }

    View:

    @model Register
<form method="post">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label asp-for="Input.Email"></label>
                <input asp-for="Input.Email" class="form-control" />
                <span asp-validation-for="Input.Email" class="text-danger"></span>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-group">
                <label asp-for="Input.Company"></label>
                <select asp-for="Input.Company" class="form-control">
                    <option value="">Please Choose a Company</option>
                    <option value="ibm" email-domain="ibm.com">IBM</option>
                    <option value="microsoft" email-domain="microsoft.com">Microsoft</option>
                    <option value="apple" email-domain="apple.com">Apple</option>
                </select>
                <span asp-validation-for="Input.Company" class="text-danger"></span>
            </div>
        </div>
    </div>
    <input type="submit" value="submit" />
</form>
@section scripts{ 
    <partial name="_ValidationScriptsPartial" />
}

    Action:

    [AcceptVerbs("GET", "POST")]
        public IActionResult VerifyEmail(Register register)
        {
            var s = "@" + register.Input.Company + ".com";
            if (!register.Input.Email.EndsWith(s))
            {
                return Json("The email address is not corresponding to the company.");
            }

            return Json(true);
        }

    result:
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search