Question

我有一个小注册表单，我尝试使用bootstrap的submitHandler提交此表单，但它给了我Uncaught TypeError: Cannot read property 'attr' of null。

我使用此代码验证并提交：

 $(document).ready(function(){
        //To validate the registration form and save its value after validation
        $('#registerForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                  email: {
                    validators: {
                        notEmpty: {
                                message: 'The email is required and cannot be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                },                
                 password: {
                    validators: {
                        notEmpty: {
                            message: 'The password is required and cannot be empty'
                        }
                    }
                },
                confirmPassword: {
                            validators: {
                        notEmpty: {
                            message: 'The password is required and cannot be empty'
                        }
                    }
                },
                submitHandler: function(form) { // <- only fires when form is valid
                    $.ajax({
                        type: 'POST',
                        url: 'include-ajax/check_and_save_registration_form.php',
                        data: $(form).serialize(),
                        success: function() {
                            $(form).fadeOut(500, function(){
                                $(form).html("USER DONE!").fadeIn();
                            });
                        }
                    });            // <- end '.ajax()'
                    return false;  // <- block default form action
                }
            }
        });
    });

为什么我会收到错误？当我删除submitHandler时，我没有收到该错误，但我需要它将表单数据存储在我的数据库中。

数据已正确验证但未提交。

我还使用了submitHandler: function(validator, form, submitButton)。仍然给出同样的错误。如何提交表格而不会收到错误？

my for html：

<div class="pages_container">
    <form id="registerForm" method="post" class="form-horizontal">
       <div class="form-group">
            <label class="col-lg-3 control-label">Email address</label>
            <div class="col-lg-6">
                <input class="form-control" name="email" type="email" />
            </div>
       </div>            
       <div class="form-group">
            <label class="col-lg-3 control-label">Password</label>
            <div class="col-lg-6">
                <input type="password" class="form-control" name="password" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-lg-3 control-label">Retype password</label>
            <div class="col-lg-6">
                <input type="password" class="form-control" name="confirmPassword" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-lg-6 col-lg-offset-3">
                <button type="submit" class="btn btn-primary btn-lg btn-block">Register</button>
            </div>
        </div>      
        </div>
    </form>
</div>

Answer 1

请参阅此页，了解通过ajax提交表单的正确方法：Using Ajax to Submit the Form

$(document).ready(function() {
    $(form)
        .bootstrapValidator({
            ... options ...
        })
        .on('success.form.bv', function(e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function(result) {
                // ... Process the result ...
            }, 'json');
        });
});

提交引导表单时出现jQuery错误

1 个答案: