如果删除class =“item bad”后我将如何追加或添加类?标记如果无效,在验证时取消标记,但在删除.bad时备注?
基本上我已经让.alert在输入字段中显示“x”,当它被删除时我想添加一个“✓”来证明成功。
<div class="item"><!-- this is the class that .bad is added to -->
<label>
<span>Name</span>
<input type="text" name="fullName" data-validate-length-range="6" data-validate-words="2" placeholder="e.g. Jane M. Doe" required autofocus>
</label>
<div class="tooltip help">
<span>?</span>
<div class="help-content">
<b></b>
<p>Must contain at least a first and last name</p>
</div>
</div>
<!--div class="alert">This where the alert field is located</div-->
</div>
/* marks invalid fields*/
mark = function(field, text){
if( !text || !field || !field.length )
return false;
// check if not already marked as a 'bad' record and add the 'alert' object.
// if already is marked as 'bad', then make sure the text is set again because i might change depending on validation
var item = field.parents('.item'), warning;
item.find('.alert').remove();
if( defaults.alerts ){
warning = $('<div>').addClass('alert').text( text );
item.append( warning );
}
item.removeClass('bad');
setTimeout(function(){
item.addClass('bad');
}, 0);
};
/* un-marks invalid fields
*/
unmark = function(field){
if( !field || !field.length ){
console.warn('no "field" argument, null or DOM object not found')
return false;
}
field.parents('.item')
.removeClass('bad')
.find('.alert').animate({ marginLeft:32, opacity:0 }, 200, function(){
$(this).remove();
});
};
这个特殊的验证者来自:http://dropthebit.com/150/validation-styling-semantics-of-forms/
的伟大作品答案 0 :(得分:0)
只需在addClass
之后致电removeClass
。假设“✓”类被称为“好”,以下应该可以解决这个问题:
field.parents('.item')
.removeClass('bad')
.addClass('good')
.find('.alert').animate({ marginLeft:32, opacity:0 }, 200, function(){
$(this).remove();
});