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

Question

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

Sat*_*ish 5 javascript forms validation input

在表单中，通过单击添加按钮动态创建文本框，以便在新行中创建文本框。现在，我的问题是验证动态创建的文本框，以便显示任何文本框的消息单击提交按钮提交表单时，将其保留为空。请帮帮我。

编辑

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Mar*_*aio 4

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

将此代码放入<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);
         }
}

Run Code Online (Sandbox Code Playgroud)

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

onsubmit="validateAllInputBoxes(event);"

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，2 月前
查看次数：	10195 次
最近记录：	12 年，7 月前