Question

嗨我使用bootstrapValidator验证我的表单，我不知道在验证表单后在哪里添加ajax请求。并且还希望在提交表单后阻止关闭bootstrap模式。我提到了类似的问题，仍然无法使其发挥作用。

这是我的引导模式

<a href="#"class="btn btn-lg btn-black ico-windows" data-backdrop="static" data-keyboard="false"  data-toggle="modal" data-target="#AddAlbum"  > Create New Album </a>
<!-- Modal -->
<div class="modal fade"  id="AddAlbum" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Create New Album</h4>
            </div>
            <div class="modal-body">
                <div id="formregister"> 
                    <form action="" class="form-horizontal" role="form" id="newAlbum" >
                        <p class="qc-errmsg" style="display: none;">&nbsp;</p>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Album Name</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="inputEmail3" name="albumName" placeholder="Album Name">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label"  >Description</label>
                            <div class="col-sm-10">
                                <textarea class="form-control" rows="3" name="description"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button"  class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" onclick="send()" value="cart" class="btn btn-primary">Save Changes</button>  

                            </div>
                        </div>
                    </form>
                </div> <!-- form register -->
                <div id="successfulpost" style="font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #ff0000; display: none;">
                    <p class="jst-txt"><span>Thank you,</span> for showing your Interest !!</p>
                    <p class="jst-txt">Our property advisor shall get in touch with you very shortly..</p>
                </div> 
            </div> <!-- model body-->
        </div>
    </div>
</div>

这是我的javascript

$(document).ready(function () {
    //validations
    $('#newAlbum').bootstrapValidator({
    // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            albumName: {
                message: 'The Album Name is not valid',
                validators: {
                    notEmpty: {
                    message: 'The Album Name  is required and cannot be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The Album Name  must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9]+$/,
                        message: 'The Album Name  can only consist of alphabetical and number'
                    }
                },
                //form.submit();
            }
        }
    },
    submitHandler: function(form) {
    $(form).ajaxSubmit({
        url: "add_album.php",
        type: "POST",
        success: function () {
            alert('done');
            $('#newAlbum').hide();
            $('#successfulpost').show();
        }


    });
});

我为此制作了一个jsbin http://jsbin.com/xatog/8/edit?html,js,output

Answer 1

您使用的是0.5.3版。他们已移除submithandler选项并添加了一个事件success.form.bv。

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

      var $form        = $(e.target),
        validator    = $form.data('bootstrapValidator'),
        submitButton = validator.getSubmitButton();

      // Do whatever you want here ...
    });

来源here

Fiddle here

bootstrapValidator ajax请求，防止提交后关闭bootstrap模式

1 个答案: