引导表单验证 - 颜色不会改变

Question

我按照link 在我的本地主机上构建了一个包含名称和用户名的表单验证。

我面临的问题是，当我在两个字段都为空时单击注册时，会显示错误“该字段是必需的”，但是当我输入名称或用户名时，它会显示“OK！”即使我在 label.success 下将 css 分配为绿色，也显示为红色。

请帮忙。

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">&times;</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>

Answer 1

您应该在表单输入包装器上使用“has-success”、“has-warning”或“has-error”类

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

顺便说一句，使用 !important 不是一个好主意，目前它是不受欢迎的。如果你想改变标准的 Bootstrap 颜色，你应该从 SASS 或 LESS 版本编译。它们也有 mixin，允许您在自定义 HTML 类上应用引导样式。