Question

我想要一个解决我遇到的问题的提示，我有两个函数，第一个验证表单，第二个是发布到PHP文件。

问题是表单在验证之前正在发送。我想知道是否可以将这两个函数结合起来，即首先验证，只有在表单提交的所有内容都正确时才进行验证。谁知道怎么做？

验证功能

$(document).ready(function() {

$('#singup-form').validate(
        {
            rules: {
                user_name: {
                    minlength: 3,
                    required: true
                },
                user_email: {
                    required: true,
                    email: true
                },
                user_password: {
                    required: true

                },
                confirmation_password: {
                    required: true,
                    equalTo: '#user_password'
                },
                user_phone: {
                    number: true,
                    minlength: 8
                },
                user_twitter: {
                    minlength: 3
                },
                agree: {
                    required: true
                }
            },
            highlight: function(label) {
                $(label).closest('.control-group').removeClass('success').addClass('error');
            },
            success: function(label) {
                label
                        .text('OK!').addClass('valid')
                        .closest('.control-group').removeClass('error').addClass('success');

            }
        });
}); // end document.ready

功能发布

$('#singup-form-submit').click(function(e) {
$.post("register", {
    user_name: $('#user_name').val(),
    user_email: $('#user_email').val(),
    user_password: $('#user_password').val(),
    confirmation_password: $('#confirmation_password').val(),
    user_ddd: $('#user_ddd').val(),
    user_phone: $('#user_phone').val(),
    user_twitter: $('#user_twitter').val(),
    agree: $('#agree').val()
}, function(data) {

    $('#resultado').html(data);
});
e.preventDefault();
});

Answer 1

这就是你将两个函数结合起来的方法（当然，假设你的两个函数已经正常运行）。在表单有效之前，submitHandler内的任何内容都不会触发。根据{{3}}，这是您放置任何ajax功能的地方。

使用内置submitHandler:，如下所示。

$(document).ready(function() {

    $('#singup-form').validate({
        rules: {
            user_name: {
                minlength: 3,
                required: true
            },
            user_email: {
                required: true,
                email: true
            },
            user_password: {
                required: true
            },
            confirmation_password: {
                required: true,
                equalTo: '#user_password'
            },
            user_phone: {
                number: true,
                minlength: 8
            },
            user_twitter: {
                minlength: 3
            },
            agree: {
                required: true
            }
        },
        highlight: function (label) {
            $(label).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (label) {
            label.text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            $.post("register", {
                user_name: $('#user_name').val(),
                user_email: $('#user_email').val(),
                user_password: $('#user_password').val(),
                confirmation_password: $('#confirmation_password').val(),
                user_ddd: $('#user_ddd').val(),
                user_phone: $('#user_phone').val(),
                user_twitter: $('#user_twitter').val(),
                agree: $('#agree').val()
            }, function(data) {
                $('#resultado').html(data);
            });
        }
    });

}); // end document.ready

参见文档：

documentation

submitHandler ，回调，默认：默认（本机）表单提交
当表单有效时，回调处理实际提交。获取形式作为唯一的论点。替换默认提交。正确的在验证后通过Ajax提交表单。

Answer 2

您可以使用提交处理程序，而不是仅仅将提交代码绑定到click事件。

Plugins/Validation/validate

使用submitHandler实现您自己的表单提交，例如。通过Ajax。

$("#myform").validate({
 submitHandler: function(form) {
   form.submit();
 }
});

Answer 3

可能这会有所帮助，我为jQuery编写了自己的插件，因为我需要一些模式的灵活性。 https://github.com/KirShur/ValidolRepo

jQuery Validation插件

3 个答案: