模态弹出表单验证在 onclick 函数中不起作用

Question

我有一个模态表单，已经尝试过它的号码验证、远程验证等，效果很好

这是我的模态部分形式

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

模态js代码：

$('#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()
                }
            });
        });

和onClick提交功能：

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

我错过了什么？任何帮助建议都可以，谢谢

Answer 1

如果你认为使用 ModalPopupExtender(Ajax)， 我可以和你分享我一直使用的代码

1-ascx 文件

''' 标题 asp:Label> '''

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- 添加您的 .net 页面 ajax(alertWindow1) 并在 .cs 文件中使用它

''' if (你的情况){alertWindow1.Show("Success .... ", "success");}else{alertWindow1.Show("Error .. ", "error");} '''

Answer 2

这是一个演示：

学生：

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

查看（当点击提交按钮时，它会验证并尝试提交表单）：

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

结果：