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

Question

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

不幸的是，向 jquery 验证提交处理程序添加一个函数来检查 Canvas 是否具有签名是不够的，因为只有在满足所有其他必填字段时才会触发。我可以向 jquery 验证器添加方法，但我很确定这些方法只能用于验证输入的内容，而不是 Canvas 。

我可以使用“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 验证提交处理程序中，如果未填写签名，返回 false:

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

如果没有签名，这将阻止提交表单。

要像其他 jquery 验证错误消息一样显示缺少签名的错误消息，请将函数绑定(bind)到提交输入的单击:

    $('#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;