javascript - 带有图标的输入字段验证工作不顺利

Question

当我的图标位于 input-lg 内部时，当我单击该字段时，它看起来像......我的意思是我的评论应该在这里，但它不应该使图标变大。我需要评论会出现，但在图标和输入 lg 字段之外。

这是我的演示代码:

$(document).ready(function () {
    $('#contact-form').validate({
        rules: {
            fullname: {
                minlength: 4,
                required: true
            },
            username: {
                required: true,
                email: true
            },
            password: {
                minlength: 8,
                required: true
            },
            confirm_password: {
                minlength: 8,
                required: true
            },
            mobile: {
                minlength: 11,
                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');
        }
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<div class="container">
    <form method="POST" class="form-horizontal" id="contact-form">
        <div class="control-group">
            <div class="controls">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
                    <input type="text" name="fullname" id="fullname" class="form-control" placeholder="Your name">
                </div>
            </div>
        </div>
        <p class="help-block"></p>

        <div class="control-group">
            <div class="controls">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
                    <input type="email" name="username" id="username-reg" class="form-control" placeholder="Your email address">
                </div>
            </div>
        </div>
        <p class="help-block"></p>

        <div class="control-group">
            <div class="controls">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                    <input type="password" name="password" id="password" class="form-control" placeholder="Your password">
                </div>
            </div>
        </div>
        <p class="help-block"></p>

        <div class="control-group">
            <div class="controls">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
                    <input type="password" name="confirm_password" id="repass" class="form-control" placeholder="Confirm your Password">
                </div>
            </div>
        </div>
        <p class="help-block"></p>

        <div class="control-group">
            <div class="controls">
                <div class="input-group input-group-lg">
                    <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span>
                    <input type="text" name="mobile" id="phone" class="form-control" placeholder="Mobile Number">
                </div>
            </div>
        </div>
        <p class="help-block"></p>

    </form>
</div>

我需要这样的:

Answer 1

使用errorPlacement和 insertAfter。

$('#contact-form').validate({        
   errorPlacement: function(error, element) {
       error.insertAfter(element.parent());
   }
});

FIDDLE

此外，自定义消息可以像这样完成:-

$('#contact-form').validate({
     rules: {
         fullname: {
             minlength: 4,
             required: true
         }
     },
     messages: {
         fullname:{
              required: "Required input",
              minlength: jQuery.validator.format("Too short: Minimum of {0} characters")
         }
     }
});

FIDDLE