Modal popup form validation not working in onclick function

Question

I have a modal form, already tried it's number validation, remote validation and etc. and works fine

Here is my modal partial form

    <form id="EditForm" asp-action="Edit">
    <div class="modal-body">
        /*input here*/
    </div>
    <div class="modal-footer justify-content-between">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        @*<button type="submit" class="btn btn-success btn-flat"><i class="far fa-check-circle"></i> Save Changes</button>*@
        <button type="submit" class="btn btn-success btn-flat" onclick="submitResult(event)"><i class="far fa-check-circle"></i> Save Changes</button>
    </div>
</form>

Modal js code:

$('#tbProducts tbody').on('click', 'button', function () {
            var data = productsTable.row($(this).parents('tr')).data();
            //alert(data.id);
            $.ajax({
                url: '@Url.Action("Edit", "Products")',
                type: 'GET',
                data: { id: data.id },
                success: function (result) {
                    $('#EditUnitModal .modal-content').html(result);
                    //Here we parse the new form via jquery validation unobtrusive.
                    $.validator.unobtrusive.parse($('#EditUnitModal .modal-content form')[0]);
                    //Here we initialize select2 for the selected elements.
                    $('#Unit').select2({
                        theme: 'bootstrap4',
                        dropdownParent: $('#EditUnitModal')
                    })

                    $('#Category').select2({
                        theme: 'bootstrap4',
                        dropdownParent: $('#EditUnitModal')
                    })
                    $('#EditUnitModal').modal()
                }
            });
        });

And onClick submit function:

function submitResult(e) {
        e.preventDefault();
        Swal.fire({
            //code
        })
    }

What Am I missing? Any help suggestions will do, Thank you

yusuf hayırsever · Answer 1 · 2020-11-23T13:03:56.260

If do you think to use ModalPopupExtender(Ajax), I can share with you the code that I always use

1-ascx file

''' <%@ Control Language="C#" AutoEventWireup="true" CodeFile="Warning.ascx.cs" Inherits="Warning" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><%@ Import NameSpace="System.Web" %><%@ Import NameSpace="System.Web.UI" %><%@ Import NameSpace="System.Web.Mail" %><%@ Import NameSpace="System.Web.UI.WebControls" %><asp:Button ID="btnShow" runat="server" Style="display: none;" /><asp:Panel ID="pnlPopup" runat="server" Style="background-color: White; width:420px;border-width: 2px; border-color: gray; font-size: 10pt;fontfamily:Tahoma; line-height: 15px; border: 1px solid #A6A6A6;">Title<%--//For any fault …--%> <asp:Image ID="imgIcon" runat="server" /><%--//Textbox, when you take fault …--%><asp:Label ID="lblMessage" runat="server"></asp:Label><asp:Literal ID="ErrorMessage"runat="server"></asp:Literal><asp:ValidationSummary ID="RegisterUserValidationSummary" runat="server" CssClass="failureNotification" ValidationGroup="groupName"/><%--// When ModalPopupExtender opened, this button will close…--%><asp:Button ID="btnClose" Text="Close" runat="server" CausesValidation="False" onclick="btnClose_Click" /></asp:Panel><cc1:ModalPopupExtender ID="mpeUpdate" runat="server"PopupControlID="pnlPopup" TargetControlID="btnShow" BackgroundCssClass="ModalPopupBackground" DropShadow="true"/> '''

2-ascx.cs

''' public void Show(string Message, string Action){if (Action == "success"){imgIcon.ImageUrl = "~/Images/success.png";}else if (Action == "error"){imgIcon.ImageUrl = "~/Images/error.png";}lblMessage.Text = Message;mpeUpdate.Show();} '''

3- Add your .net page ajax(alertWindow1) and use it in .cs file

''' if (your condition){alertWindow1.Show("Success .... ", "success");}else{alertWindow1.Show("Error .. ", "error");} '''

You can use backticks three times (```) to beautify your code. — Akif, Nov 23 '20 at 13:03
You should consider that backticks(`) are different from single quotes(') and double quotes("). You can look into here: https://stackoverflow.com/questions/47067319/back-tick-vs-single-quote-in-js — Akif, Nov 23 '20 at 13:47
Ok, you can edit too. It will be more proper to understand, upvote, and accept your answer. — Akif, Nov 23 '20 at 13:55

score 0 · Answer 2 · answered Nov 24 '20 at 07:28

Here is a demo:

Student:

public class Student
    {
        public int Id { get; set; }
        [Required]
        public string Name { get; set; }
        [Range(5, 15)]
        public int Age { get; set; }
    }

View(when click submit button,it will validate and try to submit the form):

 <div class="row">
        <div class="col-md-4">
            <form method="post" id="studentForm">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <div class="form-group">
                    <label asp-for="Name" class="control-label"></label>
                    <input asp-for="Name" class="form-control" name="Name" />
                    <span asp-validation-for="Name" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Age" class="control-label"></label>
                    <input asp-for="Age" class="form-control" name="Age" />
                    <span asp-validation-for="Age" class="text-danger"></span>
                </div>
               
    
    
                <div class="form-group">
                   
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                        SaveChanges
                    </button>
                </div>
    
    
    
                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                Are you sure?
                            </div>
                            <div class="modal-footer">
                                <input type="submit" value="Submit" class="btn btn-info" onclick="hidemodal()"/>
                                <button type="submit" class="btn btn-secondary" data-dismiss="modal" value="Validate">Close</button>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
<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">
    function hidemodal() {
        $("#exampleModal").modal('hide');
    }
</script>

result:

Modal popup form validation not working in onclick function

2 Answers2

1-ascx file

2-ascx.cs

3- Add your .net page ajax(alertWindow1) and use it in .cs file