Question

在表单中，通过单击“添加”按钮动态创建文本框，以便在新行中创建文本框。现在我的问题是动态创建的文本框的验证，以便显示消息（如果有）通过点击提交按钮提交表单时，文本框保留为空。请帮帮我。

修改

  <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>

以上是在新行中添加新文本框的脚本。现在我要求在单击提交按钮时，应在客户端验证每个文本框是否为空。文本框中输入的值不应消失，空文本框的数量应相同。

Answer 1

在表单的提交事件中，您只需收集在表单中找到的所有输入文本框并将其传递给验证函数。

将此代码放入网页的<head>部分

//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);
         }
}

并在<form>标记中放置以下代码：

onsubmit="validateAllInputBoxes(event);"

动态创建的文本框上的javascript验证

1 个答案: