jQuery SignField – Provides signature field as jQuery component, using either a sketch pad or an uploaded signature file for E-Sign (Electronic Signature) features
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