提交处理程序正在工作,但速度很慢

Submit handler is working but its very slow

本文关键字:速度 工作 处理 程序 提交      更新时间:2023-09-26

大家好,我正在使用提交处理程序提交我的表单,它的工作,但它非常慢。请帮我快一点。提前感谢以下是我的javascript代码登录表单......

       var handleLoginForm = function () {
       $('.login-form').validate({
        errorElement: 'label', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        rules: {
            username: {
                required: true
            },
            password: {
                required: true
            },
             user_type: {
                required: true
            },
            remember: {
                required: false
            }
        },
        messages: {
            username: {
                required: "Username is required."
            },
            password: {
                required: "Password is required."
            },
              user_type: {
                required: "User Type is Required."
            }
        },
        invalidHandler: function (event, validator) { //display error alert on form submit   
            $('.alert-error', $('.login-form')).show();
        },
        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.control-group').addClass('error'); // set error class to the control group
        },
        data: $('#form_modulesadd').serialize(),
        success: function (label) {
            label.closest('.control-group').removeClass('error');
            label.remove();
        },
        errorPlacement: function (error, element) {
            error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
        },
           submitHandler: function (form) {
           $( ".login-form input" ).submit();
            window.location.href = "check.php";
        }
    });

当我使用php提交表单时速度很快,但我必须使用javascript来提交此表单......

在表单提交时运行JS:

$(".login-form").submit(function(){
 $('.login-form').validate({
        errorElement: 'label', //default input error message container
        errorClass: 'help-inline', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        rules: {
            username: {
                required: true
            },
            password: {
                required: true
            },
             user_type: {
                required: true
            },
            remember: {
                required: false
            }
        },
        messages: {
            username: {
                required: "Username is required."
            },
            password: {
                required: "Password is required."
            },
              user_type: {
                required: "User Type is Required."
            }
        },
        invalidHandler: function (event, validator) { //display error alert on form submit   
            $('.alert-error', $('.login-form')).show();
        },
        highlight: function (element) { // hightlight error inputs
            $(element)
                .closest('.control-group').addClass('error'); // set error class to the control group
        },
        data: $('#form_modulesadd').serialize(),
        success: function (label) {
            label.closest('.control-group').removeClass('error');
            label.remove();
        },
        errorPlacement: function (error, element) {
            error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
        },
           submitHandler: function (form) {
           $( ".login-form input" ).submit();
            window.location.href = "check.php";
        }
    });
});

这使得JS在表单提交之前不会运行。
更新:

$(".login_form").submit(function(){
  $(this).validate({ ... });
});

不确定这是否会工作,但是重复选择器对我来说似乎有点尴尬。

我通过像下面这样改变submitHandler的实现来解决同样的问题。我只取表单选择器的第一项[0]。

submitHandler: function (form) {
    $(".login-form input")[0].submit();
    ...
}