1. 首頁
  2. 問答
  3. 使用Bootstrap進行表單驗證（jQuery）

使用Bootstrap進行表單驗證（jQuery）

2013-08-18 109 views
23

有人可以幫我解決這個問題嗎？我使用引導的形式，並試圖用jQuery來驗證它。不幸的是，表單驗證並沒有告訴我我做錯了什麼。我從http://jqueryvalidation.org/documentation/獲得了腳本，並且接着進行了客戶端驗證教程。使用Bootstrap進行表單驗證（jQuery）

<!DOCTYPE html> 

<html> 
<head> 
     <meta charset="utf=8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<script src="js/jquery.validate.min.js"></script> //Script found online 

     <script> 
      $(document).ready(function(){ 

      $('#contact-form').validate(
      { 
       rules: { 
       name: { 
        minlength: 2, 
        required: true 
       }, 
       email: { 
        required: true, 
        email: true 
       }, 
       message: { 
        minlength: 2, 
        required: true 
       } 
       }, 
       highlight: function(element) { 
       $(element).closest('.control-group').removeClass('success').addClass('error'); 
       }, 
       success: function(element) { 
       element 
       .text('OK!').addClass('valid') 
       .closest('.control-group').removeClass('error').addClass('success'); 
       } 
      }); 
      }); // end document.ready 
     </script> 

    </head> 

    <div class="hero-unit"> 
     <h1>Contact Form</h1> </br> 

    <form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form"> 
     <div class="control-group"> 
      <label class="control-label" for="name">Name</label> 
      <div class="controls"> 
       <input type="text" name="name" id="name" placeholder="Your name"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="email">Email Address</label> 
      <div class="controls"> 
       <input type="text" name="email" id="email" placeholder="Your email address"> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="subject">Subject</label> 
      <div class="controls"> 
        <select id="subject" name="subject"> 
         <option value="na" selected="">Choose One:</option> 
         <option value="service">Feedback</option> 
         <option value="suggestions">Suggestion</option> 
         <option value="support">Question</option> 
         <option value="other">Other</option> 
        </select> 
      </div> 
     </div> 
     <div class="control-group"> 
      <label class="control-label" for="message">Message</label> 
      <div class="controls"> 
       <textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea> 
      </div> 
     </div> 
     <div class="form-actions"> 
      <input type="hidden" name="save" value="contact"> 
      <button type="submit" class="btn btn-success">Submit Message</button> 
      <button type="reset" class="btn">Cancel</button> 
     </div> 
    </form> 

</div> 

     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
     <script src="js/bootstrap.js"></script> 


    </body>

來源

2013-08-18 user2693351

回答

31

我把你的代碼安裝在jsFiddle上來嘗試診斷問題。

http://jsfiddle.net/5WMff/

不過，我似乎沒有遇到您的問題。 你可以看看，讓我們知道嗎？

HTML

<div class="hero-unit"> 
<h1>Contact Form</h1> 
</br> 
<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form"> 
    <div class="control-group"> 
     <label class="control-label" for="name">Name</label> 
     <div class="controls"> 
      <input type="text" name="name" id="name" placeholder="Your name"> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="email">Email Address</label> 
     <div class="controls"> 
      <input type="text" name="email" id="email" placeholder="Your email address"> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="subject">Subject</label> 
     <div class="controls"> 
      <select id="subject" name="subject"> 
       <option value="na" selected="">Choose One:</option> 
       <option value="service">Feedback</option> 
       <option value="suggestions">Suggestion</option> 
       <option value="support">Question</option> 
       <option value="other">Other</option> 
      </select> 
     </div> 
    </div> 
    <div class="control-group"> 
     <label class="control-label" for="message">Message</label> 
     <div class="controls"> 
      <textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."></textarea> 
     </div> 
    </div> 
    <div class="form-actions"> 
     <input type="hidden" name="save" value="contact"> 
     <button type="submit" class="btn btn-success">Submit Message</button> 
     <button type="reset" class="btn">Cancel</button> 
    </div> 
</form>

的Javascript

$(document).ready(function() { 

$('#contact-form').validate({ 
    rules: { 
     name: { 
      minlength: 2, 
      required: true 
     }, 
     email: { 
      required: true, 
      email: true 
     }, 
     message: { 
      minlength: 2, 
      required: true 
     } 
    }, 
    highlight: function (element) { 
     $(element).closest('.control-group').removeClass('success').addClass('error'); 
    }, 
    success: function (element) { 
     element.text('OK!').addClass('valid') 
      .closest('.control-group').removeClass('error').addClass('success'); 
    } 
}); 
});

來源

2013-08-18 06:40:51

+0

原來我的問題是我沒有正確調用外部JavaScript文檔。謝謝你的幫助！ （另外，我試圖讓我的自定義CSS在那裏，但bootstrap.css保持覆蓋style.css。我最終得到了這個修復。） – user2693351

+0

感謝您的回答它有助於解決我的問題。 –

0

請嘗試之後從formor嘗試使用上提交按鈕的onclick方法的div。

來源

2013-08-18 06:31:35

7

你可以在本教程中另一個驗證： http://twitterbootstrap.org/bootstrap-form-validation

他們使用jQuery驗證與自舉驗證，你可以，如果你喜歡使用它。

jquery.validate.js 

jquery.validate.min.js 

jquery-1.7.1.min.js

enter image description here

，你會得到的源代碼存在。

<form id="registration-form" class="form-horizontal"> 
<h2>Sample Registration form <small>(Fill up the forms to get register)</small></h2> 
<div class="form-control-group"> 
     <label class="control-label" for="name">Your Name</label> 
<div class="controls"> 
      <input type="text" class="input-xlarge" name="name" id="name"></div> 
</div> 
<div class="form-control-group"> 
     <label class="control-label" for="name">User Name</label> 
<div class="controls"> 
      <input type="text" class="input-xlarge" name="username" id="username"></div> 
</div> 
<div class="form-control-group"> 
     <label class="control-label" for="name">Password</label> 
<div class="controls"> 
      <input type="password" class="input-xlarge" name="password" id="password"> 

</div> 
</div> 
<div class="form-control-group"> 
      <label class="control-label" for="name"> Retype Password</label> 
<div class="controls"> 
       <input type="password" class="input-xlarge" name="confirm_password" id="confirm_password"></div> 
</div> 
<div class="form-control-group"> 
      <label class="control-label" for="email">Email Address</label> 
<div class="controls"> 
       <input type="text" class="input-xlarge" name="email" id="email"></div> 
</div> 
<div class="form-control-group"> 
      <label class="control-label" for="message">Your Address</label> 
<div class="controls"> 
       <textarea class="input-xlarge" name="address" id="address" rows="3"></textarea></div> 
</div> 
<div class="form-control-group"> 
      <label class="control-label" for="message"> Please agree to our policy</label> 
<div class="controls"> 
      <input id="agree" class="checkbox" type="checkbox" name="agree"></div> 
</div> 
<div class="form-actions"> 
      <button type="submit" class="btn btn-success btn-large">Register</button> 
      <button type="reset" class="btn">Cancel</button></div> 
</form>

和JQuery的：

<script src="assets/js/jquery-1.7.1.min.js"></script> 

<script src="assets/js/jquery.validate.js"></script> 

<script src="script.js"></script> 
<script> 
      addEventListener('load', prettyPrint, false); 
      $(document).ready(function(){ 
      $('pre').addClass('prettyprint linenums'); 
        });

這裏是代碼的活生生的例子： http://twitterbootstrap.org/live/bootstrap-form-validation/

檢查完全教程： http://twitterbootstrap.org/bootstrap-form-validation/

編碼快樂。

來源

2014-02-03 20:35:56

+2

該教程的鏈接似乎已死亡。 –

相關問題

 相關問題