Clientside Dropdown validataion in razor ajax

Question

I have a form where i have multiple text box and dropdown boxes

My view is as follows

<form id="canditateForm" asp-action="CreateCanditae" method="post">
            @*<form id="canditateForm">*@
            <div class="row" rowspan="2">
            
                    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                    <div class="col-sm-2 form-group">
                        <label asp-for="EmployeePrefix">Prefix</label>
                    <select asp-for="EmployeePrefix" id="empprefix" name="emplprefix" class="form-control" asp-items="@ViewBag.prefix">
                        </select>
                        <span asp-validation-for="EmployeePrefix" class="text-danger"></span>
                    </div>
                    &nbsp;
                    <div class="col-sm-4 form-group">
                        <label asp-for="EmployeeFirstName">Canditate First Name</label>
                    <input asp-for="EmployeeFirstName" type="text" id="empfirstname" class="form-control" placeholder="Canditate Name (As per AADHAR)" required>
                        <span asp-validation-for="EmployeeFirstName" class="text-danger"></span>
                    </div>
                    &nbsp;
                    <div class="col-sm-4 form-group">
                        <label asp-for="EmployeeLastName">Canditate Last Name</label>
                    <input asp-for="EmployeeLastName" id="emplasttname" type="text" class="form-control" placeholder="Canditate Name (As per AADHAR)" required>
                        <span asp-validation-for="EmployeeLastName" class="text-danger"></span>
                    </div>
                    &nbsp;
            </div>
            <div class="row" rowspan="2">
                    <div class="col-sm-3 form-group">
                        <label asp-for="EmployeeGender">Gender</label>
                        <select asp-for="EmployeeGender" id="empgender" class="form-control" asp-items="@ViewBag.gender">
                        </select>
                        <span asp-validation-for="EmployeeGender" class="text-danger"></span>
                    </div>
                    &nbsp;
                    <div class="col-sm-3 form-group">
                        <label asp-for="EmployeeMaritalStatus">Marital Status</label>
                        <select asp-for="EmployeeMaritalStatus" id="empmaritalstatus" class="form-control" asp-items="@ViewBag.maritalstatus"></select>
                        <span asp-validation-for="EmployeeMaritalStatus" class="text-danger"></span>
                    </div>
                    
            </div>
                    <div class="col-sm-6 form-group">
                <input style="background-color:lightgreen;" type="submit" value="Create" onclick="savecanditateinfo()" class="form-control" />
                @*<input style="background-color:lightgreen;"  value="Create" onclick="savecanditateinfo()" class="form-control" />*@
                    </div>
                    <div class="col-sm-6 form-group">
                        <a asp-action="Index">Back to List<span style="font-size:large;"></span></a>
                    </div>
                    @if (TempData["msg"] != null)
                    {
                        <div class="err">@TempData["msg"]</div>
                    }
                    @if (ViewBag.Message != null)
                    {
                        <script type="text/javascript">
                            window.onload = function () {
                                alert("@ViewBag.Message");
                            };
                        </script>
                    }
        </form>

I am using jQuery now to validate the entire form by placing if for the form tag on the client side and my jQuery is as follows.

<script>
        $(document).ready(function () 
        {
            $.validator.unobtrusive.parse($("#canditateForm"));
        })

        

        function savecanditateinfo() 
        {
            if ($("#canditateForm").valid()) 
            {
                var formData = $("#canditateForm").serialize();
                console.log(formData);
                    $.ajax(
                        {
                            dataType: 'xhr',
                            url: "/HRDashboard/CreateCanditae",
                            type: "POST",
                            headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                            data: formData,
                                success: function (response) {
                                //alert(response);
                                },
                                error: function (request, status, error) {
                                //alert(request.responseText);
                                }

                        }
                     );
            }
        }
    </script>

I am able to validate the text boxes on client side itself but for dropdown as of now i need to hit the server to validate it. I am passing dropdown list via view bag and my model is as follows

public partial class EmployeeBasicInformation
    {
        public int EmployeeId { get; set; }

        [Required]
        [ValidPrefix(ErrorMessage =
            "Prefix can not be epmty")]
        public int? EmployeePrefix { get; set; }

        [RegularExpression(@"^[a-zA-Z\s\.\']+$", ErrorMessage = "Please enter a valid First name")]
        public string? EmployeeFirstName { get; set; }

        [RegularExpression(@"^[a-zA-Z\s\.\']+$", ErrorMessage = "Please enter a valid last name")]
        public string? EmployeeLastName { get; set; }

        [ValidGender(ErrorMessage =
            "Gender can not be epmty")]
        public int? EmployeeGender { get; set; }

        [Validmaritalstatus(ErrorMessage =
            "MaritalStatus can not be epmty")]
        public int? EmployeeMaritalStatus { get; set; }

i even tried adding required data anotation attribute to the model but still i can make it validate in the client side. Please guide.

Answer 1

From your question, I think in dropdown list, you set placeholder with null value, When user do not select any options manually and submit the form, The frontend validation will not validate the value of dropdown list, right?

I'm not sure what's your custom data annotation attribute like [ValidGender]. But from the error message, I think it is like the default [required] attribute, So here I use [required] attribute and default validation js to create a work demo.

public class TestModel
    {
        public string Name { get; set; }
        [Required(ErrorMessage =
            "Gender can not be epmty")]
        public int? EmployeeGender { get; set; }
    }

Controller

public IActionResult Test()
        {
            var test = new List<SelectListItem>();
           
            test.Add(new SelectListItem()
            {
                Text = "male",
                Value = "0"
            });
            test.Add(new SelectListItem()
            {
                Text = "female",
                Value = "1"
            });

            ViewBag.gender = test;

            return View();
        }

View

@model TestModel

<form method="post" id="canditateForm">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="col-sm-2 form-group">
        <label asp-for="Name">Prefix</label>
        <input asp-for="Name" type="text"  class="form-control" placeholder="Canditate Name (As per AADHAR)" required>
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="col-sm-4 form-group">
        <label asp-for="EmployeeGender">Canditate Last Name</label>
         <select asp-for="EmployeeGender" id="empgender" class="form-control" asp-items="@ViewBag.gender">
            <option value="">--Please Select your Gender---</option>
         </select>
        <span asp-validation-for="EmployeeGender" class="text-danger"></span>
    </div>

    <input style="background-color:lightgreen;" type="submit" value="Create" onclick="savecanditateinfo()" class="form-control" />
</form>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }

    <script>
        function savecanditateinfo()
        {
            if ($("#canditateForm").valid())
            {
                var formData = $("#canditateForm").serialize();
                console.log(formData);
                    $.ajax(
                        {
                            dataType: 'xhr',
                            url: "/Test/test",
                            type: "POST",
                            //headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                            data: formData,
                                success: function (response) {
                                //alert(response);
                                },
                                error: function (request, status, error) {
                                //alert(request.responseText);
                                }

                        }
                     );
            }
        }
    </script>
}

Demo: