用歐芹和莫代爾窗口驗證

我有一個問題，無法解決。我有一個按鈕，當你點擊它時會向用戶確認顯示一條消息，在打開這個模式之前，我想驗證所有字段都已填滿。用歐芹和莫代爾窗口驗證

爲了驗證我使用的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

用歐芹和莫代爾窗口驗證

回答

相關問題