代码之家 › 专栏 › 技术社区 › TheOrdinaryGeek

JQuery使用bootstrap4验证表单输入并突出显示标签[duplicate]

jquery-validate bootstrap-4 twitter-bootstrap jquery javascript

TheOrdinaryGeek · 技术社区 · 6 年前

Bootstrap with jQuery Validation Plugin 不

我在用 JQuery Validate 具有 引导4 ,但似乎拿不到标签和输入字段到 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>

$(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');
    },
  });
})

感谢您的帮助。

1 回复 | 直到 6 年前

Serg Chernata 6 年前

这些班级在过去几年里发生了变化 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>