简体   繁体   中英

Validate text boxes created dynamically having unique ids and names using jQuery validate

I am using jQuery for creating multiple text fields on button click. It is working fine. Now I need to validate all test boxes. This is my HTML code:

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

And this is my JavaScript part for adding text boxes on button click:

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

I need to validate all text boxes. Thanks in advance.

.validate() Will help you to validate your form elements with use of ID or class of a form.

You please follow the following URL to get validation for your script:

http://jqueryvalidation.org/validate/

In your validation script validate each input type text field using same class name like.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM