Add function to check for signature

[shrimpwagon]

Request for feature to simply check to see if anything has been "draw" in on the signature box at all. Something simple to see if it is still blank or not.

Thank you.

[tonio-ramirez]

You could just call getData and check for a zero-length array.

[shrimpwagon]

I believe that will still output a "blank" (white) png. I did a workaround though.

<input id="signature-data" style="position: fixed; top: 0;" name="signature_data" class="required" />

$('#signature').jSignature();
$("#signature").bind('change', function(e) {
    $('#signature-data').val($('#signature').jSignature('getData', 'svgbase64'));
});

However! There is still a problem!!!!

The src (unminified) jSignature.js is not getting the data for 'svgbase64', as in the example above. Only the minified version seems to be working. Is this an issue???

[tonio-ramirez]

Try the base30 format. I'm pretty sure parsing it to tell whether there's anything in the box is pretty simple.

[dvdotsenko]

Example of watching for change on the jSignature element and inspecting the length of the data:

$("#signature").bind(
    "change"
    , function(event){
        // 'event.target' will refer to DOM element with id "#signature"
        var d = $(event.target).jSignature("getData", "native")
        // if there are more than 2 strokes in the signature
        // or if there is just one stroke, but it has more than 20 points
        if ( d.length > 2 || ( d.length === 1 && d[0].x.length > 20 ) ){
            // we show "Submit" button
            // $(event.target).unbind('change')
            $("#formSubmitButton").show()
        } else {
            $("#formSubmitButton").hide()
        }
    }
)

[dvdotsenko]

+1

I would love to roll "have sig" / "don't have sig" events into jSignature, but did not figure out how users would pass in conditions into that option... I guess the user needs to pass a bool-returning callable into jSignature.init().

Need to think about nicer ways of doing "have signature" event detection and propagation.

[shrimpwagon]

That's great ty so much!

But hey!!! The src .js file is not working. When I use .jSignature('getData', 'svgbase64') i get undefined. The minified file seems to not have this problem.

[dvdotsenko]

jSignature is divided into "core" and "plugins" The src.js is just the core. SVG export filter is in one of the plugins files. If you want to use "src" versions, you just need to load all plugin files after core. Mini version has all the main plugins concatenated. They are still separate inside the file, but all ride in one file.

On Mon, Jan 14, 2013 at 11:47 AM, Shawn Welch notifications@github.comwrote:

That's great ty so much!

But hey!!! The src .js file is not working. When I use .jSignature('getData', 'svgbase64') i get undefined. The minified file seems to not have this problem.

— Reply to this email directly or view it on GitHubhttps://github.com/willowsystems/jSignature/issues/16#issuecomment-12236109.

[dustin-page]

Hi dvdotsenko! Thanks for the example above regarding how to check for the signature. Just what I needed in order to validate the signature on button click: $('#btnSigRequired').click(function() { var d=$($sigdiv).jSignature("getData", "native"); // if there are more than 2 strokes in the signature // or if there is just one stroke, but it has more than 20 points if ( d.length > 2 || ( d.length === 1 && d[0].x.length > 20 ) ){ alert("Thanks for entering in your signature!"); } else { alert("A signature is required!"); } });

[saada]

Hey guys!

Using this:

$sigdiv.jSignature('setData', 'data:image;base64,...');
var data = $sigdiv.jSignature('getData', 'native');

In this case, data is always equal to [] empty array.

Is there ANY way I could detect that the image loaded in the signature is NOT a blank one?