Try to search your question here, if you can't find : Ask Any Question Now ?

Preventing Jqueryvalidation from validate remote on modals open

HomeCategory: stackoverflowPreventing Jqueryvalidation from validate remote on modals open
Avatarpushpa asked 1 month ago

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.

1 Answers
Best Answer
AvatarFernando answered 1 month ago
Your Answer

3 + 9 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com