防止 Jquery Validation 表单验证远程打开模式

Question

我有这样的脚本：

const add_modal =  $('#add_modal');
const add_form = $('#add_form');
const add_button = $('#add_button');
const save_button = $('#save_button');

let add_validator = add_form.validate({

            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
            errorClass: 'validation-invalid-label',

            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },

            // Different components require proper error label placement
            errorPlacement: function(error, element) {

                // Unstyled checkboxes, radios
                if (element.parents().hasClass('form-check')) {
                    error.appendTo( element.parents('.form-check').parent() );
                }

                // Input with icons and Select2
                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                    error.appendTo( element.parent() );
                }

                // Input group, styled file input
                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                    error.appendTo( element.parent().parent() );
                }

                // Other elements
                else {
                    error.insertAfter(element);
                }
            },
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 20
                },
                email: {
                    required: true,
                    email: true,
                    remote: "/admin/users/check-email",
                },
                role: {
                    required: true,
                },
                password: {
                    required: true,
                    minlength: 12,
                },
                password_verification: {
                    required: true,
                    minlength: 12,
                    equalTo: '#password'
                },
            },
            messages:{
                email:{
                    remote: "Email is already taken."
                }
            }
        });

        add_button.click(function (e) {
            e.preventDefault();
            add_modal.modal("show");
            add_validator.resetForm();
            $(':input').val("");
            $("#csrf").val($csrf);
        });

        save_button.click(function (e) {
            e.preventDefault();
            let form = $(this).closest('form');
            let $action = form.attr('action');
            let $method = form.attr('method');
            let $data  = form.serialize();

            if (add_form.valid()) {
                $.ajax({
                    url: $action,
                    type: $method,
                    data:$data,
                    success: function (result) {
                        if (result.type === 'success') {
                            add_modal.modal("hide");
                            add_validator.resetForm();
                            swalInit({
                                title: 'Success!',
                                text: result.text,
                                type: 'success',
                                timer: 3000,
                            }).then((reload) => {
                                datatables.ajax.reload();
                            });
                        } else {
                            swalInit({
                                title: 'Oops...',
                                text: result.text,
                                type: 'error',
                                timer: 3000,
                            });
                        }
                    },
                })
            }
        });

jqueryvalidation 插件似乎正在检查模式打开时的邮件可用性。因为当我在网络检查器上看到它向 /admin/users/check-email 发送了一个 post 请求。我怎样才能防止这种行为并让它只在我按下 save_button 时检查？ save_button 是模式内的一个按钮。

Answer 1

试试这个：

let update_validator = update_form.validate({
            ignore: 'input[type=hidden], .select2-search__field', // ignore hidden fields
            errorClass: 'validation-invalid-label',

            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass);
            },

            // Different components require proper error label placement
            errorPlacement: function(error, element) {

                // Unstyled checkboxes, radios
                if (element.parents().hasClass('form-check')) {
                    error.appendTo( element.parents('.form-check').parent() );
                }

                // Input with icons and Select2
                else if (element.parents().hasClass('form-group-feedback') || element.hasClass('select2-hidden-accessible')) {
                    error.appendTo( element.parent() );
                }

                // Input group, styled file input
                else if (element.parent().is('.uniform-uploader, .uniform-select') || element.parents().hasClass('input-group')) {
                    error.appendTo( element.parent().parent() );
                }

                // Other elements
                else {
                    error.insertAfter(element);
                }
            },
            rules: {
                name: {
                    required: true,
                    minlength: 2,
                    maxlength: 20
                },
                email: {
                    required: true,
                    email: true,
                    remote: {
                        url: "/admin/users/email-available",
                        type: "post",
                        data: {
                            user_id: function () {
                                return $("#id").val();
                            }
                        }
                    }
                },
                role: {
                    required: true,
                },
                password: {
                    minlength: 12
                },
                password_verification: {
                    required: isPasswordPresent,
                    minlength: 12,
                    equalTo: "#update_password"
                },
            },
            messages:{
                email:{
                    remote: "Email is already taken."
                }
            },

            submitHandler: function(form, event) {
                event.preventDefault();
                let $action = $(form).attr('action');
                let $method = $(form).attr('method');
                let $data  = $(form).serialize();

                $.ajax({
                    url: $action,
                    type: $method,
                    data: $data,
                    success: function (result) {
                        if (result.type === 'success') {
                            update_modal.modal("hide");
                            update_validator.resetForm();
                            swalInit({
                                title: 'Success!',
                                text: result.text,
                                type: 'success',
                                timer: 3000,
                                showCloseButton: true
                            }).then((reload) => {
                                datatables.ajax.reload();
                            });
                        } else {
                            swalInit({
                                title: 'Oops...',
                                text: result.text,
                                type: 'error',
                                timer: 3000,
                            });
                        }
                    },
                })
            }
        });

防止 Jquery Validation 表单验证远程打开模式

Preventing Jqueryvalidation from validate remote on modals open

php

jquery

jquery-validate