jQuery SignField – Provides signature field as jQuery component, using either a sketch pad or an uploaded signature file for E-Sign (Electronic Signature) features

0
210

jQuery SignField – Provides signature field as jQuery component, using either a sketch pad or an uploaded signature file for E-Sign (Electronic Signature) features

jQuery Signature 12-Jan-2016

Setup

Following scripts must be included at bottom of page body.

<script src="jquery.js"></script>
<script src="sketch.min.js"></script>

<!-- Localized messages -->
<script src="lang/jquery.signfield-en.min.js"></script>

<!-- Component script -->
<script src="js/jquery.signfield.min.js"></script>

JavaScript usage

Any element can be turned into a signature field.

Consider element thereafter as original one you want to replace with a signature field.

<div id="uniqueId" class="classes" data-name="fieldName" 
  data-max-size="2048" data-pen-tickness="3" data-pen-color="red" ></div>
  • id (optional): Signature field identifier.
  • class (optional): CSS classes, if present applied on signature field.
  • data-name (required): Field name, used on submit.
  • data-max-size (optional): If present, used as limit in kB to upload signature file.
  • data-pen-thickness (optional, default = 2): If present and if sketch (canvas) is supported, defines pen thickness.
  • data-pen-color (optional): If present and if sketch is supported, defines pen color.

Then calling $("#uniqueId").signField() will replace original element with a signature field as following (considering ${orig.x} is value of attribute x on original element).

<div id="${orig.id}" class="${orig.class}">
  <!-- If canvas is supported by browser -->
  <label class="radio sketch-radio">
    <input type="radio" name="${orig.name}-type" value="canvas" />
    <!-- + Localized label -->
  </label>
  <a class="clear-canvas"><!-- Localized message --></a>
  <canvas></canvas>

  <label class="radio file-radio">
    <input type="radio" name="${orig.name}-type" value="file" />
    <!-- + Localized label --> 
  </label>
  <!-- end of if -->

  <input type="file" name="${orig.name}-file" />
  <span class="message"></span>
</div>

Canvas size is defined by CSS, you may want to enforce it so that size of sketch image data is compliant with what you expect (e.g. #uniqueId canvas { width: 200px; height: 100px } ensure sketch image is 200×100).

If signature component wants to raise an error, CSS class has-error is added to the nesting div element, and localized message written in its span.message.

Methods

addError

.signField('addError', "errorKey", "message")

Adds and displays a custom error.

$('#signature').signField('addError', "file.error.type-unsupported", 
  "This kind of file is not supported");
// #signature should have been previously set up as signature field

If custom error is related to a selected file, then key must starts with file.error..

errors

.signField('errors')

If there is error for a signature field, returns array of error keys or [] (if none).

var errs = $('#signature').signField('error');
// #signature should have been previously set up as signature field

filename

.signField('filename')

Returns name of selected file if any, or null if none.

var filename = $('#signature').signField('filename')

imagedata (getter)

.signField('imagedata')

Returns image PNG data for a sketched signature, in data URI format if any, or null if none.

var imagedata = $('#signature').signField('imagedata')

imagedata (setter)

.signField('imagedata', dataURI)

Load PNG image from given dataURI into signature canvas (if supported).

$('#signature').signField('imagedata', aDataUri)

selectiontype

.signField('selectiontype')

Returns type of selected signature, either file or canvas (or null if none).

var seltype = $('#signature').signField('selectiontype')

Events

change

Fired when field value is changed, either by uploading a signature file or by sketching one.

$("#signature").on('change', function() { 
  var signature = $(this);
  // ...
})

Website: https://github.com/cchantep/jquery.signfield

 


 

Thanks for reading,
Web Editor

LEAVE A REPLY

Please enter your comment!
Please enter your name here

four × five =