动态创建的文本框上的javascript验证 [英] javascript validation on text boxes created dynamically

查看:83
本文介绍了动态创建的文本框上的javascript验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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.

编辑

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

推荐答案

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

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.

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

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

以及< ; form> 标记放置以下代码:

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

onsubmit="validateAllInputBoxes(event);"

这篇关于动态创建的文本框上的javascript验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆