Question

我正在使用jQuery在按钮点击时创建多个文本字段。它工作正常。现在我需要验证所有测试框。这是我的HTML代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Patient Portal</title>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<![endif]-->
<!--[if !IE]> -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- <![endif]-->
<script type="text/javascript" language="javascript" src="js/scripts.js"></script>
<script type="text/javascript" language="javascript" src="js/basicnifo.js"></script>
      <script src="js/jquery-1.3.2.min.js"></script> 
       <script src="js/jquery.validate.js"></script> 
       <script type="text/javascript" src="js/datepicker2.js"></script>

</head>
<body>
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="m5">
  <tr>
    <td valign="top" class="m4">
    <form action="#" method="post" name="reg" id="reg">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><div class="m12">
            <table width="100%" border="0" cellspacing="1" cellpadding="2" id="items">
              <thead>
              <tr>
              <td colspan="7" align="center" bgcolor="#62a3e0" style="width:15%;"><strong>Problem List</strong></td>
                </tr>
              <tr>
                <td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Problem</strong></td>
                <td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Status</strong></td>
                <td align="center" bgcolor="#EAEAEA" style="width:1%;"><strong>Active Date</strong></td>
                </tr>
               </thead>
                <tbody>
              <tr>
                <td bgcolor="#F5F5F5" style="width:15%;"><input type="text"   tabindex="1" name="Problem1" id="Problem1"  class="m16 autocomplete" value="" /></td>
                   <td bgcolor="#F5F5F5" style="width:15%;"><select name="Status1" id="Status1" class="drop2" tabindex="1" >
                  <option value="1" selected="selected">active</option>
                  <option value="2">in-active</option>
                </select></td>              
                  <td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Date1" id="Date1"  class="m16  datepick" tabindex="1" value=""/></td>
                   <input type="hidden" name="patientProblemsid1" id="patientProblemsid1" class="m16" value="0"/>
                        <input type="hidden" name="sSaved"  id="sSaved" value="null" class="m10" />
                </tr>
            </tbody>
           <tfoot>
              <tr>
                <td colspan="5" align="right">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                  
               <input type="button" name="update" id="update" value="ADD ROW" tabindex="10" class="bt-press add_more" onmouseover="changeBgImage('images/button-bg2.png', 'update')" onmouseout="changeBgImage('images/button-bg.png', 'update')" /></td> 
                </tr>
              <tr>
                <td colspan="5" align="right">  
                <input type="submit" name="button" id="SAVE" value="SAVE" class="bt-press" tabindex="50" onmouseover="changeBgImage('images/button-bg2.png', 'SAVE')" onmouseout="changeBgImage('images/button-bg.png', 'SAVE')" /> 
               <input type="submit" name="button" id="NEXT" value="NEXT" class="bt-press" tabindex="51"  onmouseover="changeBgImage('images/button-bg2.png', 'NEXT')" onmouseout="changeBgImage('images/button-bg.png', 'NEXT')" /></td>
                </tr>
                </tfoot>
                  <input type="hidden" name="item_count" id="item_count" value="1" />
                <input type="hidden" name="page" value="patienthistory" class="m10" />
                  <input type="hidden" name="Cliinicid" value="" class="m10" />
            </table>
        </div></td>
        </tr>
      </table>
    </form>
    <div class="m7">&nbsp;<br />
    </div>
    </td>
  </tr>
</table>
</body>
</html>

这是我在按钮点击时添加文本框的JavaScript部分：

 <script>
 $(".add_more").click(function(event){

        event.preventDefault();
        var count = $("#item_count").val();            
        count = parseInt(count);
       //alert(count);
        var new_count = count +1;
     // alert(new_count);
      //  $(".delete_link").remove();


    var html = '<tr>\
             <td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Problem'+new_count+'"  id="Problem'+new_count+'" tabindex="11" class="m16 autocomplete" value="" /></td> \
             <td width="15%" bgcolor="#F5F5F5" style="width:15%;"><select name="Status'+new_count+'"id="Status'+new_count+'" tabindex="11" class="drop2 ">\
             <option value="1" selected="selected"> active</option><option value="2">inactive</option>\
           </select></td> \
            <td bgcolor="#F5F5F5" style="width:15%;"><input type="text" name="Date'+new_count+'" id="Date'+new_count+'" tabindex="11" class="m16 datepicker" value="" /></td> \
            </tr>';
                            var $html = $(html);
                         var $ht = $html.find('input.datepicker')[0];
                               $($ht).datepicker({dateFormat:"mm-dd-yy"});
                                        $('#items > tbody:last').append($html);
                                        $("#item_count").val(new_count);
                                    });

 </script>

我需要验证所有文本框。提前谢谢。

Answer 1

.validate()将帮助您使用表单的ID或类来验证表单元素。

请按照以下网址对您的脚本进行验证：

http://jqueryvalidation.org/validate/

Answer 2

在验证脚本中使用相同的类名验证每个输入类型文本字段，如。

   $("#SAVE").click(function(){ $(".m16").each(function(){
       var values=this.value;
     if(values.length<1)
     {
       alert("Text box empty");
      }
    });
  });

使用jQuery validate验证动态创建的具有唯一ID和名称的文本框

2 个答案: