Question

我正在使用jQuery Validation plugin验证我的表单以及CSS的Bootstrap框架的部分内容。

现在出现错误，我希望在输入后显示文本，并在输入后添加<span class="error">元素。

在成功时，我想删除消息文本并在输入后添加<span class="succes">元素。

所以基本的HTML看起来像这样：

<form id="myform">
  <div class="form-group has-feedback">
    <label for="name">Name *</label>
    <input type="text" class="form-control" name="name" id="name" placeholder="Your name" required>
  </div>
</form>

javascript：

$("#myform").validate({
  showErrors: function(errorMap, errorList) {
      var i, elements;
      for(i = 0; errorList[i]; i++) {
        errorList[i].message = errorList[i].message + "<span class='glyphicon glyphicon-remove has-error form-control-feedback'></span>"
      }
      this.defaultShowErrors()
    },
});

现在当用户输入错误的输入时，HTML看起来像这样：

<div class="form-group has-feedback">
  <label for="name">Name *</label>
  <input type="text" class="form-control error" name="name" id="name" placeholder="Your name" required="" aria-required="true" aria-invalid="true">
  <label for="name" class="error">
    This field is required
    <span class="glyphicon glyphicon-remove has-error form-control-feedback"></span>
  </label>
</div>

现在一切都很好，但是当用户输入一个好的输入时我该如何完成这个HTML！

<div class="form-group has-feedback">
  <label for="name">Name *</label>
  <input type="text" class="form-control error" name="name" id="name" placeholder="Your name" required="" aria-required="true" aria-invalid="true">
  <span class="glyphicon glyphicon-ok has-success form-control-feedback"></span>
</div>

注意：<label>类error和<span>元素不具有不同的类。

Answer 1

我设法使用highlight和unhighlight回调函数执行此操作。请参阅下面的代码。

highlight: function (element, errorClass, validClass) {
  $(element).nextAll('.glyphicon').removeClass('hidden');
  $(element).nextAll('.glyphicon').removeClass('glyphicon-ok').addClass('glyphicon-remove');
  $(element).nextAll('.glyphicon').removeClass('has-success').addClass('has-error');
},
unhighlight: function (element, errorClass, validClass) {
  $(element).nextAll('.glyphicon').removeClass('hidden');
  $(element).nextAll('.glyphicon').removeClass('glyphicon-remove').addClass('glyphicon-ok');
  $(element).nextAll('.glyphicon').removeClass('has-error').addClass('has-success');
},

jQuery验证在成功或失败时添加和删除html

1 个答案: