Preventing Jqueryvalidation from validate remote on modals open

Question

I have script like this:

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,
                            });
                        }
                    },
                })
            }
        });

it seems like the jqueryvalidation plugin is checking mail availability on modals open. since when I see at web inspector it sends a post request to /admin/users/check-email. how can i prevent this behaviour and make it only check when i press save_button? save_button is a button inside the modal.

You have not explained what you're trying to do, nor have you shown the relevant rendered HTML. We cannot tell by looking at your OP, which buttons are in the modal and which are not. — Sparky, Aug 18 '19 at 15:02
@Sparky https://jsfiddle.net/6hewjqro/3 here's some of the HTML and JS I've used. I want when the button inside the modals clicked then it will be validated not when modals are open. — Ying, Aug 18 '19 at 18:47
I really think you should go take another look at [the last question you asked](https://stackoverflow.com/questions/57431117/jquery-validation-not-working-on-form-without-label). Pay attention to my comments... the accepted answer is completely wrong - should not have used `success` handler. Use the `submitHandler` for any Ajax that occurs when the form is submitted. — Sparky, Aug 18 '19 at 20:26
@Sparky ah sorry just read your comment there. but what is OP do you mean? I don't understand. and I think now I know how to do it just like u said, I will give it try. — Ying, Aug 18 '19 at 20:54
Let said i put my ajax in submitHandler, is it necessary for me to check within the form is correct like this: if (add_form.valid()) { }? or it doesn't need anymore? — Ying, Aug 18 '19 at 20:58
here's all my JS code, i follow what you said to put ajax in submitHandler but now my edit button doesn't work. JS: https://pastebin.com/am3yrP5e HTML: https://pastebin.com/5byhu6bP — Ying, Aug 18 '19 at 21:11
OP => Original Post (question above) or Original Poster (you). I think you need to read read read... no you do **not** put a conditional validity check inside `submitHandler`, because as stated in the documentation, the `submitHandler` only fires when the form is already valid. I am not going to look at two different Pastepins to put together your HTML and JS.... it's up to you to fully describe your problem in the OP, include all relevant code, and include any working demos such as jsFiddles. — Sparky, Aug 19 '19 at 14:33

Eko · Accepted Answer · 2019-08-20T21:49:53.487

Try this:

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,
                            });
                        }
                    },
                })
            }
        });

Preventing Jqueryvalidation from validate remote on modals open

1 Answers1