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屋!