javascript validation on text boxes created dynamically

Question

In a form a text box is created dynamically by clicking on add button such that the text box is created in a new row.Now my problem is the validation of text boxes which were created dynamically such that it shows a message if any of text boxes are left empty when form is submitted by clicking submit button.Please help me out.

EDIT

  <html>
   <head>

  <SCRIPT language="javascript">
   function addRow(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    cell1.appendChild(element1);
 }

   </SCRIPT>
   </head>


   <body>


    <form onSubmit="return validateFormOnSubmit(this)">
   <INPUT type="button" value="Add More Symptom " onClick="addRow('dataTable')" />


    <TABLE id="dataTable" >
      <TR>

        <TD > 
          <INPUT type="text" name="symp[]" /> 
         </TD>
       </TR>
    </TABLE>
   <input type="submit" value="Submit" name="ADD_SUBMIT">
   </form>


  </body>    
  </html>

Above is the script to add new textboxes in a new row. Now i require that when submit button is clicked, each text boxes should be validated whether it is empty or not on client side. The entered values in the text box should not disappear and number of empty text boxes should be same.

Answer 1

on the submit event of the form you simply need to collect all input text boxes that you find in the form and pass them into a validation function.

Put this code in the <head> section of your page

//This function here is only a cross-browser events stopper
stopEvent = function(ffevent)
{
   var current_window = window;

   if(current_window.event) //window.event is IE, ffevent is FF
   {
      //IE
      current_window.event.cancelBubble = true; //this stops event propagation
      current_window.event.returnValue = false; //this prevents default (usually is what we want)
   }
   else
   {
      //Firefox
      ffevent.stopPropagation();
      ffevent.preventDefault();
   };
}

function validateAllInputBoxes(ffevent)
{
   var inputs = document.getElementsByTagName('input');
   for(var i = 0; i < inputs.length; ++i)
      if(inputs[i].type === 'text')
         //@Satish, maybe below you wrote by mistake if(inputs[i].value = '') thus all input elements values get cleared out.
         if(inputs[i].value === '') 
         {
            alert("form could not be sent one input text field is empty");
            stopEvent(ffevent);
         }
}

and in the the <form> tag place the following code:

onsubmit="validateAllInputBoxes(event);"

javascript validation on text boxes created dynamically

Question

1 answers

solution1
3 ACCPTED 2010-06-21 18:59:15

javascript validation on text boxes created dynamically

Question

1 answers

solution1 3 ACCPTED 2010-06-21 18:59:15

solution1
3 ACCPTED 2010-06-21 18:59:15