JQuery - 显示错误和正确的图标验证 [英] JQuery - Showing Wrong and Right icons for Validation
问题描述
我有一个表单和JQuery验证。一切工作正常。
错误的图标正在工作，但我有一个问题与正确的图标。当输入是正确的格式时，我在语法< input class =valid...> 中看到 class =valid / code>。我尝试使用 class =valid在< input ..> 后显示正确的图标。右侧图标显示在文本字段上，文本字段消失。 现有代码
请帮助。 p>
HTML
< form method =POSTid =TestForm >
< input name =txtIntype =textid =txtIn>
< p>< / p>
< button id =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]
}
}，
消息：{
txtIn：{
要求：请输入内容，
rangelength：Icon
}
}
}）;
$（'。valid'）。after（'< div class =valid>< / div>'）;
不幸的是，正确验证，但您可以尝试调整 $（'。valid'）。after（'< div class =valid>< / div>'）; 到 $（'。valid'）。after（'< div class =validicon>< / div>'）; code>有效到 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（{
//保持您的其他设置/规则的选项
//和消息在这里，并添加：
success ：function（label）{
label.addClass（valid）;
}
}）;
如注释中所述，只能使用css伪元素，如 ：或。之后的或。对此评论提供的良好的解释罗伯特Koritnik： CSS：在INPUT字段的伪元素后面。如果可以使用上面建议的方法添加一个标签，你可以添加css ：之前 c $ c> image label.valid：after {... 以与<$ c $相同的方式c> label.error：after
Update 3： - 添加带有有效类别的标签似乎不起作用 - 我只是调整了小提琴。 br>
HTML调整 - 我移动了< span class =add>< / span> 输入> ，而不是在span中包装输入。
jquery调整：
if（$（'＃TestForm input'）。hasClass（'valid'））{
$（'。add'）。addClass（'validicon'）;
} else {
$（'。add'）。removeClass（'validicon'）;
}
如上所述，如果输入有效，Fiddle会抛出一个网络错误403 CSRF验证失败，但它应该在实际站点上工作。
更新4：新方法使用jquery validate选项，而不是尝试解决方法。调整小提示在提交时显示有效图标，不必发送表单。
HTML ：
< form id =TestForm>
< input type =textid =txtInname =txtIn/>
< p>< / p>
< button id =submit>提交< / button>
< / form>
CSS ：
标签{
display：inline-block;
margin-left：10px;
width：15px;
height：15px;
}
label.error {
background-color：red;
}
label.valid {
background-color：blue;
}
jquery： b
$（document）.ready（function（）{
var messages = {
'txtInRequired'：
};
$（'＃TestForm'）。validate（{
rule：{
txtIn：{
required：true，
rangelength：[8，16]
}
}，
消息：{
txtIn：messages.txtInRequired
}，
onfocusout：function ）{
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 ：当提交表单并且输入无效时，输入将不会获得焦点，需要与 focusCleanup：true ：当输入获得焦点时，验证是清除，因此不会显示错误或图标标签。 onkeyup：false ：on输入输入未验证。最后： success：function（label，element）{..} 在元素有效的情况下向标签添加类valid。
参考： http://jqueryvalidation.org/validate/
I have a form and JQuery validation. Everything works fine. Instead of showing messages, I want to show icons.
The wrong icon is working, but I have some problem with the right icon. When input is a right format, I see class="valid" in the syntax <input class="valid"...>. I try to display a right icon after <input..> by using class="valid". The right icon shows right on the text field and the text field disappears. LIVE CODE
Please help.
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>');
Unfortunately, the validation in the Fiddle is not always working for correct validation, but you can try to adjust $('.valid').after('<div class="valid"></div>'); to $('.valid').after('<div class="validicon"></div>'); and rename your class valid to validicon. Otherwise the input that will be set to class valid will be applied the css with width 15px etc and therefore not be visible.
Update: For the follow-up issues mentioned in the comments: You can try to add display:inline-block; to class erroricon. And as kind of second workaround - if it's ok for you to display kind of an erroricon inside the input instead of next to it, an easy way would be this:
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;
}
Update 2: I've just checked the options for the validate plugin. It's possible to add a label for valid elements by extending your settings for validate() like this:
$("#TestForm'").validate({
// keep your other settings/options for rules
// and messages here and add:
success: function(label) {
label.addClass("valid");
}
});
As mentioned in the comments, it's only possible to use css pseudo elements like :after or :before for container elements, not for elements like input or image. Good explanation for this provided at this comment by Robert Koritnik: CSS :after pseudo element on INPUT field. In case it's possible to add a label with approach suggested above, you can add css for label.valid:after {... in the same way as for label.error:after.
Update 3: For the next approach mentioned in the comments by OP - as adding the label with class valid doesn't seem to work - I just adjusted the Fiddle.
HTML adjustment - I moved the <span class="add"></span> after the <input> instead of wrapping the input in the span.
jquery adjustment:
if ($('#TestForm input').hasClass('valid')) {
$('.add').addClass('validicon');
} else {
$('.add').removeClass('validicon');
}
As mentioned, if the input is valid, the Fiddle throws a network error 403 CSRF verification failed, but it should work on the actual site.
Update 4: New approach using the options of jquery validate instead of trying a workaround. Adjusted Fiddle to display valid icon on submit without sending the form.
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
});
});
For reference for these adjustments: http://jqueryvalidation.org/category/plugin/
Short explanation:
Setting focusInvalid: false: The input won't get focus when the form was submitted and the input is invalid, necessary to combine with focusCleanup: true : when the input gets focus, validation is "cleaned", so the error or icon label won't be displayed. onkeyup: false : on enter the input is not validated. And finally: the success: function (label, element) { .. } adds class valid to the label in case the element is valid.
Reference: http://jqueryvalidation.org/validate/
这篇关于JQuery - 显示错误和正确的图标验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
