Jquery onload each loop EASY

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

Is that .each() loop not already doing what you're asking about? — nnnnnn
– nnnnnn, Commented Oct 24, 2012 at 4:58

Berker Yüceer · Accepted Answer · 2012-11-09 07:16:13Z

2

I guess this is what you wanted..

$(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(); }
    }
}

Demo: http://jsfiddle.net/BerkerYuceer/q2ajM/

edited Nov 9, 2012 at 7:16

answered Oct 24, 2012 at 7:46

Berker Yüceer

7,35518 gold badges72 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tim M. · Accepted Answer · 2012-10-24 05:06:32Z

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

edited Oct 24, 2012 at 5:06

Tim M.

54.5k14 gold badges126 silver badges167 bronze badges

answered Oct 24, 2012 at 5:04

Val

4134 silver badges11 bronze badges

Comments

sdespont · Accepted Answer · 2012-10-24 05:12:21Z

0

You should define your keyup events like this. By the way, if your elements form are created dinamically, you must bind events with .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');
        }
    });
});
}

answered Oct 24, 2012 at 5:12

sdespont

14.1k9 gold badges62 silver badges99 bronze badges

Collectives™ on Stack Overflow

Jquery onload each loop EASY

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related