JQuery 使用 Bootstrap 验证表单输入并突出显示标签 4

Question

I have read I have read Bootstrap with jQuery Validation Plugin and it's helpful, but it's Bootstrap 3, not Bootstrap 4..

我用的是JQuery Validate with Bootstrap 4, but can't seem to get the label and input field to highlight红色，无效时

我认为 valid 和 invalid 输入类在 BS 中是默认的，link？可能是我用错了。

我的代码在下面，这里是 fiddle.

HTML

<form id="myform">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <div class="form-group">
        <label for="name" class="control-label">Email address</label>
        <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

JQuery

$(function() {
  $("#myform").validate({
    rules: {
      name: {
        required: true,
        minlength: 2
      }
    },
    highlight: function(element) {
      $(element).closest('.form-group').removeClass('valid').addClass('invalid');
    },
    unhighlight: function(element) {
      $(element).closest('.form-group').removeClass('invalid').addClass('valid');
    },
  });
})

感谢任何帮助。

Answer 1

这些类在 the most recent release 中发生了变化。 valid 已重命名为 is-valid，invalid 为 is-invalid。

此外，它们需要应用于输入，而不是输入组包装器。

编辑：

如果要突出显示输入和标签，则需要重新排序。

$(function() {
  $("#myform").validate({
    rules: {
      name: {
        required: true,
        minlength: 2
      }
    },
    highlight: function(element) {
      $(element).removeClass('is-valid').addClass('is-invalid');
    },
    unhighlight: function(element) {
      $(element).removeClass('is-invalid').addClass('is-valid');
    },
  });
})

.reversed{padding: 3rem 0 0 0;}
.reversed .control-label{margin: -4.5rem 0 0 0; float: left;}

input.is-valid ~ label{color: green;}
input.is-invalid ~ label{color: red;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<form id="myform">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <div class="form-group reversed"><!-- added reversed class -->
        <input type="text" class="form-control" id="name" name="name" placeholder="Name" required>
        <label for="name" class="control-label">Email address</label>
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

JQuery 使用 Bootstrap 验证表单输入并突出显示标签 4

JQuery Validate Form Inputs & Highlight Labels with Bootstrap 4

javascript

jquery

jquery-validate

twitter-bootstrap

bootstrap-4