Question

我正在使用jQuery验证来验证我的表单字段。我有两个字段，名为“评论”和＆amp; “用户名”。注释字段有一个名为required的验证方法，设置为false，而帐户名字段有一个名为required的验证方法，设置为true。当用户没有为这两个字段输入任何值时点击提交，我希望评论字段以绿色突出显示，帐户名称以红色突出显示。但是，我无法以绿色突出显示评论字段。这是错误和我的代码的图片。

编辑：我仍在尝试解决此问题。如果我的解释不清楚，请告诉我！

Screenshot of error

$(document).ready(function() {
  $.validator.setDefaults({
    errorClass: 'help-block',
    highlight: function(element) {
      $(element)
        .closest('.form-group')
        .addClass('has-error');

    },
    unhighlight: function(element, errorClass, validClass) {
      $(element)
        .closest('.form-group')
        .removeClass('has-error')
        .addClass('has-success');
    },
  });

  $('#dataForm').validate({
    rules: {
      commentInput: {
        required: false
      },
      accountNameInput: {
        required: true
      }
    },
    submitHandler: function(form) {
      alert('success');
    }
  });
});

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<form id="dataForm" method="post" action="#">

  <div class="form-group">
    <label class="control-label" for="commentInput">Comments</label>
    <textarea class="commentInput" id="commentInput" cols="20" rows="5"></textarea>
  </div>

  <div class="form-group">
    <label class="control-label" for="accountNameInput">Account name</label>
    <input type="text" id="accountNameInput" name="accountNameInput" placeholder="Account name" class="form-control font-bold" value="" />
  </div>


  <input type="submit" class="btn btn-primary" value="Save" id="saveButton" />

</form>

Answer 1

在你的样式表中添加：

.form-group.has-error input {
  background-color: rgba(200,0,0,.2);
}

.form-group.has-success input {
  background-color: rgba(0,200,0,.2);
}

单击保存按钮时如何突出显示有效元素

1 个答案: