javascript validation on text boxes created dynami

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.

标签： javascript forms input validation

1条回答

做自己的国王

2楼-- · 2020-04-07 12:36

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);"

0人赞添加讨论(0) 举报

javascript validation on text boxes created dynami

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间