jSingature Js Library some functions and validation

<script src="js/jSignature.min.js"></script>

<script src="js/signhere/jSignature.SignHere.js"></script>

<div class="form-group clearfix">
                    <div class="sign-here">
                    <i class="fas fa-signature"></i> Sign Here
                    </div>
                        <a class="clear-signature-link" href="#"><i class="fas fa-times-circle"></i> Clear All</a>
                        <div  id="signatureparent" class="draw-area form-control">
                        </div>
                        <textarea class="type-area form-control"></textarea>
                         <div id="displayarea"></div>  
                    </div> 
                    <div class="text-center">
                        <button type="button" class="btn btn-disabled btn-primary" id="draw_sign">Apply Signature
<div class="error-tooltip bottom"><img src="images/cancel.svg" alt=""> Please provide your signature above</div>
                        </button>
                    </div>

<script>
var $sigdiv = $("#signatureparent").jSignature({
                UndoButton:false,
                // line color
                color:"#f00",
                // line width
                lineWidth:2,
                // width/height of signature pad
                width:454,
                height:142
            })
$("#signatureparent").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 > 0 || ( d.length === 1 && d[0].x.length > 20 ) ){
                        $('#draw_sign').removeClass('btn-disabled');
                        $('.error-tooltip.bottom').hide();
                    } else {
                        $('#draw_sign').addClass('btn-disabled');
                    }
                }
            )


            $("#draw_sign").on('click', function(e){
                e.preventDefault();

                if($(this).hasClass('btn-disabled')){ 
                    $('.error-tooltip.bottom').show();
                    return false;
                }

                if($('.draw-signature').hasClass('active')){
                
                    if($('#signatureparent').jSignature('getData', 'native').length == 0) {
                        $('.error-tooltip.bottom').show();
                    } else {
                        $('.error-tooltip.bottom').hide();
                        var data = $('#signatureparent').jSignature('getData','svgbase64');
                        // var data = datapair.jSignature("getData", "svgbase64");
                        var i = new Image();
                        i.src = "data:" + data[0] + "," + data[1];

                        $('#signature_area').html("<img src='"+i.src+"' width='100%' height='100%'>");
                        $('#signature').hide();
                        $('#signatureModal').modal('hide');
                    }

                } else if($('.type-signature').hasClass('active')){
                    var text_sign = $('.type-area').val();
                    if(text_sign !='') {
                        $('.error-tooltip.bottom').hide();
                        $('#signature_area').html(text_sign);
                        $('#signature').hide();
                        $('#signatureModal').modal('hide');                    
                    } else{
                        $('.error-tooltip.bottom').show();
                        return false;
                    }
                }
            });
</script>