Question

I m building a very simple form validation which validates only required fields. This is experimental, i know there is many form validation plugin.

What i m doing is calling a function, passing to it the form id and a javascript object in this format

{
  control_id1 : {required : 'message to display if control is empty'},
  control_id2 : {required : 'message to display if control is empty'},
  ...
}

What the function does, is loop through the js object using for(var k in obj) {…} and check if the control with given id has an empty value, if so it appends a span tag to the control’s immediate parent with the given message.

It also binds the “blur” event to that control, so that upon losing focus the validation can be applied to the control once again.

You can see this in action here: http://jsfiddle.net/yvjZF/

As, you can see, it is showing messages ok, when u click the button. but if control loses focus, it displays the wrong message.

I cannot find the cause for it, perhaps i have misunderstanding in events model. Any help on this will be much appreciated.

Thanks,
Anjan

Answer 1

Not quite sure why, but it started working when I made changes to the following code:

for(var cid in validation_data)
{ 
    $('#' + cid).blur
    (
        function()
        {
            // validate_control($(this),validation_data[cid]);
            validate_control($(this),validation_data[$(this).attr('name')]);
        }
    );
}

I used to have this problem a lot when coding with ActionScript and it had something to do with the loop iterater affecting previous iterations of the loop. My only explanation is that it’s possible that the cid variable was being passed by reference and not by value as intended.