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

不幸的是，小提琴中的验证并不总是适用于正确的验证，但您可以尝试将$('.valid').after('<div class="valid"></div>');调整为$('.valid').after('<div class="validicon"></div>');并将您的班级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或:before等css伪元素，而不能使用input或{{1}这样的元素}}。 Robert Koritnik在此评论中提供了很好的解释：Can I use the :after pseudo-element on an input field?。如果可以使用上面建议的方法添加标签，您可以使用与image相同的方式为label.valid:after {...添加css。

更新3：对于OP评论中提到的下一个方法 - 因为添加有效类的标签似乎无法正常工作 - 我只是调整了Fiddle。
HTML调整 - 我在label.error:after之后移动了<span class="add"></span>，而不是将输入包装在范围内 jquery调整：

<input>

如上所述，如果输入有效，则Fiddle会抛出if ($('#TestForm input').hasClass('valid')) { $('.add').addClass('validicon'); } else { $('.add').removeClass('validicon'); }，但它应该在实际站点上运行。

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

<强> HTML：

network error 403 CSRF verification failed

CSS：

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

jquery：

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

有关这些调整的参考：http://jqueryvalidation.org/category/plugin/

简短说明：
设置$(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 }); });：当提交表单并且输入无效时，输入不会获得焦点，需要与focusInvalid: false结合使用：当输入获得焦点时，验证是＆＃34;清除＆＃34;，因此不会显示错误或图标标签。 focusCleanup: true：输入输入未经过验证。最后：onkeyup: false在元素有效的情况下添加对标签有效的类。

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

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

1 个答案: