2012-10-24 71 views
2

我有一個簡單的鍵控功能,用於在表單上進行鍵控驗證的「keyup-an」類。這個班有大約10個領域。然而,在發佈後,我會向表單添加字段。但是綠色和紅色的背景消失了,因爲它不是keyup。我怎麼做這樣的事每個人將色彩在頁面加載基於此結果的背景jquery加載每個循環EASY

jQuery(document).ready(function() { 

$('.keyup-an').each(function(index) { 

    var inputVal = $(this).val(); 
    var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/; 
    if(!numericReg.test(inputVal)) { 
     $(this).css('background', '#FAC3C3'); 
     $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); 
    } 
    else { 
     $(this).css('background', 'lightgreen'); 
    } 
}); 


$('.keyup-an').keyup(function() { 
    $('span.error-keyup-1').hide(); 
    var inputVal = $(this).val(); 
    var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/; 
    if(!numericReg.test(inputVal)) { 
     $(this).css('background', '#FAC3C3'); 
     $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); 
    } 
    else { 
     $(this).css('background', 'lightgreen'); 
    } 
}); 
+2

那是' .each()'循環還沒有做你在問什麼? – nnnnnn

+0

它確實是一個noob因爲沒有正確提交一個文件。 – Val

回答

1
$('.keyup-an').each(function(index) { 

    var inputVal = $(this).val(); 
    var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/; 

    if(!numericReg.test(inputVal)) { 
     $(this).css('background', '#FAC3C3'); 
     $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); 
    } 
    else { 
     $(this).css('background', 'lightgreen'); 
    } 
}); 
0

你應該定義你的KEYUP這樣的活動。順便說一句,如果你的元素形式dinamically創建的,則必須綁定事件與.on()

jQuery(document).ready(function() { 

$('.keyup-an').each(function(index) { 
    $(this).keyup(function() { 
     var inputVal = $(this).val(); 
     var numericReg = /^[a-zA-Z0-9_ ]{2,30}$/; 
     if(!numericReg.test(inputVal)) { 
      $(this).css('background', '#FAC3C3'); 
      $(this).after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); 
     } 
     else { 
      $(this).css('background', 'lightgreen'); 
     } 
    }); 
}); 
} 
1

我想這是你想要的東西..

$(document).ready(function() { 
    // Each 
    $('.keyup-an').each(function() { 
     // Validate 
     validate(this); 
     // Key up 
     $(this).keyup(function(){ 
      // Validate 
      validate(this); 
     }); 
    }); 
}); 


// Validate Function 
function validate(element) { 
    var obj = $(element); 
    if(!/^[a-zA-Z0-9_ ]{2,30}$/.test(obj.val())) { 
     // Invalid 
     obj.css('background', '#FAC3C3'); 
     if(!obj.next().hasClass('error')) 
     { obj.after('<span class="error error-keyup-1">Please use letters or numbers only</span>'); } 
    } else { 
     // Valid 
     obj.css('background', 'lightgreen'); 
     if(obj.next().hasClass('error')) 
     { obj.next().remove(); } 
    } 
} 

演示:http://jsfiddle.net/BerkerYuceer/q2ajM/