MVC Client Side Validation - Combine two fields validation into one message

Question

I have code the code below:

    [Display(Name = "Last Name")]
    [RegularExpression(@"^[-.&()a-zA-Z0-9'' ']*$", ErrorMessage = "Special character not allowed.")]
    public string LastName { get; set; }

    [Display(Name = "First Name")]
    [RegularExpression(@"^[-.&()a-zA-Z0-9'' ']*$", ErrorMessage = "Special character not allowed.")]
    public string FirstName { get; set; }

And I want on the View to if either of these fields throws this regular expression error, to only show one error message.

I see easily how to do this using the IValidateObject, but I want this to remain instant with ClientSide validation. Is there a way to do this with the validation staying instant?

Answer 1

Here is a demo use js to only show one error message.

ClientSideName:

public class ClientSideName
    {
        [Display(Name = "Last Name")]
        [RegularExpression(@"^[-.&()a-zA-Z0-9'' ']*$", ErrorMessage = "Special character not allowed.")]
        public string LastName { get; set; }

        [Display(Name = "First Name")]
        [RegularExpression(@"^[-.&()a-zA-Z0-9'' ']*$", ErrorMessage = "Special character not allowed.")]
        public string FirstName { get; set; }
    }

View:

<div class="row">
    <div class="col-md-4">
        <form method="post" id="UserForm">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="FirstName" class="control-label"></label>
                <input asp-for="FirstName" class="form-control" name="FirstName" />
            </div>
            <div class="form-group">
                <label asp-for="LastName" class="control-label"></label>
                <input asp-for="LastName" class="form-control" name="LastName" />
            </div>
            <div id="user_name_error">
                <span asp-validation-for="FirstName" class="text-danger"></span>
                <span asp-validation-for="LastName" class="text-danger"></span>
            </div>


            <div class="form-group">
                <input type="submit" value="Validate" class="btn btn-info" />
            </div>
        </form>
    </div>
</div>
@section scripts{
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript">
       
        $("input").change(function () {
            var reg = "/^[-.&()a-zA-Z0-9'' ']*$/";
            var r = $(this).val().match(reg); 
            var name = $(this).attr("name");
            if (r == null) {
                if (name == "FirstName" && $("#LastName").attr("aria-invalid") == "true") {
                    $("#user_name_error span[data-valmsg-for='FirstName']").attr("hidden", "hidden");
                    $("#user_name_error span[data-valmsg-for='LastName']").removeAttr("hidden");
                }else if (name == "LastName" && $("#FirstName").attr("aria-invalid") == "true") {
                    $("#user_name_error span[data-valmsg-for='LastName']").attr("hidden", "hidden");
                    $("#user_name_error span[data-valmsg-for='FirstName']").removeAttr("hidden");
                }else {
                    $("#user_name_error span[data-valmsg-for='FirstName']").removeAttr("hidden");
                    $("#user_name_error span[data-valmsg-for='LastName']").removeAttr("hidden");
                }
                    
            }
        })
    </script>
}

result: