0

I'm implementing an online waiver where a client has to sign into canvas before they can complete the form. I use Signature_Pad from szimek and jquery-validate and would like to have the canvas (which is part of the form) be included. I tried a custom formatter, like so:

let wrapper = document.getElementById("signature_pad");
var signaturePad = new SignaturePad(wrapper.querySelector("canvas"), {
    backgroundColor: 'white'
});
jQuery.validator.addMethod("checkSignature", function(value, element) {
    return signaturePad.isEmpty() == false;
}, "Signature must be provided");
$("form[name='form-waiver']").validate({
    rules: {
        WaiverName: {
            required: true,
            minlength: 2
        },
        signature_pad: {
            checkSignature: true
        }
    },
    messages: {
        WaiverName: "The name has to be filled out"
    },
    successClass: "valid",
    errorClass: "invalid",
    submitHandler: function (form) {
        ...
    }
};

However, the form validates even if the canvas is empty. Is there a method to include the canvas in the form validation?

erict
  • 1,394
  • 2
  • 14
  • 28
  • I think this has been answered here... https://stackoverflow.com/questions/4644524/how-to-check-if-something-is-drawn-on-canvas – Zach Painter Apr 06 '22 at 00:08
  • No, that part has been solved, i.e. signature_pad.isEmpty(); The question is how to include that call in the jquery-validator – erict Apr 06 '22 at 00:36
  • 1
    Any console errors? What troubleshooting steps have been taken? Based on the code formatting colors above, you have a syntax error. Missing the closing double-quotation mark on this selector: `$("form[name='form-waiver']).validate`, which would have trggered a console error. – Sparky Apr 06 '22 at 17:09
  • The missing quote was only when I copied it into this SO question. My question has been somewhat resolved by https://stackoverflow.com/questions/25953537/how-can-i-add-a-check-if-a-signature-is-entered-using-jquery-validation-and-sign – erict Apr 07 '22 at 12:54
  • 1
    Any console errors? What troubleshooting steps have been taken? – Sparky Apr 08 '22 at 17:19

0 Answers0