【问题标题】:Preventing Jqueryvalidation from validate remote on modals open在打开的模式上阻止 Jquery Validation 表单验证远程
【发布时间】:2019-08-18 04:59:15
【问题描述】:

我有这样的脚本:

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 插件似乎正在检查打开模式的邮件可用性。因为当我在 web 检查器上看到它时,它会向 /admin/users/check-email 发送一个发布请求。我怎样才能防止这种行为并让它只在我按下 save_button 时检查? save_button 是模态框内的一个按钮。

【问题讨论】:

  • 你没有解释你想要做什么,也没有显示相关的渲染 HTML。我们无法通过查看您的 OP 来判断哪些按钮在模态中,哪些不在。
  • @Sparky jsfiddle.net/6hewjqro/3 这是我使用过的一些 HTML 和 JS。我希望当模态框内的按钮被点击时,它不会在模态框打开时被验证。
  • 我真的认为你应该再看看the last question you asked。注意我的 cmets ......接受的答案是完全错误的 - 不应该使用 success 处理程序。对提交表单时发生的任何 Ajax 使用 submitHandler
  • @Sparky 啊抱歉,刚刚在那里阅读了您的评论。但是你的意思是什么?我不明白。我想现在我知道该怎么做了,就像你说的那样,我会试试看。
  • 假设我将我的 ajax 放在 submitHandler 中,我是否有必要像这样检查表单是否正确:if (add_form.valid()) { }?还是不再需要了?

标签: php jquery jquery-validate


【解决方案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,
                            });
                        }
                    },
                })
            }
        });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-09-11
    • 1970-01-01
    • 2010-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多