0

class="item bad" が削除された後、どのように追加または addClass しますか? 無効な場合はマークし、検証された場合はマークを外しますが、.bad が削除された場合はコメントしますか?

基本的に、入力フィールドに「x」を表示する .alert を作成しました。削除されたら、成功を示すために「✓」を追加したいと思います。

          <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/の素晴らしい作品からのものです。

4

1 に答える 1