用欧芹和莫代尔窗口验证

我有一个问题，无法解决。我有一个按钮，当你点击它时会向用户确认显示一条消息，在打开这个模式之前，我想验证所有字段都已填满。用欧芹和莫代尔窗口验证

为了验证我使用的lib 香菜

如果我只用简单的按钮，如下验证成功。

<button class="btn btn-primary" type="submit">Submit</button>

但是，如果您使用调用模式的按钮不能使用验证器之前。

<button data-toggle="modal" data-target="#md-default" type="button" id="postar" class="btn btn-info btn-lg"><i class="fa fa-check"></i> <b>Enviar</b></button> 


<!-- Modal --> 
          <div class="modal fade" id="md-default" tabindex="-1" role="dialog"> 
          <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> 
            </div> 
            <div class="modal-body"> 
             <div class="text-center"> 
             <div class="i-circle primary"><i class="fa fa-check"></i></div> 
             <div class="confirmacao" id="confirmacao"> 
              <h4>Confirma o envio do Push?</h4> 
             </div> 
             <div class="resp"></div> 
             <p></p> 
             </div> 
            </div> 
            <div class="modal-footer"> 
             <button type="button" class="btn btn-default btn-flat" data-dismiss="modal" id="cancelButton" >Cancelar</button> 
             <button type="submit" class="btn btn-primary btn-flat enviar" id="submitButton" >Sim</button> 
             <button type="button" style="display: none" class="btn btn-default btn-flat" data-dismiss="modal" id = "closeButton">Fechar</button> 
            </div> 
           </div> 
           <!-- /.modal-content --> 
          </div> 
          <!-- /.modal-dialog --> 
          </div> 


<!-- /.modal -->

来源

2016-09-13 William

可以成功验证完成后手动开启模式。 – Nimmi

您可以手动开启模式如下图所示：

.on('form:submit', function() { 
    $('#md-default').modal('show'); 
    return false; 
});

Codepen link

来源

2016-09-13 19:59:01 Nimmi

Nimmi，它验证了好的领域！但是随后他打开了模态，只有在所有字段都正常的情况下才打开模态。 – William

我管理，删除data-toggle =“modal”后工作。谢谢你的朋友 – William

如果你检查我的codepen链接比我认为它正确吗？ – Nimmi

用欧芹和莫代尔窗口验证

回答

相关问题