$('#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,
equalTo: "#password"
},
mobile: {
minlength: 11,
maxlength: 11,
required: true,
number: 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');
},
errorPlacement: function(error, element) {
error.insertAfter(element.parent());
}
});
$('#contact-form').on('keyup blur', function() {
if ($('#contact-form').valid()) {
$('button.btn').prop('disabled', false);
} else {
$('button.btn').prop('disabled', 'disabled');
}
});<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>
<!-- for checking validation -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<body>
<div class="container">
<br>
<br>
<br>
<div class="col-md-3"></div>
<div class="col-md-6">
<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" id="fullname" name="fullname" class="form-control" placeholder="Your name">
</div>
</div>
</div>
<p class="help-block"></p>
<br>
<br>
<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>
<br>
<br>
<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>
<br>
<br>
<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>
<br>
<br>
<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>
<br>
<br>
<div class="control-group">
<button type="submit" id="emailSubmit" disabled="disabled" class="btn btn-danger" data-toggle="tooltip" data-placement="bottom" title="Click me to buy">Submit</button>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</body>好的，一切都很好，但是当出现错误消息时，我希望完整的输入组-lg将是红色的，当出现成功消息时，颜色将是绿色的(具有外部级别和内部输入文本)。 我的意思是，一切都会是红色或绿色。 我举一个类似的例子:
我不希望只有我的按摩是彩色的，我希望完整的输入组也将是红色或绿色。绿色或红色应取决于消息。
我尝试一下这个CSS:
.controls .error {
color: red;
}
.controls .valid {
color: green;
}
最佳答案
您必须为成功和错误类实现 CSS，以将文本设置为绿色，例如:
.success{
color:green
}
关于javascript - 使用带有成功或错误颜色的图标验证输入字段，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33623638/