我如何才能从引导验证js文件显示确认模态

Question

我现在很难受。让我解释一下。

我有一个表单和一个js验证。如果验证ok，则出现一个确认模式，向数据库提交(或不提交)一些信息:

<div class="row-fluid">
<div class="span12">
    <!-- BEGIN VALIDATION STATES-->
    <div class="portlet box green">
        <div class="portlet-title">
            <div class="caption"><i class="icon-reorder"></i>Formulario de Carga</div>
        </div>
        <div class="portlet-body form">
            <!-- BEGIN FORM-->
            <form action="{site_url()}admin/testupdate" id="form_sample_2" class="form-horizontal" method="POST">
                <div class="alert alert-error hide">
                    <button class="close" data-dismiss="alert"></button>
                    Existen errores en el formulario. Por favor verifique.
                </div>
                <!-- modal -->
                <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                        <h3 id="myModalLabel3">Cargar Usuario</h3>
                    </div>
                    <div class="modal-body">
                        <p>Desea dar de alta al nuevo usuario?</p>
                    </div>
                    <div class="modal-footer">
                        <button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
                        <button data-dismiss="modal" class="confirm btn green" id="btnYes">Confirmar</button>
                    </div>
                </div>                    
                <!-- end modal -->
                <h3 class="form-section">Datos Personales</h3>
                <!-- row 1 -->
                <div class="row-fluid">
                    <div class="span6 ">
                        <div class="control-group">
                            <label class="control-label">Celular<span class="required">*</span></label>
                            <div class="controls">
                                <input type="text" class="m-wrap span8" name="cellphone" value="{$okInfo['cellphone']}" required> 
                            </div>
                        </div>
                    </div>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn green">Validate</button>
                        <button type="button" class="btn">Cancel</button>
                    </div>
                </form>
                <!-- END FORM-->
            </div>
        </div>
        <!-- END VALIDATION STATES-->
    </div>
</div>

然后我有两个js文件，一个用于验证，并显示模式，如果信息是ok..另一个是下面的代码，用来提交表单内容给admin.php中的函数:

$('#btnYes').on('click', function(e){
e.preventDefault();
$('#form_sample_2').submit();
});

当点击确认按钮从modal, modal消失，但它不会重定向到提交函数。

我使用Codeigniter, Bootstrap v3.0.0, jQuery 1.10.1, jQuery验证插件，Smarty模板引擎。

chrome和firefox浏览器。

我认为问题可能是来自验证文件的提交处理程序。这是代码片段:

var form2 = $('#form_sample_2');
var error2 = $('.alert-error', form2);
var success2 = $('#myModal', form2);
form2.validate({
  errorElement: 'span', 
  errorClass: 'help-inline', 
  focusInvalid: false, 
  ignore: "",
  rules: {
    cellphone: {
      required: true,
      minlength: 9,
      maxlength: 11,
      digits: true
    }
  },
  //some code
  submitHandler: function (form) {
    success2.modal('show');
    error2.hide();
  }
});

那么submitHandler函数是不允许我提交表单的函数吗?因为在检查验证和modal出现后，如果点击modal的提交按钮，它会再次执行验证和post永远不会到达控制器中的函数。

所以我现在的问题是我怎么做才能避免第二次验证并提交表单?

Answer 1

默认情况下，如果您省略type, button将是type="submit"，并且由于它已经在您的form中，它将像另一个submit按钮一样再次触发验证。把它改成type="button"，你就不需要preventDefault()了…

<button type="button" data-dismiss="modal" class="confirm btn green" id="btnYes">Confirmar</button>

如果你想让提交处理程序来控制它，所有的东西都需要放在submitHandler里面。

submitHandler: function (form) {
    success2.modal('show');
    error2.hide();
    $('#btnYes').on('click', function(){
        form.submit();
    });   
}

---

否则，由于#btnYes已经是submit按钮，如果您简单地摆脱click处理程序，您的原始submitHandler可能会工作得很好。