Detect if there is canvas contents

[TP-Harry-Phillips]

Here is my Sandbox page:
https://codesandbox.io/s/youthful-torvalds-eshp7d?file=/js/signPadApp.js

The code I created that has the following features:

1. Has a name input field
2. Has a canvas pad
3. Has a Clear button
4. Has a Save button
5. Has a Remove button
6. When the Save button is clicked:
   a. The Clear and Save button are hidden
   b. The Remove button appears
   c. The canvas is just the image and cannot be added to
   d. The canvas area becomes light grey
   e. A hidden field is given the value of the SVG
7. When the remove button is clicked
   a. The Remove button is hidden
   b. The Clear and Save button appear
   c. The canvas is cleared and become white
   d. The hidden value is removed

I have put this into a form, the form has the following features

1. The submit button runs a JavaScript function
2. The function:
   a. Reads the value length of the name
   b. Reads the value length of the hidden field

• If they are both 0 then fine
• If they are both more than 0 fine
• If one is 0 and the other is more than 0, an alert pops up and the form is not submitted

Name, no signature, detected fine

Signature, no name, detected fine

I now need to detect that they have drawn on the canvas pad but they have not clicked Save to set the hidden value.

I want the submit form function to be able to somehow run within that context:
v_signaturePad.isEmpty()

[UziTech]

What is the question? It looks like you already have the answer with signaturePad.isEmpty()

[TP-Harry-Phillips]

The signature pad(s) are within the form, the Submit button is within the form, the submit button and function are not within the signature pad.

The code for the submit function looks like this:

The result is:

[TP-Harry-Phillips]

I have decided to treat an empty signature pad and one where they have not clicked the Save button the same:

"hey dumbarse, did need to click the Save button?"