Forums

validation for dynamic fields

glens1234 28 Feb, 2013
Hi.
I am having an issues validating some dynamic input boxes. Below is the snippet of code i have used to create the dynamic input boxes....


$("select#children").change(function () {
  var str = "";
  $("select#children option:selected").each(function () {
            str += $(this).text() + " ";
  });

 $('#no_of_children').html(" ");
 for (var i = 0; i < str; i++) { 
 $('#no_of_children').append('<p><label>Age of child '+(i+1)+'</label><input name="child'+(i+1)+'" id="child'+(i+1)+'" type="text" class="validate[\'required\',\'digit\']"></p>'); 


It all seems to work ok. When the user select an option, the appropriate number of input boxes are displayed.

The problem is that i cannot seem to find out how to validate them. I have read numerous posts on this forum but i cant seem to figure out what i am missing.

The html code looks like this...
<select name="children" id="children" name="no_of_children">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
 </select>
<div class="clear"></div>
<div id="error-message-no_of_children"></div>
</div>

<div class="ccms_form_element cfdiv_text">
<div id="no_of_children"></div>
<div id="error-message-child1"></div>
</div>


I have also tried switching the form to "wizard" and add the "auto javascript validation" event to the onsubmit event (including the field names in the digit box) but still no joy. Could someone please give me step by step instructions on to to validate these dynamic fields?

Here is a link to the form...
http://puripunn.com.s115991.gridserver.com/puripunn/promotions

P.S. I would also like to add a capcha.

Thanks.
GreyHead 28 Feb, 2013
Hi glens1234,

Validation of dynamic fields gets a bit messy, you can't just add the class as the registration is set up on page load.

If you can predefine the fields you may need before the page loads, then you can add the class and disable+hide them until needed, that will work OK.

Otherwise you have to dynamically add the class and the validation with FormCheck.register(). There's an example in this post - if you work through it step by step it's not too bad.

Bob
This topic is locked and no more replies can be posted.