成功提交后如何关闭模态框并在表单提交时有条件地打开第二个模态框

Question

我想在成功提交表单后关闭表单模式并在所有错误清除后显示另一个模式框

当表单提交后，表单上的一个html选择列表的值发生了变化，那么会弹出有条件的js确认。用户必须点击 js 确认弹窗上的 OK 按钮才能继续提交表单。

否则如果html选择列表没有改变，js确认弹窗不会显示，表单会提交。

这些是我的代码：

 $('#infoForm').bootstrapValidator({
//        live: 'disabled',
        message: 'This value is not valid',
      
        fields: {
            sName: {
                validators: {
                    notEmpty: {
                        message: 'The name is required and cannot be empty'
                    },
					stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            sfName: {
                validators: {
                    notEmpty: {
                        message: 'The Father name is required and cannot be empty'
                    },
					stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The Father name must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The Father name can only consist of alphabetical, number, dot and underscore'
                    }
                }
            }
          
        }
    });

<!--First modal Box-->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog modal-sm">
      <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="mySmallModalLabel">Modal Box</h4>
        </div>
        <div class="modal-body">
		
     <form role="form" name="infoForm" id="infoForm" method="POST" action=""> 
    <div class="form-group">   	
    <input type="name" class="form-control" placeholder="Your Name" name="sName" id="sName" />
	</div>
    <div class="form-group">
    <input type="name" class="form-control" placeholder="Father Name" name="sfName" /></div>  
             <div class="form-group">
    <button type="submit"  name="Submit1" value="Submit"  class="btn btn-default" data-toggle="modal" data-target="#basicModal" >Submit</button></div>
    </form>

	</div>
	 <div class="modal-footer"></div>
	</div>
    </div>	
  </div><!--end First modal Box-->
      <!-- second modal box -->
    <div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">second modal box</h4>
          </div>
          <div class="modal-body">
			<p>Your Information successfully submit</p>
          </div>
          <div class="modal-footer"> </div>
        </div>
      </div>
    </div>
   <!--  end second modal box-->

Answer 1

使用模态框的Closing事件检查是否成功并打开新的模态