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

Question

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

Answer 1

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>