How do I check if image is generated before clicking submit button?

Question

I'm creating a ASP.NET MVC5 application that utilizes jSignature to capture the user's signature. It looks like this, if you're unfamiliar with the plugin:

When the user clicks "Save", an image of their signature is generated and saved in an <img/> right underneath the signature pad:

I want to do some front-end validation to make sure that the user has clicked "save" and, therefore, generated the signature image before submitting the entire form. I'd like to do this with jQuery if possible. I have a pseudo-code mock-up of what I think this code is supposed to look like, but I'm having trouble turning it into real-world use:

$("#entireFormSubmitButton").click(function(){
   if($("#imageOfSignature").doesNotExistOnPage){
      alert("Your signature is required before submitting this form");
      // also block the user from submitting form until signature provided
   }
});

I'm having trouble writing this piece of custom front-end validation since ASP.NET has already done most of the work for me to make sure all other required fields are filled out. Can I get some help turning this into working code?

Answer 1

 $("#entireFormSubmitButton").click(function(e){
       //block the user from submitting and check for signature
       e.preventDefault();
       if( $("#imageOfSignature").length == 0 || 
           $("#imageOfSignature").attr("src") == "" || 
           $("#date-of-birth-input").val() == ""){
          alert("Your message");
       } else {
           //all good, an image exists
           $(this).closest('form').submit();
       }
    });