How can I add a check if a signature is entered using jquery validation and signature_pad?

Question

I'm using jquery.validate.js to validate multiple fields in my form along with smizek's signature_pad. I want to validate if something is drawn on the html canvas (signature pad) at the same time all the other input fields are validated.

Unfortunately, adding a function to the jquery validation submithandler to check if the canvas has a signature is not sufficient because this only triggers once all other required fields are satisfied. I can add methods to jquery validator, but I'm pretty sure those only work on validating the content of inputs—not a canvas.

I can check if the signature exists with "signaturePad.isEmpty()". Ideally, there would be a way to add a function like this that happens concurrently with any validation:

    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();
      }
    }

...and only continue on to actually submit the form if both the jquery validation and the signature are satisfied.

Is there a way to have a function trigger at the same time other validation happens—not after? How can I stop the form from submitting unless both my conditions are met—not just the jquery validation?

CLL · Accepted Answer · 2014-09-20T22:58:53.040

In the jquery validation submithandler, return false if the signature is not filled:

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

This prevents the form from being submit if there is no signature.

To show an error message for a missing signature like the rest of the jquery validation error messages, bind a function to the submit input's click:

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

Declare your variable somewhere: var errorExists = false;

score 2 · Answer 2 · answered Apr 17 '16 at 22:56

I made a hidden field with a custom validation to handle this.

JavaScript to set the hidden field's value to a base64 encoded signature.

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

Form HTML

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

Custom validation code added to jquery-validate-additional-methods.js (download link is on that page)

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

How can I add a check if a signature is entered using jquery validation and signature_pad?

2 Answers2

Linked