Bootstrap表单验证-颜色不变
[英]Bootstrap Form Validation - color doesn't change
问题描述
I followed this link to build a form validation that consist of name and username at my localhost. 
我按照此链接构建了一个表单验证，该表单验证由本地主机的名称和用户名组成。
The problem I am facing is that When I clicked sign up when both fields are empty, the error "The field is required" displays but when I had input a name or username, it displays "OK!" 我面临的问题是，当我在两个字段都为空时单击“注册”时，显示错误“该字段为必填项”，但是当我输入名称或用户名时，它将显示“确定！” in red even though I assigned the css to be green under label.success. 即使我将label.success下的css分配为绿色，也将其设置为红色。
Please help. 请帮忙。
index.html index.html
body { width: 100%; height: 100%; } html { width: 100%; height: 100%; } @import url("assets/css/bootstrap.min.css"); @import url("assets/css/bootstrap-responsive.min.css"); label.valid { font-weight: bold; color: green; padding: 2px 8px; margin-top: 2px; } label.error { font-weight: bold; color: red; padding: 2px 8px; margin-top: 2px; }
<!DOCTYPE html> <html lang="en"> <head> <title>Form</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="assets/js/jquery-1.7.1.min.js"></script> <script src="assets/js/jquery.validate.js"></script> <link rel="stylesheet" type="text/css" href="css/style.css"> <script> addEventListener('load', prettyPrint, false); $(document).ready(function() { $('pre').addClass('prettyprint linenums'); }); </script> <link rel="stylesheet" type="text/css" href="css/style.css" </head> <body> <div class="container"> <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" href="#">Open a form</a> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <form class="form-horizontal" id="registration-form" role="form" data-async data-target="#myModal" action="#" method="post"> <div class="modal-body"> <div class="form-control-group row"> <label for="name " class="col-md-2 control-label">name</label> <div class="col-md-10 controls"> <input type="text" class="form-control" id="name" placeholder="Enter name" name="name" /> </div> </div> <div class="form-control-group row"> <label for="username " class="col-md-2 control-label">Username</label> <div class="col-md-8 controls"> <input type="text" class="form-control" id="username" placeholder="Enter Username" name="username" /> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-primary" type="submit">Sign up</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div> </form> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function() { $('#registration-form').validate({ rules: { name: { required: true, required: true }, username: { minlength: 6, required: true }, agree: "required" }, highlight: function(element) { $(element).closest('.form-control-group').removeClass('success').addClass('error'); }, success: function(element) { element .text('OK!').addClass('valid') .closest('.form-control-group').removeClass('error').addClass('success'); } }); }); // end document.ready </script> </body> </head> </html>
1 个解决方案
解决方案1
3 已采纳 2016-09-13 05:59:08
You should use "has-success", "has-warning" or "has-error" classes on the form input wrapper 您应该在表单输入包装器上使用“具有成功”，“具有警告”或“具有错误”类
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
By the way, using !important is not a good idea and currently it is frowned upon. 顺便说一句，使用！important并不是一个好主意，目前对此并不满意。 If you want to change standard Bootstrap color, you should compile from a SASS or LESS version. 如果要更改标准的Bootstrap颜色，则应从SASS或LESS版本进行编译。 They also have mixins that allow you to apply bootstrap styles on custom HTML-classes. 它们还具有mixin，可让您将引导样式应用于自定义HTML类。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.