Question

I have a number of inputs that are added dynamically via a plus and a minus sign.
All of these inputs will be added within the div encdomlocal. Im using the following code to validate the input and then add the css, but its not working as expected. i.e it only validates the first input box within the div.

$('#encdomlocal input:nth-child(2)').blur(function() {
    var REGEX = /^[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$/;
if (REGEX.test($("#encdomlocal input:nth-child(2)").val())) {
  $(this).removeClass();
  $(this).addClass("good");
} 
    else {
      $(this).removeClass();
      $(this).addClass("bad");
   }
});

Any help would be great, thanks….

Answer 1

You need to delegate for your dynamically created inputs
if using jQuery 1.7+ then use on

$(document).on('blur','#encdomlocal input:nth-child(2)',function() {

Else you can use delegate jquery 1.6 and lower

$(document).delegate('#encdomlocal input:nth-child(2)','blur',function() {

document can be replaced with any parent element

UPDATE:

if (REGEX.test($(this).val())) { //<-- I don't know what you were testing but using $(this) works here
    $(this).removeClass();
    $(this).addClass("good");
}
else {
    $(this).removeClass();
    $(this).addClass("bad");
}

Here’s the updated fiddle http://jsfiddle.net/9DW8f/9/

You were using

if (REGEX.test($("#encdomlocal input:nth-child(2)").val()))

it was returning a set of elements so you weren’t testing the current textbox that fired the blur event

The jQuery Object: The Wrapped Set: Selectors return a jQuery object known as the “wrapped set,” which is an array-like structure that contains all the selected DOM elements. You can iterate over the wrapped set like an array or access individual elements via the indexer ($(sel)[0] for example). More importantly, you can also apply jQuery functions against all the selected elements.<

If you are going to be using the same REGEX you can just add the other selector by separating with comma

$("#encdomlocal").on("blur", "input:nth-child(2),otherSelector",//<--- use this if regex for validation is the same

If you are using a new regex you can just use

$(document).on('blur','otherSelector',function() {
    // validation code goes here.  You can pretty much copy the other one and change the regex to what you need
});