title: jquery- How to validate a signature input?
body: <p>I have a form that requires user to enter their digital signature before signing up. It looks like below:</p>
  
  <p><a href="https://i.stack.imgur.com/ZQoH6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQoH6.png" alt="enter image description here"></a></p>
  
  <p>So prior to signing up, user MUST enter their signature on the canvas box provided. I use jquery validation to validate my other fields before coming to this final page for signature. </p>
  
  <p>I can validate all the fields except for the signature field. Any idea what I can do?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col-12 col-md-8 offset-md-2 pl-3 pr-3 pt-2 mb-0"&gt;
      &lt;canvas class="display-block signature-pad" style="touch-action: none;"&gt;&lt;/canvas&gt;
      &lt;p id="signatureError" name="signatureError" style="color: red; display: none;"&gt;Please provide your signature.&lt;/p&gt;
      &lt;div class="p-1 text-right"&gt;
        &lt;button id="resetSignature" class="btn btn-sm" style="background-color: lightblue;"&gt;Reset&lt;/button&gt;
        &lt;button id="saveSignature" class="btn btn-sm" style="background-color: #fbcc34;"&gt;Save&lt;/button&gt;
      &lt;/div&gt;
      &lt;input type="hidden" name="signature" id="signatureInput"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-12 mb-0 pt-2"&gt;
      &lt;div class="text-right"&gt;
        &lt;input type="hidden" name="registrationFor" value="customer"&gt;
        &lt;button type="submit" id="submit" class=" btn next-button bjsh-btn-gradient text-right"&gt;Sign Up&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code> var canvas = document.querySelector("canvas");
      const signatureSaveButton = document.getElementById("saveSignature");
      const signatureResetButton = document.getElementById("resetSignature");
      const signatureError = document.getElementById("signatureError");
      const signatureInput = document.getElementById("signatureInput");
  
      // Initialize a new signaturePad instance.
      var signaturePad = new SignaturePad(canvas);
  
      // Clear signature pad.
      signatureResetButton.addEventListener("click", function(event) {
        signaturePad.clear();
      });
  
      // Save signature pad as data url.
      signatureSaveButton.addEventListener("click", function(event) {
        if (signaturePad.isEmpty()) {
          signatureError.style.display = "block";
        } else {
          signatureUrl = signaturePad.toDataURL();
          signatureInput.value = signatureUrl;
        }
      });
  
      // Validate registration tab before moving to the next tab
      $("#register-form").validate({
        rules: {
          email: {
            required: true,
            // Specify that email should be validated
            // by the built-in "email" rule
            email: true
          },
          password: {
            required: true,
            minlength: 8,
          },
          password_confirmation: {
            required: true,
            minlength: 8,
            equalTo: "#password"
          },
          full_name: {
            required: true
          },
          nric: {
            required: true
          },
          address_1: {
            required: true
          },
          address_2: {
            required: true
          },
          address_3: {
            required: true
          },
          postcode: {
            required: true
          },
          city: {
            required: true
          },
          state: {
            required: true
          },
          contact_number_home: {
            required: true
          },
          contact_number_mobile: {
            required: true
          },
          existing_customer: {
            required: true
          },
          signatureError: {
            required: true
          },
        },
        messages: {
          email: {
            required: "Please enter an email",
            email: "The email is not valid"
          },
          password: {
            required: "Please enter a password",
            minlength: "Password must be minimum of 8 characters"
          },
          password_confirmation: {
            required: "Please confirm your password",
            minlength: "Passmust must be minimum of 8 characters",
            equalTo: "Password must be same as above"
          },
          full_name: {
            required: "Please enter your full name"
          },
          nric: {
            required: "Please enter your identity card number"
          },
          address_1: {
            required: "Please enter your address"
          },
          address_2: {
            required: "Please enter your address"
          },
          address_3: {
            required: "Please enter your address"
          },
          postcode: {
            required: "Please enter your postcode"
          },
          city: {
            required: "Please select your city"
          },
          state: {
            required: "Please select your state"
          },
          contact_number_home: {
            required: "Please enter your home number"
          },
          contact_number_mobile: {
            required: "Please enter your mobile number"
          },
          signatureError: {
            required: "Please provide your signature"
          },
        }
      });
  
      // validate fields in 1st tab
      $('#next-btn').click(function() {
        if ($("#register-form").validate().element('#email') &amp;&amp; $("#register-form").validate().element('#password') &amp;&amp; $("#register-form").validate().element('#password-confirm')) {
          nextTab.find('a').trigger('click');
        } else {}
      });
  
      // validate fields in 2nd tab
      $('#next-btn2').click(function() {
        if ($("#register-form").validate().element('#full_name') &amp;&amp; $("#register-form").validate().element('#nric') &amp;&amp; $("#register-form").validate().element('#address_1') &amp;&amp; $("#register-form").validate().element('#address_2') &amp;&amp; $("#register-form").validate().element('#address_3') &amp;&amp; $("#register-form").validate().element('#postcode') &amp;&amp;
          $("#register-form").validate().element('#city') &amp;&amp; $("#register-form").validate().element('#state') &amp;&amp; $("#register-form").validate().element('#contact_number_home') &amp;&amp;
          $("#register-form").validate().element('#contact_number_mobile') &amp;&amp; $("#register-form").validate().element('#existing_customer')
        ) {
          nextTab.find('a').trigger('click');
        } else {}
      });
  
      // validate signature input in 3rd tab
      $('#submit').click(function() {
        if ($("#register-form").validate().element('#signatureError')) {
          alert("Success");
        } else {
          alert("Failure");
        }
      });
  </code></pre>