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

Question

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

错误的图标可以正常工作，但我在使用正确的图标时遇到了一些问题。当输入格式正确时，我会看到 class="valid"在语法中 <input class="valid"...> .我尝试在 <input..> 之后显示右图标通过使用 class="valid" .右边的图标显示在文本字段的右侧，文本字段消失。 LIVE CODE

请帮忙。

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

Answer 1

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

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

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");
  }
});  

如评论中所述，只能使用像:after 这样的css 伪元素。或 :before对于容器元素，而不是像 input 这样的元素或 image . Robert Koritnik 在评论中对此提供了很好的解释:Can I use the :after pseudo-element on an input field? .如果可以使用上面建议的方法添加标签，您可以为 label.valid:after {... 添加 css与 label.error:after 相同的方式.

更新 3:对于 OP 评论中提到的下一个方法 - 添加带有 valid 类的标签似乎不起作用 - 我只是调整了 Fiddle .
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在不发送表单的情况下在提交时显示有效图标。

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/

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

引用:http://jqueryvalidation.org/validate/