Question

如果删除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/

的伟大作品

Answer 1

只需在addClass之后致电removeClass。假设“✓”类被称为“好”，以下应该可以解决这个问题：

field.parents('.item')
    .removeClass('bad')
    .addClass('good') 
    .find('.alert').animate({ marginLeft:32, opacity:0 }, 200, function(){
        $(this).remove();
    });

如果有效，则删除另一个类

1 个答案: