Question

我在提交表单时无法触发jquery验证时遇到问题。表单在模式窗口中呈现，并从两个单独的页面中调用。一个工作得很好并且可以在提交之前进行验证，但是另一个可以提交表单并且不会触发任何验证错误。

这是一个CodeIgniter系统，因此每个源页面都将模式作为视图调用并在运行时加载。

每个源页面的页面底部都有jquery脚本。

jQuery脚本显然位于不同的文件中，因此对它们执行了“差异检查器”。它们是完全一样的。

我检查了jquery选择器正在调用html表单元素的id属性。我还检查了这对于html页面是否唯一。

// modal is called from each source page as follows:

<?php $this->load->view('partials/modal-book-appointment', $data) ?>

// modal form is defined as follows:
<form action="<?= base_url(); ?>Appointment/savepatientform" method="post" da role="form" class="form-horizontal" 
    id="submitform-validation" enctype="multipart/form-data">

...
// modal submit buttons:
<div class="form-group">
   <div class="col-md-12">
<a onclick="$(this).closest('form').submit()" type="submit" class="btn-lg btn-success pull-right">Book an Appointment</a>
<a onclick="$('#modal_book_appointment').modal('hide')" type="button" class="cancel pull-left" data-dismiss="modal">Cancel</a>
</div>
</div>

// jquery validation code.
$(function () {
// Setup form validation on the #register-form element
        $("#submitform-validation").validate({

            // Specify the validation rules
            rules: {
                fname: "required",
                lname: "required",
                phone: "required",
                email: {
                    required: true,
                    email: true
                },
                agree: "required"
            },

            // Specify the validation error messages
            messages: {
                fname: "Please enter your first name",
                lname: "Please enter your last name",
                email: "Please enter a valid email address",
                phone: "Please enter your phone number",
                agree: "Please select the check box I acknowledge that this represents an accurate medical and dental history."
            },

            submitHandler: function (form) {
                form.submit();
            }
        });

即使未选中“同意”按钮，表单也应有效但仍会提交。

Answer 1

使用JavaScript提交表单会绕过常规Submit事件处理程序的触发器。

使用真正的提交按钮，而不是附加一些JavaScript的锚点。

Answer 2

升级jquery 2.2.4-> 3.4.1时遇到类似的问题

我有一个lib（我不能更改），它可以捕获提交，做很多事情，然后调用form.submit（）（但HTMLFormElement表单，而不是重载的jQuery）

jquery 2.2.4确实触发了其侦听器，而3.4.1不再触发

除了jQuery lib，我什么都没改变

我什至附加我的名字：$（'＃myForm'）。submit（function（）{...}）;

我尝试使用bind（..）和on（...），但由于它们是c的别名，所以它并没有改变任何东西。

我最终进行了有史以来最丑的调整，但这可行：

var form = document.getElementById('inscription');
        var oldSubmit = form.submit;
        form.submit = function() {
            form.submit = oldSubmit;
            $(form).trigger("submit");
   
        }

丑陋，但是直到我了解如何正确地将其与新的jquery附加在一起，这就是

表单提交未触发JQuery验证

2 个答案: