I've a problem with my signature pad. When I press the submit button without sign the pad, I'll throw an error but I'm getting this error:

Uncaught ReferenceError: signaturePad is not defined

This is my code:

jQuery(document).ready(function () {
  var signaturePadCanvas = document.querySelector('#signature-pad-canvas');
  var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
  signaturePadCanvas.setAttribute("width", parentWidth);
  var signaturePad = new SignaturePad(signaturePadCanvas);
});

function submit() {
  if (signaturePad.isEmpty()) {
    console.log("Empty!");
  }
}

.signature-pad-canvas-wrapper {
    margin: 15px 0 0;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.signature-pad-canvas-wrapper::after {
    content: 'Name';
    border-top: 1px solid #cbcbcb;
    color: #cbcbcb;
    width: 100%;
    margin: 0 15px;
    display: inline-flex;
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    z-index: -1;
}

<script src=".3.1/jquery.min.js"></script>
<script src="/[email protected]/dist/signature_pad.min.js"></script>
<div class="signature-pad-canvas-wrapper">
    <canvas id="signature-pad-canvas"></canvas>
    <button onClick="submit()">Submit</button>
</div>

I've a problem with my signature pad. When I press the submit button without sign the pad, I'll throw an error but I'm getting this error:

Uncaught ReferenceError: signaturePad is not defined

This is my code:

jQuery(document).ready(function () {
  var signaturePadCanvas = document.querySelector('#signature-pad-canvas');
  var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
  signaturePadCanvas.setAttribute("width", parentWidth);
  var signaturePad = new SignaturePad(signaturePadCanvas);
});

function submit() {
  if (signaturePad.isEmpty()) {
    console.log("Empty!");
  }
}

.signature-pad-canvas-wrapper {
    margin: 15px 0 0;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.signature-pad-canvas-wrapper::after {
    content: 'Name';
    border-top: 1px solid #cbcbcb;
    color: #cbcbcb;
    width: 100%;
    margin: 0 15px;
    display: inline-flex;
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    z-index: -1;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/signature_pad.min.js"></script>
<div class="signature-pad-canvas-wrapper">
    <canvas id="signature-pad-canvas"></canvas>
    <button onClick="submit()">Submit</button>
</div>

Any ideas?

• javascript
• jquery
• html
• css

• More help full: How to check if a canvas is empty – Fefar Ravi Commented Jun 4, 2022 at 5:05

1 Answer 1

Your signaturePad variable is out of scope for submit() function, declare it at global scope and then use it.

var signaturePad;
jQuery(document).ready(function () {
  var signaturePadCanvas = document.querySelector('#signature-pad-canvas');
  var parentWidth = jQuery(signaturePadCanvas).parent().outerWidth();
  signaturePadCanvas.setAttribute("width", parentWidth);
  signaturePad = new SignaturePad(signaturePadCanvas);
});

function submit() {
  if (signaturePad.isEmpty()) {
    console.log("Empty!");
  }
}

.signature-pad-canvas-wrapper {
    margin: 15px 0 0;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.signature-pad-canvas-wrapper::after {
    content: 'Name';
    border-top: 1px solid #cbcbcb;
    color: #cbcbcb;
    width: 100%;
    margin: 0 15px;
    display: inline-flex;
    position: absolute;
    bottom: 10px;
    font-size: 13px;
    z-index: -1;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/signature_pad.min.js"></script>
<div class="signature-pad-canvas-wrapper">
    <canvas id="signature-pad-canvas"></canvas>
    <button onClick="submit()">Submit</button>
</div>