Question

$('#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>

好的，一切都还可以但是当出现错误信息时我想要完整的输入-group-lg将是红色的，当来到成功消息时，颜色将为绿色（具有外部级别和内部输入文本）。我的意思是，一切都将是红色或绿色。我给出了一个类似的例子：

我不希望只有我的按摩会颜色饱满，我想要完整的输入组也会是红色或绿色。绿色或红色应取决于消息。

我尝试了这个css：

  .controls .error {
            color: red;
        }

        .controls .valid {
            color: green;
        }

Answer 1

您必须为成功和错误类实现CSS以将文本设置为绿色，例如：

.success{
    color:green
}

Answer 2

使用jQuery bootstrapvalidator：

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>

使用带有成功或错误颜色的图标验证输入字段

2 个答案: