Question

Ok, had such problem …
I’m trying to reduce amount of code, required to validate fields.
In this case I’ve created array with ids of elements which I wanted to bind events to.
Like this:

var fields = new Array('#edit-field-first-name', '#edit-field-last-name', '#edit-field-mobile');

Then I’m binding events in a loop:

for(var i = 0; i < fields.length; i++){
  if($('#user-profile-form ' + fields[i]).length > 0){
    var $obj = $('#user-profile-form ' + fields[i]);
    $obj.bind({
      blur :  function(){
                  if(!reg_chars.test($obj.val())){
                      $obj.css('border','1px solid #A14')
                          .parent().children('div.description').css('color', '#A14');
                  }else{
                      $obj.css('border-style','solid').css('border-color','#C5C3C3 #EDEDED #EDEDED #C5C3C3').css('border-width','1px')
                         .parent().children('div.description').css('color', '#333');
                  };
              }
    })
  }
}

And now strange things happen.
It’s triggering “blur” event properly. But it’s always referencing to last element in array. Looks like it’s always using the same object and just overwriting it every loop iteration.

So need help … What can be a solution?

Answer 1

The problem within context ($obj) assignment at bind function. Try to change to

    for(var i = 0; i < fields.length; i++){
      if($('#user-profile-form ' + fields[i]).length > 0){
        var $obj = $('#user-profile-form ' + fields[i]);
        $obj.bind({
          blur :  function(){
                      var $input = $(this);                      

                      if(!reg_chars.test($input.val())){
                          $input.css('border','1px solid #A14')
                              .parent().children('div.description').css('color', '#A14');
                      }else{
                          $input.css('border-style','solid').css('border-color','#C5C3C3 #EDEDED #EDEDED #C5C3C3').css('border-width','1px')
                             .parent().children('div.description').css('color', '#333');
                      };
                  }
        })
      }
    }