使用jQuery驗證插件驗證模態窗體

我使用了來自www.jqueryvalidation.org的jquery驗證插件，並與引導模態窗體集成。 我面臨的問題是，驗證不適用於模式，但是當我在不使用模式的情況下測試表單上的jquery時，它可以工作。請幫忙。使用jQuery驗證插件驗證模態窗體

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="js/navbarscroll.js"></script> 
<script type="text/javascript" src="assets/js/bootstrap.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script> 
<script src="../../js/applicantFormValidation.js"></script> 
<link rel="stylesheet" type="text/css" href="../../css/style.css"> 
</head> 
<body> 
    <div class="container"> 
     <!-- Modal --> 
     <div class="modal fade" id="formModal" tabindex="-1" role="dialog" 
      aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <!-- Modal Header --> 
        <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="myModalLabel ">Apply for job 
          Position:</h4> 
        </div> 

        <!-- Modal Body --> 
        <div class="modal-body "> 
         <form name="applicationForm" role="form"> 
          <!--action="ApplicationFormCheck" method="POST"> --> 
          <div class="form-group row"> 
           <label for="firstName" class="col-md-2">First Name</label> 
           <div class="col-md-8 "> 
            <input type="text" class="form-control" id="firstName" 
             placeholder="Enter First Name" name="firstName" /> 
           </div> 
          </div> 
          <div class="form-group row"> 
           <label for="lastName" class="col-md-2">Last Name</label> 
           <div class="col-md-8"> 
            <input type="text" class="form-control" id="lastName" 
             placeholder="Last Name" name="lastName" /> 
           </div> 
          </div> 
          <div style="text-align: center;"> 
           <button id="applyNowBtn" type="submit" class="btn btn-default">Apply 
            Now</button> 
          </div> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

的style.css

form .error { 
    color: #ff0000; 
}

applicantFormValidation.js

$(document).ready(function() { 
    $("#applyNowBtn").click(function(e) { 
      e.preventdefault(); 
     $(function() { 
      var form = 
      $("form[name='applicationForm']").validate({ 
       // Specify validation rules 
       rules : { 
        firstName : "required", 
        lastName : "required", 
       }, 
       messages : { 
        firstName : "Please enter your firstname", 
        lastName : "Please enter your lastname", 
       }, 
       submitHandler : function(form) { 
        form.submit(); 
       } 
      }); 
     }); 
    }); 
});

來源

2016-12-08 user2211678

任何控制檯錯誤？ – madalinivascu

@madalinivascu nope – user2211678

由於您的形式是一個模式中，它尚未在DOM存在。
的.validate()方法是插件是如何在表單上初始化
嘗試調用.validate()（通過將您<script> jQuery code </script>內模體和</form>後）來初始化的模態中形式的插件。
請注意，您使用多個版本的jQuery（1.12，3.1.1 & 1.11 - 儘量保持一個），以及重複引導文件（JS？），這可能會產生衝突。

來源

2016-12-08 13:27:42 Syden

使用jQuery驗證插件驗證模態窗體

回答

相關問題