How to validate dynamically added form elements? Created May 13, 2010

should not be a problem. you sould first add the inputs and then initialize the validator.

I have already tried this and it did not work.

The page has a single set of elements built in to the initially rendered html. I initialize the validator at this point and it works on that first row. At the user's request I create additional sets of form elements, and re-initialize the validator, but the additional form elements are not being validated.

try to re-initialize like this

$("selector-to-my-form").data("validator", null).validator({ 
  // config
});

That does not work either. I've only tried it with 1.2.1 though since the 1.2.2 download doesn't work.

Update: I have tested this with 1.2.2 as well. It still does not work on the dynamically created form elements.

function checkForm(id)
{
    var inputs = typeof id !== undefined ? $('#'+id+' input[required]:not(:hidden)') : $('input[required]:not(:hidden)');

    if (inputs) {
        if (typeof inputs.data == 'function' && typeof inputs.data('validator') == 'object') {
            inputs.data('validator').reset(inputs);
            inputs.data('validator', null);
        }
        inputs.validator(
            //config
        );

        return inputs.data("validator").checkValidity(); 
    }
}

Hi Dcodex, your script run ok.. but fail when I remove a dynamic added element. I'm tried to resolve but I cant't did it :(

Thanks, Federico

found bug with typeof inputs.data('validator') == 'object' i forgot null is an object too.
add:

if (typeof inputs.data == 'function' && typeof inputs.data('validator') == 'object' && inputs.data('validator') !== null) {
    //...
}

i tryt this:

<form id="myForm">
    <input name="input[1]" type="text" required="required" />
    <input name="input[2]" type="text" required="required" />
    <input name="input[3]" type="text" required="required" />
</form>
<script type="text/javascript">
    console.log(checkForm('myForm'));
    $('#myForm').append('<input required="required">');
    console.log(checkForm('myForm'));
    $('#myForm input').val('dummy');
    console.log(checkForm('myForm'));
    $('#myForm input:last').remove();
    console.log(checkForm('myForm'));
    $('#myForm input').val('');
    console.log(checkForm('myForm'));
</script>

result:

false
false
true
true
false

working ok for me ?

hi Dcodex,

thanks, the function is working for me (apart from the fact that input[required] of course will fail with select fields).

Nevertheless, I would hope that the functionality of working with dynamically added elements will be implemented into the core, so that no additional function call will be necessary.

thanks,

jean

Hello,

Version 1.2.3 will have a fix for this situation. You can do following

// initialize validator
$("form").validator(); 

// add new fields
$("form").append('<input type="email" value="foo" />');

// re-initialize and the new fields are taken into account
$("form").validator(); 

Additionally a new destroy method is introduced that will completely remove the validator instance. The new version is already in Github and here is the commit for this change:

http://github.com/jquerytools/jquerytools/commit/f2ffafa9a34ea4ff3b5c80e51db22deb60fe9e8c

be introducing a new destroy() method

This seems to be broken in 1.2.5. Can anyone confirm this?

It is broken for me too.

Anyone know how to get this working in 1.2.5?

Anyone have this working in 1.2.5?

Anyone have this working in 1.2.6?

Hi,

Do you have a standalone demo of code, where it shows the issue for you please? I would like to see if I can help get this working??