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?