extremely hard form validation

ShMiL · 12-11-2004, 02:03 PM

look at this post here:
http://codingforums.com/showthread.php?t=42764

This code by Willy Duitt create dynamic fields according to a given input.

Code:

<script type="text/javascript">
 <!--//
  function addInputs(theInput){
   var table = document.createElement('table');
       table.id = 'hMembers';
   var hMembers = document.getElementById('hMembers');
    if(hMembers)theInput.parentNode.removeChild(hMembers);

    if(theInput.value.match(/^\d+$/)){
     var tbody = document.createElement('tbody');
      for(var i=0; i<theInput.value; i++){
          var row   = document.createElement('tr');
          var cell  = document.createElement('td');
          var num   = document.createTextNode((i+1)+')');
              cell.appendChild(num);
              row.appendChild(cell);
              tbody.appendChild(row);

          var cell  = document.createElement('td');
          var name  = document.createTextNode('name:');
          var input = document.createElement('input');
              input.size = 20;
              input.name = 'name'+(i+1);
              cell.appendChild(name);
              cell.appendChild(input);
              row.appendChild(cell);
              tbody.appendChild(row);

          var cell  = document.createElement('td');
          var age   = document.createTextNode('age:');
          var input = document.createElement('input');
              input.size = 1;
              input.name = 'age'+(i+1);
              cell.appendChild(age);
              cell.appendChild(input);
              row.appendChild(cell);
              tbody.appendChild(row);

          var cell  = document.createElement('td');
          var sex   = document.createTextNode('sex:');
          var input = document.createElement('input');
              input.size = 2;
              input.name = 'sex'+(i+1);
              cell.appendChild(sex);
              cell.appendChild(input);
              row.appendChild(cell);
              tbody.appendChild(row);
      }       table.appendChild(tbody);
              theInput.parentNode.insertBefore(table,theInput.nextSibling);
    }         

    else{ alert('Please enter only numbers in this field!');
          theInput.value = '';
          theInput.focus();
    }             
  }
 //-->
</script>
</head>

<body>
<form method="get" action="">
How many in the household: <input type="text" onchange="addInputs(this)">
</form>

What I want to do is to check those fields.

Below is the code also written by Willy Duitt checks fields, but I can't make it check the fields which was created dynamically (in the code above).

Code:

<html>
	<head>
		<script type='text/javascript'>
			window.onload=cycle;
			function cycle() {
				for (var i = 1; i < document.joinForm.suiteCounter.value; i++) {
					var temp = document.joinForm['weekNumber' + i].value;
					alert(temp);
				}
			}
		</script>
	</head>
	<body>
		<form name='joinForm'>
			<input type='text' name='suiteCounter' value='4'>
			<input type='text' name='weekNumber1' value='a'>
			<input type='text' name='weekNumber2' value='b'>
			<input type='text' name='weekNumber3' value='c'>
		</form>
	</body>
</html>

Can anyone help with this?

Thanks

Willy Duitt · 12-11-2004, 02:26 PM

I do not understand what you are trying to check....
That the fields have been filled out and not empty??

Plus, the weekNumber[n] fields have nothing to do with the dynamically created inputs (name, age, sex) and without knowing how the two correlate to each other there is no way to know what is going on....

But the short answer to checking that all fields are filled out is to loop thru the form elements and checking the value.length...

Code:

  function validate(form){
    for(var i=0; i<form.elements.length; i++){
      if(form.elements[i].value.length == 0){
         alert('All fields must be filled out');
         form.elements[i].focus();
         return false;
      }
    }
  }

And:
<form onsubmit="validate(this)".....

.....Willy

ShMiL · 12-11-2004, 03:51 PM

I want to check if the age is numeric

Willy Duitt · 12-11-2004, 04:16 PM

Quote:

Originally Posted by ShMiL

I want to check if the age is numeric

Code:

  if(form.elements[i].name.match(/^age/i) && isNaN(form.elements[i].value)){
     alert('Age must be a number');
     form.elements[i].value = '';
     form.elements[i].focus();
     return false;
  }

.....Willy