提交按钮在bootstrap 3中不起作用(使用bootstrapvalidator)

时间:2014-10-09 21:00:47

标签: javascript button twitter-bootstrap-3

这是我的联系页面表单代码。我正在使用bootstrap 3和bootstrapvalidator。问题是当我点击按钮"发送消息"什么都没发生。我的代码有什么问题吗? 我正在使用在bootstrap框架上创建的编码模板。 验证,除了这个按钮,一切都很好。

<form action="1.html" id="defaultForm" method="post">
                    <div class="form-group">
                        <label class="control-label">Name</label>

                            <input type="text"  class="span12"class="form-control" name="username"     placeholder="Your First Name" /> <!--SET CLASS=SPAN12 ONLY else VALIDATION SIGNS WILL BE DISORDERED-->
                    </div>
                    <div class="form-group">
                        <label class="control-label">Email </label>
                        <input type="text" class="span12" class="form-control" name="email" placeholder="Your Email Address" />   <!--SET CLASS=SPAN12 ONLY else VALIDATION SIGNS WILL BE DISORDERED-->
                    </div>

                    <div class="form-group">
                        <label class="control-label">Message</label>
                        <textarea rows="8" class="span12" name="msg" placeholder="Your Message or Commnet :)"></textarea>    <!--SET CLASS=SPAN12 ONLY else VALIDATION SIGNS WILL BE DISORDERED-->
                    </div>

                    <div class="form-group">
                        <label id="captchaOperation"></label>
                            <input class="span4" type="text" class="form-control" name="captcha" />
                    </div>

                    <button type="submit" class="btn-u">Send Message</button>
                </form>

BootstrapValidator脚本

<script type="text/javascript">
        $(document).ready(function() {
           function randomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        };
        function generateCaptcha() {
            $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
        };
        generateCaptcha();

        $('#defaultForm')
        .bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: 'The name is not valid',
                    validators: {
                        notEmpty: {
                            message: 'The name is required and can\'t be empty'
                        },
                        stringLength: {
                            min: 6,
                            max: 30,
                            message: 'The name must be more than 6 and less than 30 characters long'
                        },
                        /*remote: {
                            url: 'remote.php',
                            message: 'The username is not available'
                        },*/
                        regexp: {
                            regexp: /^[a-zA-Z]+$/,
                            message: 'The name can only consist of alphabetical'
                        }
                    }
                },
                captcha: {
                    validators: {
                        callback: {
                            message: 'Wrong answer',
                            callback: function(value, validator) {
                                var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
                                return value == sum;
                            }
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email address is required and can\'t be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                },
                msg: {
                    validators: {
                        notEmpty: {
                            message: 'The is required and can\'t be empty'
                        },
                        stringLength: {
                            min: 10,
                            message: 'The message must be more than 10 characters long'
                        }
                    }
                }
            }
        })
.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) {
                console.log(result);
            }, 'json');

            if (!bootstrapValidator.isValidField('captcha')) {
                // The captcha is not valid
                // Regenerate the captcha
                generateCaptcha();
            }
        });

});
</script>

0 个答案:

没有答案