Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2002
    Posts
    436
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy extremely hard form validation

    look at this post here:
    dynamic fields according to input number

    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

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    436
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I want to check if the age is numeric

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Willy Duitt; 12-11-2004 at 05:19 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •