locked
Validation not showing in Jquery Modal Popup RRS feed

  • Question

  • User-183185495 posted

    I am using .net core but my validation is not showing in my popup I use the same dialog for new and edit so need to be carefull it works the same

    <div>
        <form id="myForm">
            <div class="panel-body bootstrap-padding-overide">
                @Html.ValidationSummary(false, null, new { @id = "ValidationSummary", @class = "validationErrorBox" })
            </div>
    
            @Html.HiddenFor(m => m.Id)
            @Html.TextBoxFor(model => model.Name, new { @class = "form-control", @placeholder = "Name" })
            <span asp-validation-for="Name" class="text-danger"></span>
    
    
            @Html.TextBoxFor(model => model.Resitance, new { @class = "form-control", @placeholder = "Address" })
            <span asp-validation-for="Resitance" class="text-danger"></span>
    
            @Html.TextBoxFor(model => model.Passed, new { @class = "form-control", @placeholder = "Passed" })
            <span asp-validation-for="Passed" class="text-danger"></span>
    
            <select asp-for="CirtcutType"
                    asp-items="@Html.GetEnumSelectList(typeof(ElectricalSurvey.DAL.Models.CircuitModel.CirtcutTypes))"
                    class="form-control"></select>
    
    
            <div class="modal-footer">
                <button type="submit" id="btnSubmit" class="btn btn-primary" data-save="modal">@if (Model.Id > 0) {<span>Update</span> } else {<span>Save</span>} </button>
    
                <button type="button" class="btn btn-default" data-dismiss="modal">lose</button>
            </div>
        </form>
    
        <div style="text-align:center;display:none" id="loaderDiv">
            <img src="~/Content/InternetSlowdown_Day.gif" width="150" />
        </div>
    
    </div>

    The form displays fine but its not showing the validation tags its just closing the model

    <script>
    
        $(document).ready(function () {
            $("#btnSubmit").click(function () {
    
                $("#loaderDiv").show();
                var myformdata = $("#myForm").serialize();
                $.ajax({
    
                    type: "POST",
                    url: "/Electrician/SaveCircuit",
                    data: myformdata,
                    success: function () {
                        $("#loaderDiv").hide();
                        $("#MyEditUpateModal").modal("hide");
                        window.location.href = "/Electrician/Index";
    
                    }
    
                })
            })
    
        })
    
    
    </script>

    My Validation Scripts Partial has the following references 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"
    integrity="sha256-F6h55Qw6sweK+t7SiOJX+2bpSAa3b/fnlrVCJvmEj1A="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.9/jquery.validate.unobtrusive.min.js"
    integrity="sha256-paoxpct33kY9fpQlvgC8IokjGq8iqYaVFawgFPg8oz0="
    crossorigin="anonymous"></script>



    Saturday, June 13, 2020 7:05 PM

All replies

  • User-474980206 posted

    Validation happens on the form submit event. Not a button click. You will call validation manually and check the result.

       https://jqueryvalidation.org/valid/

    Saturday, June 13, 2020 10:23 PM
  • User2078676645 posted

    Hi,

    It seems that you don't have the MyEditUpateModal tag. In additon, if you want to validate the form, the verification logic should be written before the request.

    Regards,

    Evern

    Monday, June 15, 2020 3:30 AM