kaushik guru

kaushik guru

  • NA
  • 252
  • 30.1k

Clientside and server side validation inserts data twice

Feb 28 2023 12:40 PM

I need to validate data from  client side and server side in my project . I use ajax to validate client side data but i have certains statements inside (model.isvalid) . so i need to post data on button click also . Becasue of this the data is getting inserted 2 times intead of 1. I can understand that i am passing same data twice to the controller one via ajax call and one on form post method 

I can not remove the ajax call since my org is asking for a client side validation . How to resolve this error

My view is as follows

````

<form id="canditateForm" asp-action="CreateCanditae" method="post">

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


````

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


````

inside model i have custom validation for dropdown which is not getting validated on client side validation

my controller 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; }

}}}

````

How to resolve this


Answers (1)