abstractindia

Validating dynamically added rows to a table

Nov 19th, 2015
336
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 10.80 KB | None | 0 0
  1. <!--Form-->
  2. <form id="multiphase" role="form" class="form-horizontal" action="" method="post">
  3.                 <input name="globalstudentid" id="globalstudentid" type="hidden" value="<?php $_GET['StudentID']; ?>">
  4.                
  5.                 <table class="table table-bordered table-hover table-responsive table-striped" id="resultdetails">
  6.     <tr>
  7.         <th scope="col" class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center"><label for="chk" class="control-label">Select</label></th>
  8.         <th scope="col" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-center"><label for="rs_month" class="control-label">Result Month</label></th>
  9.         <th scope="col" class="col-lg-1 col-md-1 col-sm-1 col-xs-1 text-center"><label for="rs_year" class="control-label">Result Year</label></th>
  10.         <th scope="col" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-center"><label for="rs_ssy" class="control-label">Standard/Semester/Year</label></th>
  11.         <th scope="col" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-center"><label for="rs_result" class="control-label">Result (%) or Grade</label></th>
  12.         <th scope="col" class="col-lg-2 col-md-2 col-sm-3 col-xs-2 text-center"><label for="rs_institute" class="control-label">Name of School/College</label></th>
  13.         <th scope="col" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 text-center"><label for="rs_marksheet" class="control-label">Upload Marksheet</label></th>
  14.     </tr>
  15.     <tr>
  16.         <td><p class="help-block text-center">Select</p></td>
  17.         <td><p class="help-block">Month of Result Issued.</p></td>
  18.         <td><p class="help-block">Year of Examination.</p></td>
  19.         <td><p class="help-block">Std. or Semester or Year.</p></td>
  20.         <td><p class="help-block">Result in (%) of Grade obtained.</p></td>
  21.         <td><p class="help-block">Name of School/College from which Examination was given.</p></td>
  22.         <td><p class="help-block">Upload a scanned copy of the Mark sheet.</p></td>
  23.     </tr>
  24.     <tr>
  25.         <td align="center">
  26.         <div class="form-group">
  27.             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  28.                 <input name="chk[]" class="text-center" type="checkbox" value="">
  29.             </div>
  30.         </div>
  31.         </td>
  32.         <td align="center"><!--Local Select field-->
  33. <div class="form-group">
  34.    
  35.         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  36.             <select name="rs_month[]" id="rs_month" class="" data-allow-clear="true" tabindex="1" placeholder="Select Month" style="width:100%">
  37.                 <option value="">&nbsp;</option>
  38.                 <option value="January">January</option>
  39.                 <option value="February">February</option>
  40.                 <option value="March">March</option>
  41.                 <option value="April">April</option>
  42.                 <option value="May">May</option>
  43.                 <option value="June">June</option>
  44.                 <option value="July">July</option>
  45.                 <option value="August">August</option>
  46.                 <option value="September">September</option>
  47.                 <option value="October">October</option>
  48.                 <option value="November">November</option>
  49.                 <option value="December">December</option>
  50.             </select>
  51.         </div>
  52.    
  53. </div></td>
  54.         <td align="center">
  55.             <!--Text field in table-->
  56. <div class="form-group">
  57.     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  58.         <input type="text" name="rs_year[]" id="rs_year" class="form-control" placeholder="Result Year" value="" tabindex="2">
  59.     </div>
  60. </div>
  61.         </td>
  62.         <td align="center">
  63.             <!--Text field in table-->
  64. <div class="form-group">
  65.     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  66.         <input type="text" name="rs_ssy[]" id="rs_ssy" class="form-control" placeholder="Standard / Semester / Year" value="" tabindex="3">
  67.     </div>
  68. </div>
  69.         </td>
  70.         <td align="center">
  71.             <!--Text field in table-->
  72. <div class="form-group">
  73.     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  74.         <input type="text" name="rs_result[]" id="rs_result" class="form-control" placeholder="Result (%) or Grade" value="" tabindex="4">
  75.     </div>
  76. </div>
  77.         </td>
  78.         <td align="center">
  79.             <!--Text field in table-->
  80. <div class="form-group">
  81.     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  82.         <input type="text" name="rs_institute[]" id="rs_institute" class="form-control" placeholder="School or College" value="" tabindex="5">
  83.     </div>
  84. </div>
  85.         </td>
  86.         <td>
  87.         <div class="form-group">
  88.             <div class="fileinput fileinput-new input-group col-lg-10 col-md-10 col-sm-10 col-xs-10" data-provides="fileinput">
  89.   <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
  90.   <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new glyphicon glyphicon-folder-open"></span><span class="fileinput-exists glyphicon glyphicon-folder-open"></span><input type="file" name="rs_marksheet[]" tabindex="6"></span>
  91.   <!--<a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>-->
  92. </div>
  93. </div>
  94.         </td>
  95.     </tr>
  96. </table>
  97. <a class="btn btn-primary addmore">Add a Row &nbsp;<i class="glyphicon glyphicon-plus"></i></a>
  98. <a class="btn btn-primary delete">Remove a Row &nbsp;<i class="glyphicon glyphicon-minus"></i></a>
  99.  
  100.                 <div id="">
  101.                 <input name="submit" type="submit" value="Next" class="btn btn-primary pull-right">
  102.                 </div>                
  103.                 </form>
  104.  
  105.  
  106.  
  107. <!--Java Scripts-->
  108. <script>
  109. //Dynamically add remove rows to table
  110. $(".delete").on('click', function() {
  111.     $('.case:checkbox:checked').parents("tr").remove();
  112.  
  113. });
  114. var i=2;
  115. $(".addmore").on('click',function(){
  116.     var data="<tr><td><input type='checkbox' class='case'/></td>";
  117.     data +="<td align='center'><div class='form-group'><div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'><select name='rs_month[]' id='rs_month"+i+"' class='' data-allow-clear='true' tabindex='2' placeholder='Select Month' style='width:100%'><option value=''>&nbsp;</option><option value='January'>January</option><option value='February'>February</option><option value='March'>March</option><option value='April'>April</option><option value='May'>May</option><option value='June'>June</option><option value='July'>July</option><option value='August'>August</option><option value='September'>September</option><option value='October'>October</option><option value='November'>November</option><option value='December'>December</option></select></div></div></td><td align='center'><div class='form-group'><div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'><input type='text' name='rs_year[]' id='rs_year"+i+"' class='form-control' placeholder='Result Year' value='' tabindex='2'></div></div></td><td align='center'><div class='form-group'><div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'><input type='text' name='rs_ssy[]' id='rs_ssy"+i+"' class='form-control' placeholder='Standard / Semester / Year' value='' tabindex='2'></div></div></td><td align='center'><div class='form-group'><div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'><input type='text' name='rs_result[]' id='rs_result"+i+"' class='form-control' placeholder='Result (%) or Grade' value='' tabindex='2'></div></div></td><td align='center'><div class='form-group'><div class='col-lg-12 col-md-12 col-sm-12 col-xs-12'><input type='text' name='rs_institute[]' id='rs_institute"+i+"' class='form-control' placeholder='School or College' value='' tabindex='2'></div></div></td><td><div class='form-group'><div class='fileinput fileinput-new input-group col-lg-10 col-md-10 col-sm-10 col-xs-10' data-provides='fileinput'><div class='form-control' data-trigger='fileinput'><i class='glyphicon glyphicon-file fileinput-exists'></i> <span class='fileinput-filename'></span></div><span class='input-group-addon btn btn-default btn-file'><span class='fileinput-new glyphicon glyphicon-folder-open'></span><span class='fileinput-exists glyphicon glyphicon-folder-open'></span><input type='file' name='rs_marksheet[]' tabindex='2'></span></div></div></td>";
  118.     $('table').append(data);
  119.     i++;
  120. });
  121.  
  122.    
  123.    
  124. //Validation of Form Fields
  125.  $("#multiphase").formValidation({
  126.           excluded: ':disabled',
  127.           message: 'This value is not valid',
  128.           container: 'popover',
  129.           //trigger: 'blur',
  130.           feedbackIcons: {
  131.               valid: 'glyphicon glyphicon-ok',
  132.               invalid: 'glyphicon glyphicon-remove',
  133.               validating: 'glyphicon glyphicon-refresh'
  134.           },
  135.           //Validation of all fields starts below this line
  136.           fields: {
  137.             //Validation of Result Details Starts
  138.             //Result Month
  139.             rs_month: {
  140.                 validators: {
  141.                     notEmpty: {
  142.                         message: 'The Result Month is required and cannot be empty'
  143.                     },
  144.                 }
  145.             },
  146.             rs_year: {
  147.                 validators: {
  148.                     notEmpty: {
  149.                         message: 'The Year is required and cannot be empty'
  150.                     }
  151.                 }
  152.             },
  153.             rs_ssy: {
  154.                 trigger:'blur',
  155.                 validators: {
  156.                     notEmpty: {
  157.                         message: 'The Standard/Semester/Year is required and cannot be empty'
  158.                     },
  159.                 }
  160.             },
  161.             rs_result: {
  162.                 trigger:'blur',
  163.                 validators: {
  164.                     notEmpty: {
  165.                         message: 'The Result Percentage or Grade is required and cannot be empty'
  166.                     },
  167.                 }
  168.             },
  169.             rs_institute: {
  170.                 trigger:'blur',
  171.                 validators: {
  172.                     notEmpty: {
  173.                         message: 'The Institure Name is required and cannot be empty'
  174.                     },
  175.                     stringLength: {
  176.                         min: 8,
  177.                         max: 40,
  178.                         message: 'The Institure Name must be more than 8 and less than 40 characters long'
  179.                     },
  180.                     regexp: {
  181.                         regexp: /^[A-Z\s.]+$/i,
  182.                         message: 'The College Name can only consist of alphabetical characters'
  183.                     }
  184.                 }
  185.             },
  186.             rs_marksheet: {
  187.                 validators: {
  188.                     notEmpty: {
  189.                         message: 'The Marksheet is required and cannot be empty'
  190.                     },
  191.                     file: {
  192.                         extension: 'jpg,jpeg,png',
  193.                         type: 'image/jpeg,image/png',
  194.                         maxSize: 1024000,   //  1024 kb
  195.                         message: 'Only jpg and png extensions are allowed. File size must be less than 1 mb'
  196.                     }
  197.                 }
  198.             }, //Validation of Result Details finish.          
  199.       }
  200.       //All fields ends before this line      
  201.      
  202.         });
  203. </script>
Advertisement
Add Comment
Please, Sign In to add comment