Y星人の工作語錄

別理我, 我只是一個愛發勞騷的Y星人

10月
30

jquery-plugin-validation, myExample.

Posted by YuanYuan

My colleague do a project, need a form dynamic append  and validate the form element filed.

The form elements have text, select, datepicker, an identification card number(Taiwan), add/del row button.

How to do this with jQuery ?

Ready, we can start now!

step1. structure html - cool set template way

good template set

  1. <textarea style="display:none" id="template">
  2.         <tr class="prop">
  3.             <td valign="top" class="value"><input type="text" id="name_{0}" name="name_{0}" value="" class="nameRequired" /></td>
  4.             <td valign="top" class="value">
  5.                 <select name="groupId_{0}" class="selectRequired">
  6.                     <option value="">請選擇</option>
  7.                     <option value="0">配偶</option>
  8.                     <option value="1">直系尊親屬</option>
  9.                     <option value="2">子女</option>
  10.                     <option value="3">同胞兄弟姐妹</option>
  11.                     <option value="4">其他親屬或家屬</option>
  12.                 </select>
  13.             </td>
  14.             <td valign="top" class="value"><input type="text" id="title_{0}" name="title_{0}" value="" class="required" /></td>
  15.             <td valign="top" class="value"><input type="text" id="birthday_{0}" name="birthday_{0}" value="" class="required date-pick" />
  16.             </td>
  17.             <td valign="top" class="value"><input type="text" id="personId_{0}" name="personId_{0}" value="" class="idRequired" /></td>
  18.             <td valign="top" class="value"><input type="text" id="address_{0}" name="address_{0}" value="" class="required" /></td>
  19.             <td valign="top" class="value"><input type="text" id="condition_{0}" name="condition_{0}" value="1" class="required" /></td>
  20.             <td valign="top"><input type="button" value="delete" id="add_button" onclick="deleteRow(this);" /></td>
  21.             <td><input type="hidden" id="id" name="id" value="41" /></td>
  22.         </tr>
  23. </textarea>

table :

  1. <form action="" method="post" id="myForm">
  2. <div class="list">
  3. <table>
  4. <thead>
  5. <tr><th class="sortable" >Emp_id</th></tr>
  6. </thead>
  7. <tbody>
  8. <tr>
  9. <td>12345</td>
  10. <td><input type="hidden" id="masterId" name="masterId" value="1" /></td>
  11. </tr>
  12. </tbody>
  13. </table>
  14. </div>
  15. <br>
  16.  
  17. <div class="list">
  18. <table id="table1">
  19.     <thead>
  20.         <tr>
  21.             <th class="sortable">姓名</th>
  22.             <th class="sortable">groupId</th>
  23.             <th class="sortable">title</th>
  24.             <th class="sortable">birthday</th>
  25.             <th class="sortable">personId</th>
  26.             <th class="sortable">address</th>
  27.             <th class="sortable">condition</th>
  28.         </tr>
  29.     </thead>
  30.     <tbody>
  31.                  <!-- add dynamic row over here -->
  32.     </tbody>
  33. </table>
  34.  
  35. </div>
  36.  
  37. <div>
  38. <span class="button"><input type="button" id="add" value="add" /></span>
  39. <span class="button"><input class="save" type="submit" value="Save" /></span>
  40. </div>
  41. </form>

step2. add some css

  1. input.error {border: 1px solid red;display: block;}

step3. add some javascript.

  1. <script type="text/javascript">
  2. <!--
  3. $(document).ready(function(){
  4. $("#myForm").validate({
  5.          errorPlacement: function(error, element) {
  6.             error.appendTo( element.parent() );
  7.         },
  8.          submitHandler: function() {
  9.             alert("Submitted, thanks!");
  10.         }
  11.     });
  12.  
  13. $.validator.messages.required = "請輸入內容.";
  14. $.validator.addMethod("nameRequired", function(value, element) {
  15.     return !this.optional(element);
  16. }, "請輸入姓名.");
  17.  
  18. $.validator.addMethod("selectRequired", function(value, element) {
  19.     return !this.optional(element);
  20. }, "請選擇身份.");
  21.  
  22. $.validator.addMethod("idRequired", function(value, element) {
  23. return $(element).checkId();
  24. }, "請輸入正確的ID.");
  25.  
  26.     //super template
  27.     var template = jQuery.format($("#template").val());
  28.  
  29.     function addRow() {
  30.         $(template(i++)).appendTo("#myForm #table1 tbody");
  31.         //showOn + onClose fix with validation plugin.
  32.         $(".date-pick").datepicker({  dateFormat:"yy-mm-dd", showOn: 'button', buttonText:'選', onClose: function(){
  33.         this.focus();
  34.         } });
  35.  
  36.         //format id , date
  37.         $(".idRequired").mask("a999999999");
  38.         $(".date-pick").mask("9999-99-99");
  39.     }
  40.    
  41.     //made dynamic row easy
  42.     var i = 1;
  43.     $("#add").click(addRow);
  44. });
  45.  
  46. function deleteRow(d){
  47. $(d).parents("tr:first").remove();
  48. }
  49. </script>

OK, done.

but we find some problem with Validation+datepicker, so I made some change, I set show button, and onClose focus. If you don’t this, the date-pick show not correct, you always need to click twince, I really don’t why.

  1. //showOn + onClose fix with validation plugin.
  2. $(".date-pick").datepicker({ changeFirstDay: false, showOn: 'button', buttonText:'選', onClose: function(){
  3.     this.focus();
  4. } });

My colleague find the organizer idcheck function have some error (so why my id sometime is wrong). she fix this error.
part.1 - very Important , most of people write worng sequence, the correct is w=32, x=30, y=31 not w=30, x=31, y=32, I don’t why ?

  1. case 'W': 
  2.                 str[0] = "3"; 
  3.                 str[1] = "2"; 
  4.                 break; 
  5.             case 'X': 
  6.                 str[0] = "3"; 
  7.                 str[1] = "0"; 
  8.                 break; 
  9.             case 'Y': 
  10.                 str[0] = "3"; 
  11.                 str[1] = "1"; 
  12.                 break;

part.2

  1. if((moduleCnt - (sum % moduleCnt)) == parseInt(inputId.substring(moduleCnt-1,moduleCnt))){ 
  2.             return true; 
  3.         }else if(sum % moduleCnt==parseInt(inputId.substring(moduleCnt-1,moduleCnt))){
  4.             return true;
  5.         }else{ 
  6.             return false; 
  7.         }

and that’s all.

If you take these script code, let’s me know, thanks and good luck.

« toolTips
out of control, type=”file” borswer image button »

Add A Comment