尝试使用带有submitHandler的jquery表单验证器提交表单

嗨我正在玩jQuery表单验证器,表单验证完全正常,问题是当我点击提交时,页面刷新这不是我想要的目标.表单会发布数据进入我的数据库的数据,这是一件好事.

我的Javascript文件

$().ready(function () {


$('#registerForm').validate({

    rules: {
        firstname: {
            required: true,
            nowhitespace: true,
            lettersonly: true,
        },
        surname: "required",
        password: {
            required: true,
            minlength: 5,
            maxlength: 10
        },
        confirm_password: {
            required: true,
            minlength: 5,
            equalTo: "#password1",
        },
        email: {
            nowhitespace: true,
        }

    },

    messages: {
        firstname: {
            required: 'Please enter a name',
        },
        surname: {
            required: 'Please enter a surname',
        },
        email: {
            required: 'Please enter an email address',
            email: 'Please enter a valid email'
        },
        password: {
            required: 'Please provide a password',

        },
        confirm_password: {
            required: 'Please confirm your password',

        }

    },

    errorElement: 'ul',
    errorPlacement: function (error, element) {
        let placement = $(element).data('error');
        if (placement) {
            $(placement).append(error)
        } else {
            error.insertAfter(element);
        }
    },

    submitHandler: function () {

        postContent();
    },

});

function postContent() {

    $('#registerForm').on('submit',function () {

        let that = $(this),
            url = that.attr('action'),
            type = that.attr('method'),
            data = {};
        that.find('[name]').each(function (index, value) {
            let that = $(this),
                name = that.attr('name'),
                value = that.val();

            data['name'] = value;
        });

        $.ajax({
            url: url,
            type: type,
            data: data,
            success: function (response) {
                console.log(response);
            }

        });

        return false;
    });
}

和HTML形式本身

    
Register
    

        

        

        

    
    

        
            

                

                    
                    First Name *
                
                

                    
                    Last Name *
                
            
            

                

                    
                    Email *
                
            

            

                

                    
                    Password *
                    

                
            
            

                

                    
                    Confirm Password *
                
            
            Register
                send
            
              
        
    

要通过刷新页面来停止表单提交的默认行为,您需要添加以下内容.

$('#registerForm').on('submit',function (e) {
    e.preventDefault();
...

另一种方法是使用"return false".这可以防止发生默认事件,并且还可以阻止事件传播.

$('#registerForm').on('submit',function (e) {
    return false;
...