How can I validate I have drawn something in jSignature panel or not?

Question

jSignature is having canvas and it has a class. How can I validate jSignature whether I have drawn something or not ?

I have added one bind for click event.

$sigdiv.bind('click', function(e) {
    $("#num_strok").val(parseInt($("#num_strok").val()) + 1);
});

Problem is even I click some corner also num_strock get increases. And for some dragging it will not increase.

I have tried in Google whether it has any built in isEmpty function is there or not. But I have not found anything.

Answer 1

 if( $sigdiv.jSignature('getData', 'native').length == 0) {
    alert('Please Enter Signature..');
 }

Answer 2

Very late to the party... So I wanted to give some input on my findings, each related to using $("#sigDiv").jSignature('getData', 'putSomethignInHere') function to validate the a signature is present.

Here are the options I have examined for the second attribute passed into the jSignature function:

native returns an object of objects .length == 0 when the sig box is empty, but .length > 0 when there is something in the sig box. If you want to know how many strokes just use the length of this object. NOTE: According to the jSignature documentation:

"Stroke = mousedown + mousemoved * n (+ mouseup but we don't record that as that was the "end / lack of movement" indicator)"

base30 also returns an object. Here I looked at the information in the second index position of this object. x = $("#sigDiv").jSignature('getData', 'base30')[1].length > 0 ? TRUE : FALSE Here x would yeild TRUE if the box has been signed and FALSE when the jSig box is left untouched.

In my case, I used the base30 attribute for validating signature complexity, not just "did the end user draw something?". x = $("#sigDiv").jSignature('getData', 'base30')[1].length > {insertValueHere} ? TRUE : FALSE. To validate the end user actually signed in the box and gave more than a simple '.' of small 'x'. The return value of the second index yielded from base30 gets larger as the complexity. Thus, if the user did enter just a dot, x = $("#sigDiv").jSignature('getData', 'base30')[1].length would be about 5. The yielded value just get larger and larger the more the end user draws in the box. The highest lenght I recorded during my testing was 2272. And I scribbled and scribbled in the box for all of 15 secounds.

According to the jSig documentation:

base30 (alias image/jSignature;base30) (EXPORT AND IMPORT) (VECTOR) data format is a Base64-spirited compression format tuned for absurd compactness and native url-compatibility. It is "native" data structure compressed into a compact string representation of all vectors.

image- this is a choice I would avoid for validation. It produces an object with a long string in the second index position. The last one I measured was 672 characters long. Using image produces a string regardless whether the sig box is blank or used. And to make things more unuseful, the string produced is different for a blank signature box in Chrome verse a blank signature box in FF Developer. I'm sure the image value has a use, but just not validation.

svgbase64 - this is similar to image with exceptions. Unlike image, using svgbase64 produces a long -yet shorter- string in the second position. Also, this string IS the same when I performed the Chrome verse FF Developer check. This is where I stopped my testing. So I assume you can use svgbase64 for validation.

These are my conclusions, yours may vary. Please don't hold my low reputation against me.

Answer 3

According to the jSignature website there is a getData function in the API. If you use the getData function on an empty signature area as reference, you could then use getData whenever you want and compare it to the empty reference. You would then be able to tell if something has been written in the signature area.

This is just a guess from my part, as I haven't used this script, but I think something like this would be able to work.

EDIT

I also found this on the website

The dom element upon which jSignature was initialized emits 'change' event immediately after a stroke is done being added to the storage. (In other words, when user is done drawing each stroke. If user draws 3 strokes, this event is emitted 3 times, after each stroke is done.)

Here is how you would bind to that event:

$("#signature").bind('change', function(e){ /* 'e.target' will refer
to div with "#signature" */ })

Event is emitted asynchronously through a "thread" ( setTimeout(..., 3) ) so you don't need to wrap your event handler into "thread" of any kind, as jSignature widget will go on and will not be waiting for you to be done with your custom event handler logic.

Couldn't you just set a flag variable that gets set to true on the first change event? That would indicate that something is written into the area

Answer 4

You can check the base30 vector if any points are there.

var isSignatureProvided=$sigdiv.jSignature('getData','base30')[1].length>1?true:false;