JQuery-显示错误和正确的图标进行验证

我有一个表单和JQuery验证。一切正常。我想显示图标，而不是显示消息

错误的图标正在工作，但我对正确的图标有一些问题。当输入是正确的格式时，我在语法中看到class=valid。我尝试在使用class=valid之后显示一个右图标。右侧图标显示在文本字段的右侧，文本字段消失

请帮忙

HTML

JS

---

不幸的是，Fiddle中的验证并不总是适用于正确的验证，但是您可以尝试在之后调整$'.valid'；到$'.valid'。之后；并将您的有效类重命名为validicon。否则，将设置为class valid的输入将应用于宽度为15px等的css，因此不可见

更新：对于评论中提到的后续问题：可以尝试添加display:inline块；分类错误图标。作为第二种解决方法-如果您可以在输入中显示某种错误图标，而不是在其旁边，那么简单的方法是：

input.valid {
   background-image: url('http://dummyimage.com/15x15/00ff11/fff.png&text=+');
   background-position: top right;
   background-size: 15px 15px;
   background-repeat: no-repeat;
}

更新2：我刚刚检查了验证插件的选项。通过扩展验证设置，可以为有效元素添加标签，如下所示：

$("#TestForm'").validate({
   // keep your other settings/options for rules
   // and messages here and add:
  success: function(label) {  
   label.addClass("valid");
  }
});  

正如在注释中提到的，对于容器元素，只能使用css伪元素，如：after或：before，而不能使用input或image等元素。Robert Koritnik在评论中对此做出了很好的解释：。如果可以使用上面建议的方法添加标签，您可以为label.valid:after{…添加css，方法与为label.error:after相同

更新3：对于OP评论中提到的下一种方法，由于使用类valid添加标签似乎不起作用，我只是调整了标签。 HTML调整-我在之后移动了，而不是在范围中包装输入。 jquery调整：

if ($('#TestForm input').hasClass('valid')) {
  $('.add').addClass('validicon');
 } else {
  $('.add').removeClass('validicon');
}

如上所述，如果输入有效，小提琴会抛出网络错误403 CSRF验证失败，但它应该在实际站点上工作

更新4：使用jquery验证选项的新方法，而不是尝试解决方法。调整为在提交时显示有效图标而不发送表单

HTML:

jquery：

这些调整的参考：

简要说明： Setting focusInvalid:false：提交表单时输入将无法获得焦点，且输入无效，必须与focusCleanup结合使用：true：输入获得焦点时，验证将被清除，因此不会显示错误或图标标签。onkeyup:false：输入时输入未被验证。最后：成功：函数标签，元素{..}在元素有效的情况下将类有效添加到标签

---

参考：

只有在页面加载时才会调用after，并且有效的类不存在@Charlie，谢谢！但是在这种情况下，我必须使用什么来代替after？可以使用高亮显示和取消高亮显示选项来进行自己的操作刚刚更新了我的答案，可能有效的图标有一个有效的解决方案。@abcidd以避免e答案下方的扩展注释-我刚刚更新了你的小提琴，希望它现在能按预期工作。@Matthias，再次感谢你！我尝试了你的指导，但没有成功。我也尝试了$'input.valid'。addClass'validicon'。after；它也不工作。@abcidd我刚刚调整了我的答案，$'.valid'。after；可以工作。@Matthias，Th谢谢！我试过了，但没有成功。@abcidd您能检查一下div validicon是否添加在输入之后吗？格式正确时，它不会显示.validicon。如果我使用$'.valid'.after；，图标会显示，但它会显示在文本字段的右侧，文本字段会消失。

input.valid {
   background-image: url('http://dummyimage.com/15x15/00ff11/fff.png&text=+');
   background-position: top right;
   background-size: 15px 15px;
   background-repeat: no-repeat;
}

$("#TestForm'").validate({
   // keep your other settings/options for rules
   // and messages here and add:
  success: function(label) {  
   label.addClass("valid");
  }
});  

if ($('#TestForm input').hasClass('valid')) {
  $('.add').addClass('validicon');
 } else {
  $('.add').removeClass('validicon');
}

<form id="TestForm">
 <input type="text" id="txtIn" name="txtIn" />
 <p></p>
 <button id="submit">Submit</button>
</form>

label {
 display: inline-block;
 margin-left:10px;
 width: 15px;
 height: 15px;
}
label.error {
 background-color: red;
}
label.valid {
 background-color: blue;
}

$(document).ready(function () {

  var messages = {
    'txtInRequired': ""
  };

  $('#TestForm').validate({
    rules: {
        txtIn: {
            required: true,
            rangelength: [8, 16]
        }
    },
    messages: {
        txtIn: messages.txtInRequired
    },
    onfocusout: function (element) {
        this.element(element);
    },
    success: function (label, element) {
        if ($(element).hasClass("valid")) {
            label.addClass("valid");
        }
    },
    submitHandler: function (form) {
        alert('form is valid');
        return false;
    },
    focusInvalid: false,
    focusCleanup: true,
    onkeyup: false
  });
});