jquery validate on elements not yet created

Question

I'm wondering if it's possible to have the jQuery Validator plugin validate elements that don't yet exist in the dom when the rules are initially setup.

Calling the .Rules("add", therules) method only attaches the rules to elements that currently exist in the dom. If I were to create some. The validation doesn't fire. Any thoughts?

Homepage of the validator I am using: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

New elements are being created via http://ejohn.org/blog/javascript-micro-templating/

Basically there's an ajax call and the server returns a bunch of json (ajaj?), this json is fed through with the resig's templating engine. An example template looks like so:

<script type="text/html" id="ProductsTemplateEdit">
    <td>
        <input type="hidden" value="<#= item.ID #>" id="Edit.ID" name="Edit.ID" />
        <input type="text" value="<#= item.Price#>" id="Edit.Price" name="Edit.Price" />
    </td>
</script>

The values are obviously filled in via the json that is passed in.

I should also mention that I am using the xval validation framework, which basically automatically generates the jquery validate rules for me: http://blog.codeville.net/2009/01/10/xval-a-validation-framework-for-aspnet-mvc/

Answer 1

You will want to look into jQuery 1.3's new Live Events

Answer 2

Okay, try two. What is adding your elements dynamically? Can't you just place the .Rules("add", ) to the same code?

Answer 3

Hey not sure if this is an unpolite hack but it worked for me. Before this, I was doing an each() on the selector and running into the same issue you're having with newly created, Ajaxed elements.

Mouseover event on live seems to have done the trick, granted ur not being crazy with your css:

// >>> MSG/Comment form validator, now and forever...  
    $('form.streamForms').live('mouseover', function(){
        $(this).validate({
            rules: {
                text: "required"

            },
            messages: {
                text: " "
            }
        });    
    });

Hope it helps!