行爲JqueryValidator和引導3，使用Glyphicons

Question

我試圖挖掘與引導3和圖形驗證器的使用。

我開發它表明下面一個小表格： 名稱

</div> 
    </div> 
    <div class="form-group has-feedback"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Surname</label> 
    <div class="col-sm-10" id="surname"> 
     <input type="text" class="form-control" placeholder="Surname" name="surname"> 

    </div> 
    </div> 
    <div class="form-group has-feedback"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Telephone</label> 
    <div class="col-sm-10"> 
     <input type="tel" class="form-control" placeholder="Telephone" name="telephone"> 
    </div> 
    </div> 
    <div class="form-group has-feedback"> 
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label> 
    <div class="col-sm-10"> 
     <input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email"> 
    </div> 
    </div> 
    <div class="form-group has-feedback"> 
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label> 
    <div class="col-sm-10"> 
     <input type="password" class="form-control" id="inputPassword3" placeholder="Password" name="password"> 
    </div> 
    </div> 
    <div class="form-group has-feedback"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <div class="checkbox"> 
     <label> 
      <input type="checkbox"> Remember me 
     </label> 
     </div> 
    </div> 
    </div> 
    <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10"> 
     <button type="submit" class="btn btn-default">Sign in</button> 
    </div> 
    </div> 
</form> 

以下是jqueryscript：

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

    $('#frm_basic').validate({ 
     rules: { 
      surname: { 
       minlength: 3, 
       required: true, 
      }, 
      name: { 
       minlength: 5, 
       required: true, 
      }, 
      email: { 
       minlength: 2, 
       required: true, 
       email: true 
      }, 
      password: { 
       required: true, 
      }, 
      telephone : "validatePhone" 
     }, 

     highlight: function(element) { 
      var x=$(element).closest('.div').find("span"); 

      $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); 
      $(element).closest('.form-group').find('[class^="glyphicon"]').remove(); 
      $(element).closest('.form-group > div').append('<span class="glyphicon glyphicon-remove form-control-feedback"'+' aria-hidden="true"'+'id="statushigh">'); 
     }, 

     unhighlight: function(element) { 
var y=$(element).closest('.div'); 
$(element).closest('.form-group').text(y.value); 
      $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); 
      $(element).closest('.form-group').find('[class^="glyphicon"]').remove(); 
      $(element).closest('.form-group > div').append('<span class="glyphicon glyphicon-ok form-control-feedback"'+' aria-hidden="true"' +'id="statusun">'); 
     },   
     success: function (element) { 
      $(element).closest('.form-group').addClass('valid').closest('.control-group').removeClass('error').addClass('success'); 
     } 
    }); 

    $.validator.addMethod("validatePhone", function(value) { 
     var filter = /^[0-9-+]+$/; 
     if (filter.test(value)) { 
      return true; 
     } 
    }, 
       'Please enter the right telephone number!'); 

}); 


</script> 

現在，我要告訴你，這導致我實現：

我想有一個風格有點不同，讓我更好地解釋：

我想的是，glyphicons可以出現在輸入字段，而不是在輸入下面的第二線。我相信我是誰發現了這個問題，當我改變類它添加新的組件/風格：

再說，我是誰用於應用功能「最近」的「元素」變量從開始哪個真正的元素？什麼是起點？

感謝您的幫助，

Answer 1

試試這個CSS：

form .glyphicon {margin-top: -20px;} 

Answer 2

解決

我加了下面的一段代碼：

​​