Dynamic Extended Form Validation Problem

Javascript doesn't validate extended form?

[Sherif]

Hey Guys,

First of all, I would like to start of by thanking each and everyone of you for your contribution in that fruitful site. I would also like to mention that i am new to Javascript, and have relatively little knowledge in it. Recently, i was working with javascript to extend a html form that i had created so that it can adapt to the number of entries that a user needs when he is submitting the form.

Basically, i was using the script provided here [quirksmode.org ], and everything works perfectly.

I tried applying the SpryValidation that dreamweaver has, but it doesn't seen to be working probably due to the naming of the new fields added since they are not mentioned in the script at the end of the page. Does anyone have any idea how i can create a validation for the newly created fields?

Basically, this was the Javascript that i used in the code to extend the form:

var counter = 0;

function moreFields() {
counter++;
var newFields = document.getElementById('readroot').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;

Also, the jQuery Overlay Date picker [flowplayer.org ] doesn't work even though the only requirement is to set the type of the input field as date. Can anyone help me fix this problem?


Thank you in advance for your cooperation, and i hope to find a solution to these problems soon.

Sincerely,
Sherif

[Sherif]

Any suggestions?

[Fotiman]

According to the Spry Validation Textfield documentation, you need to wrap your text field in a span container with a unique ID:

<span id="sprytextfield1">
<input type="text" name="mytextfield" id="mytextfield"/>
</span> 

And then you need to initialize the widget like so:

<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
</script> 

However, your code for generating more elements is not creating a span wrapper. It might help if you post your HTML code because, for example, I can't tell what 'readroot' contains.

[Sherif]

Ok... No Problem....

Basically speaking, the code in the body tag of the html section is as follows

HTML Code

 <div id="standardform" style="display:none">
 <input type="hidden" name="counter" value="marker" />
 
 <select name="payment_type">
 <option value="single" selected="selected">Single</option>
 <option value="1">Monthly</option>
 <option value="3">Quarterly</option>
 <option value="6">Semi Anual</option>
 <option value="12">Anual</option>
 </select>
 <input name="number" value="" />
 <input name="value" value="" />
 <input type="date" name="startdate" value="" />
 <input type="button" value="Remove Payment"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
 <form method="post" action="formprocess.php">

<span id="writeroot"></span>

<input type="button" id="btnmoreFields" value="Add Payment!" onclick="moreFields();" />
<input type="submit" value="Send" />

</form>

Javascript Code

<script>
var counter = 0;

function moreFields() {
counter++;
var newFields = document.getElementById('standardform').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++) {
var theName = newField[i].name
if (theName)
newField[i].name = theName + counter;
}
var insertHere = document.getElementById('writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = moreFields;

</script>

Basically, as you said earlier, the spry needs to initialize the widget at the end of the code as you had said earlier... how can i make javascript initialize the code in the script at the end of the page? i guess this could be the key to the solution of the first segment of the problem.... also, if we remove the form elements, then we should also remove it from the code or else we will not be able to submit the form at all..


The second problem is the date input fields.... all what is required is to declare the input field type as date, and add the initialization script at the end of the page as follows

input code

<input type="date" name="startdate" value="" />

Javascript Initialization Code

<script>
$(":date").dateinput();
</script>

but when i add the field type with value of "date"... the jQuery tool only works on the standard form fields, and not on the additionally created ones.... do you have any suggestions for that?



Thanks a lot for the support.


Sincerely,
Sherif

[daveVk]

the jQuery tool only works on the standard form fields, and not on the additionally created ones

You will need to call dateinput() on the created ones.

The cloned inputs will have been previously modified by dateinput() you may need to unmodify these before calling dateinput(). An alert(newFields.innerHTML) will show modifications on cloned inputs.

[Sherif]

Hey daveVK,

Could you please clarify more on the alert section? i don't get the concept of unmodify as i am new to javascript as i said earlier....

Also, does anyone have any suggestions regards the form validation segment?


Thanks for the support.


Sincerely,
Sherif

[Fotiman]

Part of the problem, I think, is the way you're creating the new elements. You're essentially just taking a chunk of html elements and cloning the entire block, changing the ids of the first level children. You need to find some way to add wrappers to each of those items.

One option might be to get the 'standardform' node, and then iterate through the children creating new wrappers for each instead of doing a clone of the entire block. You'd need to use createElement to create the wrapper element, and append a clone of the node, giving the wrapper a unique id and keeping track of that id so that you could call:

var sprytextfield1 = new Spry.Widget.ValidationTextField(THEUNIQUEID);

I'm short on time at the moment, or I'd write up and example, but hopefully this will get you started...

Hope that helps.

[daveVk]

The example at the link you provided is coded

<INPUT type=date name=mydate >

the call $(":date").dateinput(); transforms that to

<INPUT class=date type=date name=mydate jQuery1291758529453="3">

the clone will have this form and needs be transformed back to

<INPUT type=date name=mydate >

before calling dateinput()

If there is only one date field involved you can hard code it eg

var newFields = document.getElementById('standardform').cloneNode(true);
// find all date fields within newFields, change html and initialize
$(newFields).find(':date').html('<input type=date name=mydate>').dateinput();
...

[Sherif]

hey DaveVk,

I don't exactly understand what do you mean when you say

"If there is only one date field involved you can hard code it eg..."

In my code, there is only one date field for each group of fields that are added to the existing form.

I also didn't understand the section:

<INPUT class=date type=date name=mydate jQuery1291758529453="3">

what do you mean by jQuery12915885......?


Generally speaking, all of what is required for the date input field, no matter how many initially existed with whatever name associated with each, all what we had to do is place this script at the end of the page....

I guess it has something to do with refreshing the script below... probably put it in a function, and call that function each time a fields are added or removed... i'll try that and see how it works...

 <script>
$(":date").dateinput();
</script>

Any Ideas regards the verification part of the newly created dynamic fields?


Thanks a lot for all of the support that i have received until now...


Sincerely,
Sherif

[Fotiman]

This is a very rough example. I'm not sure if the validator pieces actually work, (didn't have any more time to verify), but I got the date fields working. Note, the dateinput method exits if it encounters a field that's already initialized as a date input, so the fix is to call it on "each" of the inputs.

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/dateinput/css/skin1.css"/> 
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" /> 
<title>Test</title>
</head>
<div id="standardform" style="display:none">
  <input type="hidden" name="counter" value="marker" />
  <select name="payment_type">
    <option value="single" selected="selected">Single</option>
    <option value="1">Monthly</option>
    <option value="3">Quarterly</option>
    <option value="6">Semi Anual</option>
    <option value="12">Anual</option>
  </select>
  <span id="spryvalidatorNumber">
    <input name="number" value="" />
  </span>
  <span id="spryvalidatorValue">
    <input name="value" value="" />
  </span>
  <span id="spryvalidatorStartDate">
    <input type="date" name="startdate" value="" />
  </span>
  <input type="button" value="Remove Payment"
    onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form method="post" action="formprocess.php">
<div id="writeroot"></div>
<input type="button" id="btnmoreFields" value="Add Payment!" onclick="moreFields();" />
<input type="submit" value="Send" />
</form>
<script src="dateinput.js"></script> <!--http://cdn.jquerytools.org/1.2.5/full/jquery.tools.js?foo"-->
<script src="SpryValidationTextField.js" type="text/javascript"></script>
<script type="text/javascript">
var counter = 0;
var spryValidators = {
  textFields: []
};
function updateChildren(el, uniqueValue, validatorId) {
  var i,
    n,
    newFields = el.childNodes,
    theName,
    uid;
  for (i = 0, n = newFields.length; i < n; i++) {
    if (newFields[i].nodeType == 1) { // elements
      if (newFields[i].tagName.toLowerCase() == "span") {
        // give it a unique id
        uid = newFields[i].id + "_" + uniqueValue + "_" + i;
        newFields[i].id = uid;
        // update the child nodes
        updateChildren(newFields[i], uid, uid);
      }
      else {
        // Record the textField validator
        if (validatorId) {
          spryValidators.textFields.push(validatorId);
        }
        // give it a unique name
        theName = newFields[i].name;
        if (theName) {
          newFields[i].name = theName + counter;
        }
      }
    }
  }
}
function moreFields() {
  counter++;
  // Get the block containing the nodes to be cloned
  var newFields = document.getElementById('standardform').cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'block';
  //var newField = newFields.childNodes;
  updateChildren(newFields, counter);
  var insertHere = document.getElementById('writeroot');
  insertHere.parentNode.insertBefore(newFields,insertHere);
  // Attach spry Validation
  for (i = 0, n = spryValidators.textFields.length; i < n; i++) {
    if (spryValidators.textFields[i]) {
      // This is just for debugging
      alert('creating validator: ' + spryValidators.textFields[i]);
      new Spry.Widget.ValidationTextField(spryValidators.textFields[i]);
      spryValidators.textFields[i] = null;
    }
  }
  // Setup date field
  $(":date").each(function (i, el) {
    $(this).dateinput();
  });
}
</script>
</body>
</html>

[Fotiman]

Note also in my example that I was pulling in a local version of jquery tools with the dateinput (I needed to see the non-minified version and the only way to do that was to download the individual files and then I combined them myself without minification).

[Sherif]

Thanks Fotiman for all of you effort...

I read your post, and i relatively get what you did to approach these problems but i have a few questions on your script so that i can fully understand it...

I understood that you created a function to create the form fields other then one that i used within the initial function...


1. when you call the updateChildren(newFields, counter); function, you pass 2 variables with it... in the function definition, it is waiting for 3 variables..
function updateChildren(el, uniqueValue, validatorId) {...


Could you please explain the updateChildren() function since i don't really understand whats going on there?


2. I noticed that you are using the el in many of the functions... could you please tell me what this is for since i can't trace it in the code that you wrote.
(i guess it has something to do with Question 1 regards the 3 variables...)

3. In the date function, i noticed that you called a function without giving it a name... is this normal?

 // Setup date field
 $(":date").each(function (i, el) {
 $(this).dateinput();
 });

Again...Thanks a lot for all of the support.... and sorry for the ignorant questions as i am a beginner in javascript....

Sincerely,
Sherif

[Fotiman]

1. You'll see that updateChildren is called with 2 children initially, but when it encounters a <span> element (a wrapper around an element), it will pass 3 parameters. This was a way to pass the span element's id (so that it can create the appropriate spry validation object when it needs to).

2. I use "el" as the variable name when it's an HTML element being passed.

3. Yes, this is normal. I'm not actually "calling" the function there, I'm passing a function reference to the each method (it takes a function as it's parameter).

Here is an updated version of the code. I removed the 3rd parameter version of the function and instead just record the id of the span when the span is encountered. I've added detailed comments. Let me know if you have any other questions on it.

Note, I've also discovered that the call to $(":date") seems to only find the new elements in Firefox. IE7 and Chrome both fail for me, so there's still some work that needs to be done there.

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/dateinput/css/skin1.css"/> 
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" /> 
<title>Test</title>
</head>
<div id="standardform" style="display:none">
  <input type="hidden" name="counter" value="marker" />
  <select name="payment_type">
    <option value="single" selected="selected">Single</option>
    <option value="1">Monthly</option>
    <option value="3">Quarterly</option>
    <option value="6">Semi Anual</option>
    <option value="12">Anual</option>
  </select>
  <span id="spryvalidatorNumber">
    <input name="number" value="" />
  </span>
  <span id="spryvalidatorValue">
    <input name="value" value="" />
  </span>
  <span id="spryvalidatorStartDate">
    <input type="date" name="startdate" value="" />
  </span>
  <input type="button" value="Remove Payment"
    onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form method="post" action="formprocess.php">
<div id="writeroot"></div>
<input type="button" id="btnmoreFields" value="Add Payment!" onclick="moreFields();" />
<input type="submit" value="Send" />
</form>
<script src="dateinput.js"></script> <!--http://cdn.jquerytools.org/1.2.5/full/jquery.tools.js?foo"-->
<script src="SpryValidationTextField.js" type="text/javascript"></script>
<script type="text/javascript">
var counter = 0;
var spryValidators = {
  textFields: []
};
/**
 * @param el The element whose children we want to inspect
 * @param uniqueValue A unique value that will be appended to the id of child
 * elements.
 * is needed to create the Spry.Widget.ValidationTextField.
 */ 
function updateChildren(el, uniqueValue) {
  var i,     // index to an array
    n,     // length of the array 
    newFields = el.childNodes, // The children of the current el
    theName,  // the name attribute of child inputs
    uid;    // a unique id of the validator span wrapper around an input
  // iterate through each of the children of the element passed in
  for (i = 0, n = newFields.length; i < n; i++) {
    // ignore all children that are not HTMLElement nodes (nodeType 1)
    if (newFields[i].nodeType == 1) {
      // check to see if the current element is a span element. If so,
      // we'll need to updated that elements children as well.
      if (newFields[i].tagName.toLowerCase() == "span") {
        // give it a unique id based on it's current id, plus the
        // unique value that was passed in, plus the index in the array
        uid = newFields[i].id + "_" + uniqueValue + "_" + i;
        newFields[i].id = uid;
        // Record the id value in an array. When we're all done looping,
        // we'll create a validator for each item in the array.
        spryValidators.textFields.push(uid);
        // update the child nodes of the span
        updateChildren(newFields[i], uid);
      }
      else {
        // this is not a span element, so must be a form control
        // Note, that is not a strict requirement... if the markup that
        // we copied contained other elements than form controls and
        // span element, then we should probably add additional checks
        // here. However, given the HTML above, this should work.
        // ...
        // give this element a unique name based on the current name
        // plus the global counter
        theName = newFields[i].name;
        if (theName) {
          newFields[i].name = theName + counter;
        }
      }
    }
  }
}
/**
 * Add a duplicate of 'standardform' field items to the form.
 */
function moreFields() {
  counter++;
  // Get the block containing the nodes to be cloned
  var newFields = document.getElementById('standardform').cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'block';
  //var newField = newFields.childNodes;
  updateChildren(newFields, counter);
  var insertHere = document.getElementById('writeroot');
  insertHere.parentNode.insertBefore(newFields,insertHere);
  // Attach spry Validation
  for (i = 0, n = spryValidators.textFields.length; i < n; i++) {
    if (spryValidators.textFields[i]) {
      // This is just for debugging
      alert('creating validator: ' + spryValidators.textFields[i]);
      new Spry.Widget.ValidationTextField(spryValidators.textFields[i]);
      // remove this field from the array so we dont attempt to create
      // it again next time moreFields is called.
      spryValidators.textFields[i] = null;
    }
  }
  // Setup date field
  var d = $(":date");
  d.each(function (i, el) {
    $(this).dateinput();
  });
}
</script>
</body>
</html>

[Sherif]

WWWWWOOOOOWWWWW Fotiman....

I really wish that everyone here is like you with all of that patience and ready to help with all of what they know..... (Thanks for that...)

I never expected that you would add such detailed comment in the script...

I read your code and started implementing it.... but there is a couple of smaller questions... (I know that you are gonna kill me when i ask them... but i am ready to pay the price for that :S) :D

I tested your code on firefox and as you said it WAS working... but I would also like to add that it is not working on SAFARI (5.0.2).....

But i have very small problems.......

1. for the spry validation for example, there is a span tag within the initial span tag itself as shown below...

<span id="sprytextfield1">
 <input name="number" value="" />
 <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span>

The second span tag usually contains the message that we would like to output.

As a result... i get 3 alert messages...

creating validator: sprytextfield1_2_5
creating validator: _sprytextfield1_2_5_3
creating validator: _sprytextfield1_2_5_4

When creating another field group... the same problem...

creating validator: sprytextfield1_3_5
creating validator: _sprytextfield1_3_5_3
creating validator: _sprytextfield1_3_5_4

etc...
etc...

What is your opinion for that?

2. does the script that you have provided add the relative spry validator script as show below?:-

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "integer", {validateOn:["change"]});

I am asking this since i sometimes like the on change validation...

and for some reason, the spry validation look appears but does not happen.. what do you recommend?


3. Finally! for the date input fields to work on the various other platforms... what are your recommendations for that?


Thanks for the huge support that you had provided until now...

Your the best ;)

Sincerely,
Sherif

[Fotiman]

1. for the spry validation for example, there is a span tag within the initial span tag itself as shown below...

Ah, I'm not familiar with Spry so I wasn't aware of that. Fortunately, it should be easy to fix. Lets just add another check to see if the span element contains any input element children.

2. does the script that you have provided add the relative spry validator script as show below?:-

As I had it, no. I've added that "change" bit. Below is an updated version, which appears to be working for me (on the first input element, which is where I added the validation text).

3. Need to give it some thought... out of time for today though. :)

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/dateinput/css/skin1.css"> 
<link href="SpryValidationTextFields.css" rel="stylesheet" type="text/css" > 
<title>Test</title>
</head>
<div id="standardform" style="display:none">
  <input type="hidden" name="counter" value="marker" />
  <select name="payment_type">
    <option value="single" selected="selected">Single</option>
    <option value="1">Monthly</option>
    <option value="3">Quarterly</option>
    <option value="6">Semi Anual</option>
    <option value="12">Anual</option>
  </select>
  <span id="spryvalidatorNumber">
    <input name="number" value="" />
    <span class="textfieldRequiredMsg">A value is required.</span>
    <span class="textfieldInvalidFormatMsg">Invalid format.</span>
  </span>
  <span id="spryvalidatorValue">
    <input name="value" value="" />
  </span>
  <span id="spryvalidatorStartDate">
    <input type="date" name="startdate" value="" />
  </span>
  <input type="button" value="Remove Payment"
    onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form method="post" action="formprocess.php">
<div id="writeroot"></div>
<input type="button" id="btnmoreFields" value="Add Payment!" onclick="moreFields();" />
<input type="submit" value="Send" />
</form>
<script src="dateinput.js"></script> <!--http://cdn.jquerytools.org/1.2.5/full/jquery.tools.js?foo"-->
<script src="SpryValidationTextField.js" type="text/javascript"></script>
<script type="text/javascript">
var counter = 0;
var spryValidators = {
  textFields: []
};
/**
 * @param el The element whose children we want to inspect
 * @param uniqueValue A unique value that will be appended to the id of child
 * elements.
 * is needed to create the Spry.Widget.ValidationTextField.
 */ 
function updateChildren(el, uniqueValue) {
  var i,     // index to an array
    n,     // length of the array 
    newFields = el.childNodes, // The children of the current el
    theName,  // the name attribute of child inputs
    uid;    // a unique id of the validator span wrapper around an input
  // iterate through each of the children of the element passed in
  for (i = 0, n = newFields.length; i < n; i++) {
    // ignore all children that are not HTMLElement nodes (nodeType 1)
    if (newFields[i].nodeType == 1) {
      // check to see if the current element is a span element. If so,
      // we'll need to updated that elements children as well.
      if (newFields[i].tagName.toLowerCase() == "span") {
        var inputChildren = newFields[i].getElementsByTagName('input');
        if (inputChildren && inputChildren.length > 0) {
          // give it a unique id based on it's current id, plus the
          // unique value that was passed in, plus the index in the array
          uid = newFields[i].id + "_" + uniqueValue + "_" + i;
          newFields[i].id = uid;
          // Record the id value in an array. When we're all done looping,
          // we'll create a validator for each item in the array.
          spryValidators.textFields.push(uid);
          // update the child nodes of the span
          updateChildren(newFields[i], uid);
        }
      }
      else {
        // this is not a span element, so must be a form control
        // Note, that is not a strict requirement... if the markup that
        // we copied contained other elements than form controls and
        // span element, then we should probably add additional checks
        // here. However, given the HTML above, this should work.
        // ...
        // give this element a unique name based on the current name
        // plus the global counter
        theName = newFields[i].name;
        if (theName) {
          newFields[i].name = theName + counter;
        }
      }
    }
  }
}
/**
 * Add a duplicate of 'standardform' field items to the form.
 */
function moreFields() {
  counter++;
  // Get the block containing the nodes to be cloned
  var newFields = document.getElementById('standardform').cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'block';
  //var newField = newFields.childNodes;
  updateChildren(newFields, counter);
  var insertHere = document.getElementById('writeroot');
  insertHere.parentNode.insertBefore(newFields,insertHere);
  // Attach spry Validation
  for (i = 0, n = spryValidators.textFields.length; i < n; i++) {
    if (spryValidators.textFields[i]) {
      // This is just for debugging
      alert('creating validator: ' + spryValidators.textFields[i]);
      new Spry.Widget.ValidationTextField(spryValidators.textFields[i], "integer", {validateOn: ["change"]});
      // remove this field from the array so we dont attempt to create
      // it again next time moreFields is called.
      spryValidators.textFields[i] = null;
    }
  }
  // Setup date field
  var d = $(":date");
  d.each(function (i, el) {
    $(this).dateinput();
  });
}
</script>
</body>
</html>

[Sherif]

Hey Fotiman...

For Some reason, a Miracle had happened.... the date field is not working on SAFARI... i don't know what you changed but it seems to have fixed the job.... i still didn't test it on I.E. and chrome as i am coding on a mac..

I made a minor modification to the script and that was for the date segment i added the following:

 // Setup date field
 var d = $(":date");
 d.each(function (i, el) {
 $(this).dateinput(

{

format: 'yyyy-mm-dd',// the format displayed for the user
selectors: true, // whether month/year dropdowns are shown
//min: -100, // min selectable day (100 days backwards)
//max: 1, // max selectable day (100 days onwards)
offset: [10, 20], // tweak the position of the calendar
speed: 'fast', // calendar reveal speed
firstDay: 0, // which day starts a week. 0 = sunday, 1 = monday etc..
yearRange: [-6, 7],
trigger: true


}

);

});

The validation seems to work, but i noticed that there is a minor problem with it, and that is with the validation type...

for the <input name="number"...> I wanted a spry validation with the integer type...

for the <input name="value" ...> I wanted the spry validation with the real type.

and finally for the <input type="date" name="startdate" ...> I wanted the spry validation with the date type "yyyy-mm-dd"

when i define the hidden form fields, i get these three validation types in a script at the end

var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "integer", {validateOn:["change"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "real", {validateOn:["change"]});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "date", {format:"yyyy-mm-dd", validateOn:["change"]});

so how can we make a check in the javascript code that we made to check the input field name, and append to it the appropriate spry validation type?

And could you please verify if this modification that i made to the date function to see if it is working on I.E and Chrome?


Thanks a lot for the support.

Sincerely,
Sherif

[Sherif]

Hey Guys.....

Any suggestions on the previous post?

I also have to mention that the date field is only working for the first date entry only...... on SAFARI

Any suggestions on how to fix that problem?

also any ideas on how to make javascript push the appropriate validation type based on the input name, id, or any other marker as mentioned above?

Fotiman... WHERE ARE YOU?
We are almost there... :)


Thanks for all of the support.


Sincerely,
Sherif

[Fotiman]

There's 2 places in the code we'll need to change. First, where we record the uid. We'll want to also record the type of validator for the particular field. I think that was part of why I originally had the validator being created when the text field was encountered (vs. when the span is encountered).

The other place that needs to be modified is where the field is created.

So the first one:

if (inputChildren && inputChildren.length > 0) {
     // give it a unique id based on it's current id, plus the
     // unique value that was passed in, plus the index in the array
     uid = newFields[i].id + "_" + uniqueValue + "_" + i;
     newFields[i].id = uid;
     // Record the id value in an array. When we're all done looping,
     // we'll create a validator for each item in the array.
     spryValidators.textFields.push(uid);
     // update the child nodes of the span
     updateChildren(newFields[i], uid);
    }

We'll want to look at the children to see what the names of the input is. For example:

if (inputChildren && inputChildren.length > 0) {
     // give it a unique id based on it's current id, plus the
     // unique value that was passed in, plus the index in the array
     uid = newFields[i].id + "_" + uniqueValue + "_" + i;
     newFields[i].id = uid;
     // Look at the child input to determine which type
     switch (inputChildren[0].name) {
     case "number":
       type = "integer";
       break;
     case "value":
       type = "real";
       break;
     case "startdate":
       type = "date";
       break;
     }
     // Record the id value in an array. When we're all done looping,
     // we'll create a validator for each item in the array.
     spryValidators.textFields.push({uid: uid, type: type});
     // update the child nodes of the span
     updateChildren(newFields[i], uid);
    }

And then:

for (i = 0, n = spryValidators.textFields.length; i < n; i++) {
  if (spryValidators.textFields[i]) {
   // This is just for debugging
   alert('creating validator: ' + spryValidators.textFields[i]);
   if (spryValidators.textFields[i].type == "number") {
     new Spry.Widget.ValidationTextField(spryValidators.textFields[i], "integer", {validateOn: ["change"]});
   }
   else if (spryValidators.textFields[i].type == "real") {
     // create the appropriate validator here...
   }
   // and if type is startdate, yada yada yada...
   // remove this field from the array so we dont attempt to create
   // it again next time moreFields is called.
   spryValidators.textFields[i] = null;
  }
 }

I'm not providing complete code here... out of time. But I hope this helps.

[Sherif]

Hey Fotiman....

Thanks for the head start... i started modifying the parts of the script that you have mentioned, but for some reason, the spry validation no longer works at all....

even though i added the different segments for the spry itself:

for (i = 0, n = spryValidators.textFields.length; i < n; i++) {
 if (spryValidators.textFields[i]) {
 // This is just for debugging
 //alert('creating validator: ' + spryValidators.textFields[i]);
 if (spryValidators.textFields[i].type == "

integer

") {
 new Spry.Widget.ValidationTextField(spryValidators.textFields[i], "integer", {validateOn: ["change"]});
 }
 else if (spryValidators.textFields[i].type == "real") {
 new Spry.Widget.ValidationTextField(spryValidators.textFields[i], "real", {validateOn:["change"]});
 }
 else if (spryValidators.textFields[i].type == "date") {
 new Spry.Widget.ValidationTextField(spryValidators.textFields[i], "date", {validateOn:["change"], format:"yyyy-mm-dd"}); 
 }
 // and if type is startdate, yada yada yada...
 // remove this field from the array so we dont attempt to create
 // it again next time moreFields is called.
 spryValidators.textFields[i] = null;
 }
 }

and i even fixed the type part since you had it as number, and it should be integer.... but for some reason nothing worked...

Even, the date field stopped showing the jQuery tool...


ALL of your help is really appreciated...
Thanks for the support.


Sincerely,
Sherif.

[Fotiman]

Sorry about that... I cobbled it together really quickly without trying to run it. Here's a modified version of the entire script:

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/dateinput/css/skin1.css"> 
<link href="SpryValidationTextFields.css" rel="stylesheet" type="text/css" > 
<title>Test</title>
</head>
<div id="standardform" style="display:none">
  <input type="hidden" name="counter" value="marker" />
  <select name="payment_type">
    <option value="single" selected="selected">Single</option>
    <option value="1">Monthly</option>
    <option value="3">Quarterly</option>
    <option value="6">Semi Anual</option>
    <option value="12">Anual</option>
  </select>
  <span id="spryvalidatorNumber">
    <input name="number" value="0" />
    <span class="textfieldRequiredMsg">A value is required.</span>
    <span class="textfieldInvalidFormatMsg">Invalid format.</span>
  </span>
  <span id="spryvalidatorValue">
    <input name="value" value="1" />
  </span>
  <span id="spryvalidatorStartDate">
    <input type="date" class="date" name="startdate" value="" />
  </span>
  <input type="button" value="Remove Payment"
    onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form method="post" action="formprocess.php">
<div id="writeroot"></div>
<input type="button" id="btnmoreFields" value="Add Payment!" onclick="moreFields();" />
<input type="submit" value="Send" />
</form>
<script src="dateinput.js"></script> <!--http://cdn.jquerytools.org/1.2.5/full/jquery.tools.js?foo"-->
<script src="SpryValidationTextField.js" type="text/javascript"></script>
<script type="text/javascript">
var counter = 0;
var spryValidators = {
  textFields: []
};
/**
 * Given a DOM node, iterate through the children and return the name of the
 * first input found. If no inputs are found, return null.
 * @param n The Node whose children will be iterated through
 */
function getFirstInputName(n) {
  var children = n.childNodes,
    i,
    n;
  for (i = 0, n = children.length; i < n; i++) {
    // if a child node is an element (nodeType 1) and has tagName "input"
    // then we can stop searching and return the name
    if (children[i].nodeType == 1 && children[i].tagName.toLowerCase() == "input") {
      return children[i].name;
    }
  }
  // if no input elements were found, return null
  return null;
}
/**
 * @param el The element whose children we want to inspect
 * @param uniqueValue A unique value that will be appended to the id of child
 * elements.
 * is needed to create the Spry.Widget.ValidationTextField.
 */ 
function updateChildren(el, uniqueValue) {
  var i,     // index to an array
    n,     // length of the array 
    newFields = el.childNodes, // The children of the current el
    theName,  // the name attribute of child inputs
    uid;    // a unique id of the validator span wrapper around an input
  // iterate through each of the children of the element passed in
  for (i = 0, n = newFields.length; i < n; i++) {
    // ignore all children that are not HTMLElement nodes (nodeType 1)
    if (newFields[i].nodeType == 1) {
      // check to see if the current element is a span element. If so,
      // we'll need to updated that elements children as well.
      if (newFields[i].tagName.toLowerCase() == "span") {
        var firstInputName = getFirstInputName(newFields[i]);
        if (firstInputName) {
          // give it a unique id based on it's current id, plus the
          // unique value that was passed in, plus the index in the array
          uid = newFields[i].id + "_" + uniqueValue + "_" + i;
          newFields[i].id = uid;
          // Record the id value in an array. When we're all done looping,
          // we'll create a validator for each item in the array.
          spryValidators.textFields.push({uid: uid, name: firstInputName});
          // update the child nodes of the span
          updateChildren(newFields[i], uid);
        }
      }
      else {
        // this is not a span element, so must be a form control
        // Note, that is not a strict requirement... if the markup that
        // we copied contained other elements than form controls and
        // span element, then we should probably add additional checks
        // here. However, given the HTML above, this should work.
        // ...
        // give this element a unique name based on the current name
        // plus the global counter
        theName = newFields[i].name;
        if (theName) {
          newFields[i].name = theName + counter;
        }
      }
    }
  }
}
/**
 * Add a duplicate of 'standardform' field items to the form.
 */
function moreFields() {
  counter++;
  // Get the block containing the nodes to be cloned
  var newFields = document.getElementById('standardform').cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'block';
  //var newField = newFields.childNodes;
  updateChildren(newFields, counter);
  var insertHere = document.getElementById('writeroot');
  insertHere.parentNode.insertBefore(newFields,insertHere);
  // Attach spry Validation
  for (i = 0, n = spryValidators.textFields.length; i < n; i++) {
    if (spryValidators.textFields[i]) {
      // This is just for debugging
      alert('creating validator: ' + spryValidators.textFields[i].uid + ", " +spryValidators.textFields[i].name);
      switch (spryValidators.textFields[i].name) {
      case "number":
        new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "integer", {validateOn: ["change"]});
        break;
      case "value":
        new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "real", {validateOn: ["change"]});
        break;
      case "startdate":
        new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "date", {validateOn: ["change"], format:"yyyy-mm-dd"});
        break;
      }
      // remove this field from the array so we dont attempt to create
      // it again next time moreFields is called.
      spryValidators.textFields[i] = null;
    }
  }
  // Setup date field
  var d = $("input.date");
  d.each(function (i, el) {
    $(this).dateinput();
  });
}
</script>
</body>
</html>

This also fixes the dateinput issue by giving the date field a class of "date" and selecting on the class instead of the type.

[daveVk]

Fotiman: curious if there is a difference between

var d = $("input.date");
d.each(function (i, el) {
$(this).dateinput();
});

and

$("input.date").dateinput();

[Fotiman]

There is a difference. The second format will only work on the first date field it encounters (as I mentioned in a previous post). The first one will apply the dateinput to all of the date fields it encounters.

[Sherif]

Hey Fotiman...

As i expected... you are a life savior.....

Thanks for the information and support that you have provided....

I will test it out and come back later telling you all guys how everything worked...


Again thanks for the support.



Sincerely,
Sherif

[Sherif]

Hey Fotiman....

The validation works perfectly on all created fields..... but i think now there is a small problem with the function calling the date input....

For some reason, the date fields are not working, not even on the original standard one in the hidden form.

The strange thing is that they no longer work on firefox for me....

I even created an alert inside the function for debugging, and it wasn't called....

var d = $("input.date");
 d.each(function (i, el) {

alert("CALLING DATE FUNCTION");

 $(this).dateinput();
 });

Any suggestions? i tried comparing it with the earlier ones but unfortunately i couldn't find a solution...



Thanks a lot for all of the help man... really appreciate it...



Sincerely,
Sherif

[Fotiman]

The last example that I posted works for me in both Firefox and Chrome, though it doesn't seem to be applying the dateinput to any inputs other than the first one in IE. I've found the reason for that. It's applying the dateinput to the hidden field that gets cloned, which adds some custom properties to the element. When IE clones that element, it's copying those custom properties as well (Firefox and Chrome do not). Therefore, we want to make sure that the dateinput does not get applied to the hidden field, so I've modified the selector slightly to exclude the hidden field:

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/dateinput/css/skin1.css"> 
<link href="SpryValidationTextFields.css" rel="stylesheet" type="text/css" > 
<title>Test</title>
</head>
<div id="standardform" style="display:none">
  <input type="hidden" name="counter" value="marker" />
  <select name="payment_type">
    <option value="single" selected="selected">Single</option>
    <option value="1">Monthly</option>
    <option value="3">Quarterly</option>
    <option value="6">Semi Anual</option>
    <option value="12">Anual</option>
  </select>
  <span id="spryvalidatorNumber">
    <input name="number" value="0" />
    <span class="textfieldRequiredMsg">A value is required.</span>
    <span class="textfieldInvalidFormatMsg">Invalid format.</span>
  </span>
  <span id="spryvalidatorValue">
    <input name="value" value="1" />
  </span>
  <span id="spryvalidatorStartDate">
    <input type="date" class="date" name="startdate" value="" />
  </span>
  <input type="button" value="Remove Payment"
    onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form method="post" action="formprocess.php">
<div id="writeroot"></div>
<input type="button" id="btnmoreFields" value="Add Payment!" onclick="moreFields();" />
<input type="submit" value="Send" />
</form>
<script src="dateinput.js"></script> <!--http://cdn.jquerytools.org/1.2.5/full/jquery.tools.js?foo"-->
<script src="SpryValidationTextField.js" type="text/javascript"></script>
<script type="text/javascript">
var counter = 0;
var spryValidators = {
  textFields: []
};
/**
 * Given a DOM node, iterate through the children and return the name of the
 * first input found. If no inputs are found, return null.
 * @param n The Node whose children will be iterated through
 */
function getFirstInputName(n) {
  var children = n.childNodes,
    i,
    n;
  for (i = 0, n = children.length; i < n; i++) {
    // if a child node is an element (nodeType 1) and has tagName "input"
    // then we can stop searching and return the name
    if (children[i].nodeType == 1 && children[i].tagName.toLowerCase() == "input") {
      return children[i].name;
    }
  }
  // if no input elements were found, return null
  return null;
}
/**
 * @param el The element whose children we want to inspect
 * @param uniqueValue A unique value that will be appended to the id of child
 * elements.
 * is needed to create the Spry.Widget.ValidationTextField.
 */ 
function updateChildren(el, uniqueValue) {
  var i,     // index to an array
    n,     // length of the array 
    newFields = el.childNodes, // The children of the current el
    theName,  // the name attribute of child inputs
    uid;    // a unique id of the validator span wrapper around an input
  // iterate through each of the children of the element passed in
  for (i = 0, n = newFields.length; i < n; i++) {
    // ignore all children that are not HTMLElement nodes (nodeType 1)
    if (newFields[i].nodeType == 1) {
      // check to see if the current element is a span element. If so,
      // we'll need to updated that elements children as well.
      if (newFields[i].tagName.toLowerCase() == "span") {
        var firstInputName = getFirstInputName(newFields[i]);
        if (firstInputName) {
          // give it a unique id based on it's current id, plus the
          // unique value that was passed in, plus the index in the array
          uid = newFields[i].id + "_" + uniqueValue + "_" + i;
          newFields[i].id = uid;
          // Record the id value in an array. When we're all done looping,
          // we'll create a validator for each item in the array.
          spryValidators.textFields.push({uid: uid, name: firstInputName});
          // update the child nodes of the span
          updateChildren(newFields[i], uid);
        }
      }
      else {
        // this is not a span element, so must be a form control
        // Note, that is not a strict requirement... if the markup that
        // we copied contained other elements than form controls and
        // span element, then we should probably add additional checks
        // here. However, given the HTML above, this should work.
        // ...
        // give this element a unique name based on the current name
        // plus the global counter
        theName = newFields[i].name;
        if (theName) {
          newFields[i].setAttribute("name", theName + counter);
          newFields[i].name = theName + counter;
        }
      }
    }
  }
}
/**
 * Add a duplicate of 'standardform' field items to the form.
 */
function moreFields() {
  counter++;
  // Get the block containing the nodes to be cloned
  var newFields = document.getElementById('standardform').cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'block';
  //var newField = newFields.childNodes;
  updateChildren(newFields, counter);
  var insertHere = document.getElementById('writeroot');
  insertHere.parentNode.insertBefore(newFields,insertHere);
  // Attach spry Validation
  for (i = 0, n = spryValidators.textFields.length; i < n; i++) {
    if (spryValidators.textFields[i]) {
      // This is just for debugging
      alert('creating validator: ' + spryValidators.textFields[i].uid + ", " +spryValidators.textFields[i].name);
      switch (spryValidators.textFields[i].name) {
      case "number":
        new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "integer", {validateOn: ["change"]});
        break;
      case "value":
        new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "real", {validateOn: ["change"]});
        break;
      case "startdate":
        new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "date", {validateOn: ["change"], format:"yyyy-mm-dd"});
        break;
      }
      // remove this field from the array so we dont attempt to create
      // it again next time moreFields is called.
      spryValidators.textFields[i] = null;
    }
  }
  // Setup date field
  var d = $("input.date[name!=startdate]");
  d.each(function (i, el) {
    $(el).dateinput();
  });
}
</script>
</body>
</html>

As for why it wasn't working for you, is it possible you didn't add the date class to your date input? Try this new version and let me know if it works for you.

[Sherif]

Hey Fotiman....


Now the date input works perfectly appearing each time we click on a date field, and the spry validation works great... but there is a minor problem in the script........

For some reason, the date input field doesn't detect the actual input from the jQuery date tool... meaning that it will display it, but when i click on the submit button, the form and spry couldn't detect the visible input and say:

A Value is Required

Any suggestions for that?



Thanks a million for the support.


Sincerely,
Sherif

[Fotiman]

That's not the behavior I'm seeing. To me, it looks like the value is invalid because of the date format. For example, changing this:

new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "date", {validateOn: ["change"], format:"yyyy-mm-dd"});

to this:

new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "date", {validateOn: ["change"], format:"mm/dd/yy"});

fixes the problem for me, because mm/dd/yy is the format the dateinput is using. There's probably a way to configure that though.

[Sherif]

Hey Fotiman....


I am aware of what you are saying as i added the customization variables in the code for the jQuery tools as follows:

var d = $("input.date[name!=startdate]");
 d.each(function (i, el) {
 $(el).dateinput(
{

format: 'yyyy-mm-dd',// the format displayed for the user
selectors: true, // whether month/year dropdowns are shown
//min: -100, // min selectable day (100 days backwards)
//max: 1, // max selectable day (100 days onwards)
offset: [10, 20], // tweak the position of the calendar
speed: 'fast', // calendar reveal speed
firstDay: 0, // which day starts a week. 0 = sunday, 1 = monday etc..
yearRange: [-6, 7],
trigger: true

}
);
 });

And it displays correctly, and the on change validation state, it is ok and doesn't provide a warning...

I Tested it on firefox and it was working, but for some reason, it is not working on SAFARI.....(I wasn't able to test it on CHROME or IE)

Notice it is asking for a value "A Value is Required", and not stating that it is "Invalid format" -----> meaning that it is treating it as if it is EMPTY


Any suggestions for that?


Thanks a lot for your support....



Sincerely,
Sherif

[Fotiman]

Interesting. I think the call to dateinput must be somehow changing the input element in Webkit based browsers (doesn't validate in Chrome either). However, a fix seems to simply move the dateinput action so that it happens before the spry validators are attached:

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/demos/dateinput/css/skin1.css"> 
<link href="SpryValidationTextFields.css" rel="stylesheet" type="text/css" > 
<title>Test</title>
</head>
<div id="standardform" style="display:none">
  <input type="hidden" name="counter" value="marker" />
  <select name="payment_type">
    <option value="single" selected="selected">Single</option>
    <option value="1">Monthly</option>
    <option value="3">Quarterly</option>
    <option value="6">Semi Anual</option>
    <option value="12">Anual</option>
  </select>
  <span id="spryvalidatorNumber">
    <input name="number" value="0" />
    <span class="textfieldRequiredMsg">A value is required.</span>
    <span class="textfieldInvalidFormatMsg">Invalid format.</span>
  </span>
  <span id="spryvalidatorValue">
    <input name="value" value="1" />
  </span>
  <span id="spryvalidatorStartDate">
    <input type="date" class="date" name="startdate" value="" />
  </span>
  <input type="button" value="Remove Payment"
    onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br />
</div>
<form method="post" action="formprocess.php">
<div id="writeroot"></div>
<input type="button" id="btnmoreFields" value="Add Payment!" onclick="moreFields();" />
<input type="submit" value="Send" />
</form>
<script src="dateinput.js"></script> <!--http://cdn.jquerytools.org/1.2.5/full/jquery.tools.js?foo"-->
<script src="SpryValidationTextField.js" type="text/javascript"></script>
<script type="text/javascript">
var counter = 0;
var spryValidators = {
  textFields: []
};
/**
 * Given a DOM node, iterate through the children and return the name of the
 * first input found. If no inputs are found, return null.
 * @param n The Node whose children will be iterated through
 */
function getFirstInputName(n) {
  var children = n.childNodes,
    i,
    n;
  for (i = 0, n = children.length; i < n; i++) {
    // if a child node is an element (nodeType 1) and has tagName "input"
    // then we can stop searching and return the name
    if (children[i].nodeType == 1 && children[i].tagName.toLowerCase() == "input") {
      return children[i].name;
    }
  }
  // if no input elements were found, return null
  return null;
}
/**
 * @param el The element whose children we want to inspect
 * @param uniqueValue A unique value that will be appended to the id of child
 * elements.
 * is needed to create the Spry.Widget.ValidationTextField.
 */ 
function updateChildren(el, uniqueValue) {
  var i,     // index to an array
    n,     // length of the array 
    newFields = el.childNodes, // The children of the current el
    theName,  // the name attribute of child inputs
    uid;    // a unique id of the validator span wrapper around an input
  // iterate through each of the children of the element passed in
  for (i = 0, n = newFields.length; i < n; i++) {
    // ignore all children that are not HTMLElement nodes (nodeType 1)
    if (newFields[i].nodeType == 1) {
      // check to see if the current element is a span element. If so,
      // we'll need to updated that elements children as well.
      if (newFields[i].tagName.toLowerCase() == "span") {
        var firstInputName = getFirstInputName(newFields[i]);
        if (firstInputName) {
          // give it a unique id based on it's current id, plus the
          // unique value that was passed in, plus the index in the array
          uid = newFields[i].id + "_" + uniqueValue + "_" + i;
          newFields[i].id = uid;
          // Record the id value in an array. When we're all done looping,
          // we'll create a validator for each item in the array.
          spryValidators.textFields.push({uid: uid, name: firstInputName});
          // update the child nodes of the span
          updateChildren(newFields[i], uid);
        }
      }
      else {
        // this is not a span element, so must be a form control
        // Note, that is not a strict requirement... if the markup that
        // we copied contained other elements than form controls and
        // span element, then we should probably add additional checks
        // here. However, given the HTML above, this should work.
        // ...
        // give this element a unique name based on the current name
        // plus the global counter
        theName = newFields[i].name;
        if (theName) {
          newFields[i].setAttribute("name", theName + counter);
          newFields[i].name = theName + counter;
        }
      }
    }
  }
}
/**
 * Add a duplicate of 'standardform' field items to the form.
 */
function moreFields() {
  counter++;
  // Get the block containing the nodes to be cloned
  var newFields = document.getElementById('standardform').cloneNode(true);
  newFields.id = '';
  newFields.style.display = 'block';
  //var newField = newFields.childNodes;
  updateChildren(newFields, counter);
  var insertHere = document.getElementById('writeroot');
  insertHere.parentNode.insertBefore(newFields,insertHere);
  // Setup date field
  var d = $("input.date[name!=startdate]");
  d.each(function (i, el) {
    $(el).dateinput({
      format: 'yyyy-mm-dd',  // the format displayed for the user 
      selectors: true, // whether month/year dropdowns are shown 
      //min: -100, // min selectable day (100 days backwards) 
      //max: 1, // max selectable day (100 days onwards) 
      offset: [10, 20], // tweak the position of the calendar 
      speed: 'fast', // calendar reveal speed 
      firstDay: 0, // which day starts a week. 0 = sunday, 1 = monday etc.. 
      yearRange: [-6, 7], 
      trigger: true 
    });
  });
  // Attach spry Validation
  for (i = 0, n = spryValidators.textFields.length; i < n; i++) {
    if (spryValidators.textFields[i]) {
      // This is just for debugging
      alert('creating validator: ' + spryValidators.textFields[i].uid + ", " +spryValidators.textFields[i].name);
      switch (spryValidators.textFields[i].name) {
      case "number":
        new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "integer", {validateOn: ["change"]});
        break;
      case "value":
        new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "real", {validateOn: ["change"]});
        break;
      case "startdate":
        new Spry.Widget.ValidationTextField(spryValidators.textFields[i].uid, "date", {validateOn: ["change"], format:"yyyy-mm-dd"});
        break;
      }
      // remove this field from the array so we dont attempt to create
      // it again next time moreFields is called.
      spryValidators.textFields[i] = null;
    }
  }
}
</script>
</body>
</html>

[Sherif]

Hey Fotiman....

Thanks for the hint.... this now fixed the problem where the spry validator thought that the date input was empty, and it now works....

I discovered 2 new problems..... 1 major, and 1 minor....

1. Lets say i added a couple of new form elements, and i removed an empty one...

for some reason, when i submit the form nothing happens...

I believe that this is due to the form elements being removed, and the spry validation associated with these fields were not removed, and as a result it is waiting for an input in something that doesn't exist, and as a result the form is not submitted...

2. Also, another bug i found was that after the spry validator has been run at least once in IE, the newly created elements appear with a state as required, and not blank as the first group of elements.

Any ideas on how we can fix these problems?

We are almost there... Thanks to Fotiman's hard effort here with me..



Thanks for all of the support.

Sincerely,
Sherif