如何使用jQuery驗證和signature_pad輸入簽名來添加檢查？

我使用jquery.validate.js來驗證我的表單中的多個字段以及smizek's signature_pad。我想驗證在HTML畫布（簽名板）上是否繪製了所有其他輸入字段的驗證結果。如何使用jQuery驗證和signature_pad輸入簽名來添加檢查？

不幸的是，向jquery validation submithandler添加一個函數來檢查canvas是否有簽名是不夠的，因爲只有滿足所有其他必需的字段纔會觸發。我可以將方法添加到jquery驗證器中，但我非常確定這些方法僅用於驗證輸入的內容，而不是畫布。

我可以用「signaturePad.isEmpty（）」檢查簽名是否存在。理想情況下，將增加一個功能，這樣可以與任何驗證併發發生的方式：

var errorExists = false; 
    if(signaturePad.isEmpty()){ 
     if (errorExists == false){ 
     $("#signature-pad").append("<div id="sig-error">A signature is required</div>"); 
     errorExists = true; 
     } 
    }else if(!signaturePad.isEmpty()) { 
     if (errorExists == true){ 
     $('#sig-error').remove(); 
     } 
    }

...只有繼續以實際提交表單，如果jQuery驗證和簽名都是滿意的。

有沒有辦法讓一個函數觸發器在同一時間發生其他驗證 - 不是之後？除非滿足我的條件，否則我怎樣才能阻止表單提交 - 而不僅僅是jQuery驗證？

來源

2014-09-20 CLL

在jQuery驗證submithandler，return false如果簽名不填充：

if(signaturePad.isEmpty()){ 
      console.log('it is empty'); 
      return false;    
     }

這可以防止表格被提交，如果沒有簽名。

要顯示錯誤消息像jQuery的驗證錯誤消息的其餘部分缺少簽名，功能綁定到提交輸入的點擊：

$('#submit_form').click(function(){ 
     if(signaturePad.isEmpty()){ 
     if (errorExists === false){ 
      $("#signature-pad").append("<div class='error' id='sig-error'>A signature is required</div>"); 
      errorExists = true; 
     } 
     }else if(!signaturePad.isEmpty()) { 
     if (errorExists === true){ 
      $('#sig-error').remove(); 
      errorExists = false; 
     } 
     } 
    });

聲明的變量的地方： var errorExists = false;

來源

2014-09-20 22:42:32 CLL

我做了一個隱藏的領域與自定義驗證來處理這個。

用於將隱藏字段的值設置爲base64編碼簽名的JavaScript。

<script type="text/javascript"> 
      window.onload = function() { 
       $("#application").submit(function(event) { 
       var canvas = document.getElementById('canvas'); 
       var sigData = canvas.toDataURL("image/png"); 
       $('#signature').attr('value', sigData); 
       }); 
      } 
      </script>

簽名板HTML

<div class="m-signature-pad" id="signature-pad"> 
       <div class="m-signature-pad--body"> 
       <canvas id="canvas" width="611" height="150"></canvas> 
       </div> 
       <div class="m-signature-pad--footer"> 
       <button class="button clear" data-action="clear" type="button">Clear</button> 
       <div class="description"> 
        Sign above 
       </div> 
       </div> 
      </div>

HTML表單

<input data-rule-signature="true" id="signature" name="signature" type="hidden">

定製驗證代碼添加到jquery-validate-additional-methods.js（下載鏈接是網頁）

jQuery.validator.addMethod("signature", function(value, element, options) { 
    if(signaturePad.isEmpty()){ 
      return false;    
     } 
    return true; 
}, "Your signature is required");

來源

2016-04-17 22:56:40

如何使用jQuery驗證和signature_pad輸入簽名來添加檢查？

回答

相關問題