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

我正在使用验证我的表单和CSS引导框架的一部分

现在有一个错误，我想在输入后显示一个文本，并在输入后添加一个

元素

成功后，我希望删除消息文本并在输入后添加

元素

因此，基本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>

<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>

名字*

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

$（“#myform”）。验证({
错误：功能（错误映射、错误列表）{
变量i，元素；
对于（i=0；错误列表[i]；i++）{
错误列表[i]。消息=错误列表[i]。消息+“”
}
this.defaultRors（）
},
});

现在，当用户输入错误的输入时，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>

<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>

名字*

---

注意：没有

类

error

，

元素有不同的类。

我通过

高亮显示

和

取消高亮显示

回调函数实现了这一点。请参阅下面的代码

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

---

可以定义一个错误元素和一个在任何元素上添加错误的函数。验证（{errorElement:“em”，errorPlacement:function（error，element）{error.appendTo（element.parent（“td”）.next（“td”）；）；查看“我可以添加错误元素，但我也需要一个成功元素！”该元素自动接收错误和成功类。您还可以通过设置选项“errorClass”和“validClass”来更改成功和错误的类名。请参阅

高亮显示

和

取消高亮显示

回调函数。提示：您不需要多行，因为您可以在

.removeClass（）和
.addClass（）
中放置多个类。示例：
$（元素）.nextAll（'.glyphion'）.removeClass（'hidden glyphion ok has success'）。addClass（'glyphicon-remove有错误'）；