当我的图标在输入-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>
&#13;
我需要这样:
答案 0 :(得分:3)
使用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 强>