Question

I have an easy keyup function for class “keyup-an” for keyup validation on a form. There are about 10 fields with this class. However after post, I add fields to the form. But the background of green and red goes away because its not keyup. How do i do something like this each that will color the backgrounds based on this result on page load

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');
    }
});

Answer 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');
    }
});