在引導模式中驗證輸入文本

Question

我想在不使用任何框架的情況下驗證引導模式中的表單。它實際上是一個簡單的模式，只有一個輸入文本和兩個按鈕「關閉」和「發送」。 用戶應該在輸入框中輸入他/她的名字，然後點擊發送。該表單是與方法帖子一起發送的。

我想要做的是，如果用戶沒有在輸入框中輸入任何東西，並點擊按鈕「發送」，輸入框應該有一個紅色的邊框，而不是默認的藍色邊框。下面是我的模態代碼：

<div id="myModal" class="modal fade" tabindex="-1"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <!--form--> 

      <form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title">My modal</h4> 
       </div> 
       <div class="modal-body"> 
        <p> 
         Please enter your name: 
        </p> 
        <br/> 

        <div class="form-group"> 

         <div class="col-lg-12"> 
          <label class="control-label" for="firstname">Name</label> 
          <input type="text" class="form-control required" id="firstname" name="firstname"> 
         </div> 
        </div> 

       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button id="myFormSubmit" class="btn btn-primary">Send</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

我試着用JavaScript來更改類的輸入文字has-error，但它不會產生紅色輪廓。當我點擊發送它通過郵寄方法發送空值，而不是 這裏是我的javascript代碼：

<script type="text/javascript"> 
     $('#myForm').validate({ 
      rules: { 
       name: { 
        minlength: 1, 
        required: true 
       }, 
      }, 
      highlight: function (element) { 
       $('#firstname').removeClass('has-success').addClass('has-error'); 
      }, 
      success: function (element) { 
       $('#firstname').removeClass('has-error').addClass('has-success'); 
      } 
     }); 
    </script> 

我覺得我在這裏混了一大堆東西。我還是新來的bootstrap和JavaScript。我怎樣才能獲得理想的紅色輪廓？ 謝謝。

編輯： 驗證功能：

function validate() { 
    var x = document.forms["myForm"]["firstname"].value; 
    if (x == null || x == "") { 
     return false; 
    } 
} 

Answer 1

您需要更改CSS類input父元素div.form-group，不是input本身的：

的HTML提交按鈕點擊後應該是這樣的：

<div class="form-group has-error"> 
    <div class="col-lg-12"> 
     <label class="control-label" for="firstname">Name</label> 
     <input type="text" class="form-control required" id="firstname" name="firstname"> 
    </div> 
</div> 

要實現這一點，請將您的JavaScript代碼更改爲：

<script type="text/javascript"> 
    $('#myForm').on('submit', function(e) { 
    var firstName = $('#firstname'); 

    // Check if there is an entered value 
    if(!firstName.val()) { 
     // Add errors highlight 
     firstName.closest('.form-group').removeClass('has-success').addClass('has-error'); 

     // Stop submission of the form 
     e.preventDefault(); 
    } else { 
     // Remove the errors highlight 
     firstName.closest('.form-group').removeClass('has-error').addClass('has-success'); 
    } 
    }); 
</script> 

Answer 2

在舉格...

<div class="form-group"> 
    <div class="row"> 

     <label class="col-xs-2 col-sm-2 control-label">city:</label> 

     <div class="col-xs-3 col-sm-3 formGroups" 
      id="city_form1"> 
      <form:input name="city" class="form-control" 
       placeholder="City" data-toggle="tooltip" 
       data-placement="bottom" title="City" maxlength="15" /> 

      <small class="help-block col-sm-offset-0 col-sm-9" 
       style="display: none;">city must require</small> 
     </div> 
    </div> 
</div> 

當你看到有。幫助塊爲顯示：沒有，現在你寫JavaScript函數和檢查驗證，如果驗證現在通過使其顯示：塊...這是你可以做的方式

享受與引導帶:)

Answer 3

它很容易

只是採用類。先後誤差由JavaScript函數

<div class="form-group has-error"> 
    <div class="row"> 

     <label class="col-xs-2 col-sm-2 control-label">city:</label> 

     <div class="col-xs-3 col-sm-3 formGroups" 
      id="city_form1"> 
      <form:input name="city" class="form-control" 
       placeholder="City" data-toggle="tooltip" 
       data-placement="bottom" title="City" maxlength="15" /> 

     </div> 
    </div> 
</div> 

Answer 4

只使用所需的輸入域裏面這樣

<input type="text" class="form-control required" id="firstname" name="firstname" required/>