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

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

错误的图标可以正常工作，但我在使用正确的图标时遇到了一些问题。当输入格式正确时，我看到class="valid"在语法中<input class="valid"...>。我尝试在之后显示正确的图标<input..>通过使用class="valid"。右侧图标显示在文本字段的右侧，然后文本字段消失。实时代码 http://jsfiddle.net/6y2rwvae/9/

请帮忙。

HTML

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

CSS

label.error:after {
    content:"";
    display: inline-block;
    margin-left:10px;
    background: url("http://dummyimage.com/15x15/de1417/de1417.png") no-repeat;
    width: 15px;
    height: 15px;
}

.valid{
    margin-left:10px;
    background: green;
    width: 15px;
    height: 15px;
}

JS

$('#TestForm').validate({
    rules: {
        txtIn: {
            required: true,
            rangelength: [8, 16]
        }
    },
    messages: {
        txtIn: {
            required: "Please enter something",
            rangelength: "Icon"
        }




    }
});
$('.valid').after('<div class="valid"></div>');

不幸的是，Fiddle 中的验证并不总是能够正确验证，但您可以尝试调整$('.valid').after('<div class="valid"></div>'); to $('.valid').after('<div class="validicon"></div>');并重命名你的班级valid to validicon。否则，将设置为有效类的输入将应用宽度为 15px 等的 css，因此不可见。

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

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：我刚刚检查了验证插件的选项。可以通过扩展设置来为有效元素添加标签validate()像这样：

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

正如评论中提到的，只能使用 css 伪元素，例如:after or :before对于容器元素，而不是像这样的元素input or image。罗伯特·科里特尼克 (Robert Koritnik) 的评论对此提供了很好的解释：我可以在输入字段上使用 :after 伪元素吗？ https://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field#comment-5133582。如果可以使用上面建议的方法添加标签，您可以添加 csslabel.valid:after {...以同样的方式label.error:after.

更新3：对于OP评论中提到的下一个方法 - 由于添加带有有效类的标签似乎不起作用 - 我只是调整了Fiddle http://jsfiddle.net/6y2rwvae/15/.
HTML 调整 - 我移动了<span class="add"></span>之后<input>而不是将输入包装在跨度中。
jquery调整：

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

如前所述，如果输入有效，Fiddle 会抛出一个network error 403 CSRF verification failed，但它应该可以在实际站点上运行。

更新4：使用 jquery 验证选项的新方法而不是尝试解决方法。调整后Fiddle http://jsfiddle.net/rz6bgyfa/在提交时显示有效图标而不发送表单。

HTML:

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

CSS:

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

jquery:

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

这些调整供参考：http://jqueryvalidation.org/category/plugin/ http://jqueryvalidation.org/category/plugin/

简短说明：
环境focusInvalid: false：表单提交时输入不会获得焦点且输入无效，需要结合focusCleanup: true：当输入获得焦点时，验证将被“清除”，因此不会显示错误或图标标签。onkeyup: false：输入时未验证输入。最后：success: function (label, element) { .. }如果元素有效，则将有效类添加到标签中。

参考：http://jqueryvalidation.org/validate/ http://jqueryvalidation.org/validate/