Question

我正在使用jquery.validate.js来验证表单中的多个字段以及smizek's signature_pad。我想验证是否在html画布（签名板）上绘制了某些内容，同时验证了所有其他输入字段。

不幸的是，向jquery验证submithandler添加一个函数来检查画布是否有签名是不够的，因为只有在满足所有其他必需字段时才会触发。我可以将方法添加到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验证？

Answer 1

在jquery验证提交处理程序中，如果未填充签名，则为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;

Answer 2

我使用自定义验证创建了一个隐藏字段来处理此问题。

JavaScript将隐藏字段的值设置为base64编码的签名。

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

Signature Pad 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");

Answer 3

使用它：！signaturePad.IsEmpty（）;

如果使用jquery验证和signature_pad输入签名，如何添加检查？

3 个答案: