在引導模式下的HTML5表單驗證

我對jquery和javascript比較陌生。單擊模式中的「打開模態」按鈕打開窗體。接下來，當我點擊模式中的「保存」時，它應該驗證HTML5表單，如果成功的驗證應該調用另一個函數「addDetails（）」。在引導模式下的HTML5表單驗證

如何使用現有的jQuery表單驗證插件或任何其他方法來實現此目的？我使用哪些CDN需要參考？

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myFormModal">Add Details</button> 

     <div id="myFormModal" class="modal fade" role="dialog"> 
      <div class="modal-dialog"> 


      <div class="modal-content"> 
       <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Add details</h4> 
       </div> 
       <div class="modal-body"> 
       <form class="form-horizontal" id="myForm" name="contact" action="#"> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="dor">Date of Registeration:</label> 
        <div class="col-sm-8"> 
         <input type="date" class="form-control" id="dor" name="dor" required> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="name">Name:</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" id="name" name="name" required> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="weburl">Website:</label> 
        <div class="col-sm-8"> 
         <input type="url" class="form-control" id="weburl" name="weburl" required> 
        </div> 
        </div> 
        <div class="form-group"> 
        <label class="control-label col-sm-3" for="myphoto">Image:</label> 
        <div class="col-sm-8"> 
         <input type="text" class="form-control" id="myphoto" name="myphoto" required> 
        </div> 
        </div> 
        <hr /> 
        <div class="form-group">   
        <div class="col-sm-offset-3 col-sm-3"> 
         <button type="button" class="btn btn-primary btn-sm" onclick="addDetails()">Save</button> 
        </div> 
        <div class="col-sm-3"> 
         <button type="reset" class="btn btn-primary btn-sm">Reset</button> 
        </div> 
        <div class="col-sm-3"> 
         <button type="button" class="btn btn-primary btn-sm close-external-modal" data-dismiss="modal">Close</button> 
        </div> 
        </div> 
       </form> 
       </div> 
      </div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2017-04-04 Sunny

有一個表格樣本：

<form> 
<textarea required></textarea> 
<input type="submit" style="display:none;"/> 
</form> 

<a>Some other button to trigger event</a>

現在我們要檢查的形式正確填寫：

//this is <a> click event: 
if (!$('form')[0].checkValidity()) { 
$('form').find('input[type="submit"]').click(); 
return false; 
}

這將觸發形式發送，但將不會發送，因爲有是錯誤;）

似乎html5驗證錯誤顯示在輸入[類型=「提交」]點擊:)

希望也能爲你效勞！ :)

來源

2017-04-04 06:11:50

Thanks..but我如何調用成功驗證的另一個函數？在這種情況下，按鈕類型是否應該「提交」？ – Sunny

在提交調用你想要的方法，但在該方法內首先檢查上述條件....如果結果爲false終止或顯示彈出驗證失敗.. –

在引導模式下的HTML5表單驗證

回答

相關問題