Question

当我提交表单时，Jquery验证器第二次不起作用。验证器第二次没有附加到提交事件。

我不是提交处理程序，但也没有调用valid（）函数。

<script>
    $(document).ready(function() {
        $("#login_form").submit(function() {
            $("#login_form").validate({
                rules: {
                    username: {
                        required: true
                    },
                    password: {
                        required: true,
                        minlength: 6
                    }
                },

                messages: {
                    username: {
                        required: "Enter your username"
                                                },
                    password: {
                        required: "Enter your password",
                        minlength: "Password must be minimum 6 characters"
                    },
                },



                errorPlacement: function(error, element) {
                    error.hide();
                    $('.messagebox').hide();
                    error.appendTo($('#alert-message'));
                    $('.messagebox').slideDown('slow');



                },
                highlight: function(element, errorClass, validClass) {
                    $(element).parents('.form-group').addClass('has-error');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).parents('.form-group').removeClass('has-error');
                    $(element).parents('.form-group').addClass('has-success');
                }
            });

            if ($("#login_form").valid()) {
                var data1 = $('#login_form').serialize();
                $.ajax({
                    type: "POST",
                    url: "login.php",
                    data: data1,
                    dataType: 'json',
                    success: function(msg) {

                        if (msg.result == 1) {
                        $('.messagebox').addClass("success-message");
                        $('.message').slideDown('slow');
                        $('#alert-message').text("Logged in.. Redirecting");

                            $('#login_form').fadeOut(5000);
                            window.location = "members.php"
                        } else {    
                        console.log(msg.result);
                        $('.messagebox').hide();
                        $('.messagebox').addClass("error-message");
                        $('#alert-message').html(msg.result);
                         $('.messagebox').slideDown('slow');
                        }
                    }
                });
            }
            return false;
        });

    });
</script>

Answer 1

问题在于：

$("#login_form").submit(function() {
        $("#login_form").validate({...

您在每个表单提交上重新绑定验证，您的验证绑定应该只在document.ready事件中设置一次，您应该始终在文档就绪事件和页面加载中设置/绑定jquery validate，而不是一次又一次Ajax回发。您在表单提交事件中多次触发验证检查是正确的，但是：

$("#login_form").submit(function() {
    if ($("#login_form").valid()) {...

这是固定代码：

<script>
$(document).ready(function() {

         $("#login_form").validate({
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true,
                    minlength: 6
                }
            },

            messages: {
                username: {
                    required: "Enter your username"
                                            },
                password: {
                    required: "Enter your password",
                    minlength: "Password must be minimum 6 characters"
                },
            },



            errorPlacement: function(error, element) {
                error.hide();
                $('.messagebox').hide();
                error.appendTo($('#alert-message'));
                $('.messagebox').slideDown('slow');



            },
            highlight: function(element, errorClass, validClass) {
                $(element).parents('.form-group').addClass('has-error');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).parents('.form-group').removeClass('has-error');
                $(element).parents('.form-group').addClass('has-success');
            }
        });//end validate bindings/settings


    $("#login_form").submit(function() {
                            //fire validation checks
        if ($("#login_form").valid()) {
            var data1 = $('#login_form').serialize();
            $.ajax({
                type: "POST",
                url: "login.php",
                data: data1,
                dataType: 'json',
                success: function(msg) {

                    if (msg.result == 1) {
                    $('.messagebox').addClass("success-message");
                    $('.message').slideDown('slow');
                    $('#alert-message').text("Logged in.. Redirecting");

                        $('#login_form').fadeOut(5000);
                        window.location = "members.php"
                    } else {    
                    console.log(msg.result);
                    $('.messagebox').hide();
                    $('.messagebox').addClass("error-message");
                    $('#alert-message').html(msg.result);
                     $('.messagebox').slideDown('slow');
                    }
                }
            });
        }
        return false;
    });

});

Jquery验证器第二次没有工作

1 个答案: