如何使用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输入签名来添加检查？

回答

相关问题