bootstrapValidator ajax 请求,防止在提交后关闭引导模式

bootstrapValidator ajax request, prevent closing bootstrap modal after submitting

本文关键字:模式 提交 请求 ajax bootstrapValidator      更新时间:2023-09-26
嗨,我

使用bootstrapValidator来验证我的表单,我不知道在验证表单后在哪里添加ajax请求。 并且还希望防止在提交表单后关闭引导模式。 我提出了类似的问题,但仍然无法使其工作。

这是我的引导模式

<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();
        }

    });
});

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

您使用的是版本 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 ...
    });

来源在这里

在这里摆弄