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:

New elements are being created via

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">
        <input type="hidden" value="<#= item.ID #>" id="Edit.ID" name="Edit.ID" />
        <input type="text" value="<#= item.Price#>" id="Edit.Price" name="Edit.Price" />

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:


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

Nicholas H
I'm aware of live events, but don't see how they can be adapted for use with jquery validate
as of v1.3.1 live() only supports the following "Possible event values: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup"
Sorry, I'm not totally familiar with Validator's internals, but shouldn't it be raising some sort of custom event? If so, Live Events can be used in that case.
Nicholas H
live() is about DOM event delegation, not custom events doing custom bubbling.
Crescent Fresh

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

Nicholas H
I am actually using this method at the moment, but was hoping there would be a better way (using something similar to live events as you suggested before).
I think your current method is more "correct". From what you've described so far, it seems like you've got quite a bit happening client-side. Have you started to notice performance dropping? Last I heard live events can kind of kill performance.
Nicholas H

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(){
            rules: {
                text: "required"

            messages: {
                text: " "

Hope it helps!