行为JqueryValidator和bootstrap 3，使用Glyphicons

Question

我试图深入研究使用bootstrap 3和glyphicons的验证器。

我开发了一个小表格，如下所示：                       名称                    

    </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>

现在，我想告诉你我取得了哪些成果：

我希望风格略有不同，让我更好地解释一下：

我希望字形可以出现在输入字段中而不是输入下面的第二行。我相信我找到了问题的人，当我更改类时，它会添加一个新的组件/样式：

此外，＆＃39;元素＆＃39;变量我用于应用函数＆＃39;最接近＆＃39;从哪个真元素开始？起点是什么？

感谢您的帮助，

Answer 1

试试这个css：

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

Answer 2

已解决

我添加了以下代码：

errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.length) {
                error.insertAfter(element);
            } else {
            error.insertAfter(element);
            }
        } 
    });

Answer 3

我知道它的答案很晚，但试着删除

  

类=＆＃34;具有反馈＆＃34;

来自

<div form-group>

它以我的形式运作。