时间戳

首页 > 解决方案 > 表单提交时未触发 JQuery 验证

jquery - 表单提交时未触发 JQuery 验证

问题描述

我在提交表单时无法触发 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();
            }
        });

即使未选择“同意”按钮，表单也应该验证但提交。

标签： jquery

解决方案

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

我有一个捕捉提交的库（我无法更改），做了一堆东西，然后调用 form.submit() （但 HTMLFormElement 表单，而不是 jquery 重载）

jquery 2.2.4 确实触发了它的监听器，3.4.1 不再触发

我只改变了 jquery lib

我什至喜欢这样： $('#myForm').submit(function(){...});

我尝试使用 bind(..) 和 on(...) 但由于它们是 ofc 的别名，它并没有改变任何东西。

我最终做了有史以来最丑陋的调整，但这很有效：

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

丑陋，但直到我明白如何正确附加它与新的jquery，这将是

推荐阅读