2

我想要一个提示来解决我一直遇到的问题，我有两个功能，第一个验证表单，第二个是发布到 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();
});
4

3 回答 3

4

这就是您如何组合您的两个功能（当然，假设您的两个功能已经正常运行）。submitHandler在表格有效之前，火灾内部没有任何东西。根据文档，这是您放置任何 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

请参阅文档：

http://docs.jquery.com/Plugins/Validation/validate#toptions

submitHandler，回调，默认：默认（本机）表单提交
回调，用于在表单有效时处理实际提交。获取表单作为唯一参数。替换默认提交。验证后通过 Ajax 提交表单的正确位置。

于 2013-01-19T16:01:26.913 回答
0

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

插件/验证/验证

使用 submitHandler 实现您自己的表单提交，例如。通过阿贾克斯。

$("#myform").validate({
 submitHandler: function(form) {
   form.submit();
 }
});
于 2013-01-19T07:26:45.013 回答
0

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

于 2017-03-13T10:39:16.560 回答