Question T9515
Visible to All Users

We are having an issue with signature pad submitting dot only. Anyone else having this issue?

created 3 years ago

It is a required field and we have had several instances where a dot only was submitted as a signature. The person swears that they signed their whole name and clicked submit button at the bottom of the form. Is anyone else having this problem.

The following is a custom component we are using that includes signature pad.:

import * as Survey from "survey-knockout";
import moment from 'moment';
import Hashes from 'jshashes';

export default {
name: "signaturepaddate",
title: "Signature Pad Date",
elementsJSON: [
{
type: "html",
name: "legalnotice",
html: "<h5 class="text-danger">
By signing my name in the signature box below, I am electronically signing the consent.
I understand and agree that signing the form electronically is the equivalent of signing a paper document
and has the same legal weight as a manual signature using pen and paper.
</h5>",
visible: true
},
{
type: "signaturepad",
name: "signature",
title: "Signature",
width: "400px",
placeHolder: "Please sign your name.",
isRequired: false,
},
{
type: "text",
name: "signdate",
title: "Date",
inputType: "datetime-local",
max: "2999-12-31",
isRequired: false,
startWithNewLine: false,
visible: true,
readOnly: true,
},
{
type: "text",
name: "signfullname",
visible: false,
readOnly: false
},
{
type: "text",
name: "signkey",
visible: false,
readOnly: false
},
{
type: "html",
name: "displaykey",
html: "",
visible: true
}
],

onInit() {
Survey.Serializer.addProperty("signaturepaddate", {
name: "signerCategory",
category: "general",
default: "",
choices: ["", "patient", "staff"]
});
},
//SurveyJS calls onCreated function right after creating contentPanel and its elements.
onCreated(question) {
let sign = question.contentPanel.getQuestionByName("signature");
let signDate = question.contentPanel.getQuestionByName("signdate");
let signFullName = question.contentPanel.getQuestionByName("signfullname");
let signKey = question.contentPanel.getQuestionByName("signkey");
let displayKey = question.contentPanel.getQuestionByName("displaykey");

signFullName.valueChangedCallback = () => {
if (signFullName.value) {
sign.title = Signing as ${signFullName.value};
}
};

if (signFullName.value) {
sign.title = Signing as ${signFullName.value};
}

signKey.valueChangedCallback = () => {
if (signKey.value) {
displayKey.html = <small>Signature Key = ${signKey.value}</small>;
} else {
displayKey.html = "<small>Signature Key = </small>"
}
};

if (signKey.value) {
displayKey.html = <small>Signature Key = ${signKey.value}</small>;
// displayKey.setPropertyValue("visible", true);
} else {
displayKey.html = "<small>Signature Key = </small>"
}

},
// SurveyJS calls this function after the question is loaded from survey json.
onLoaded(question) {
let sign = question.contentPanel.getQuestionByName("signature");
let signDate = question.contentPanel.getQuestionByName("signdate");
let signFullName = question.contentPanel.getQuestionByName("signfullname")
if (question.isRequired) {
sign.isRequired = true;
signDate.isRequired = true;
}

},
// SurveyJS calls this function after rendering the content element.
onAfterRenderContentElement(question, element, htmlElement) {
let sign = question.contentPanel.getQuestionByName("signature");
let signDate = question.contentPanel.getQuestionByName("signdate");
let signFullName = question.contentPanel.getQuestionByName("signfullname");
let signKey = question.contentPanel.getQuestionByName("signkey");
let displayKey = question.contentPanel.getQuestionByName("displaykey");

const getUUIDv4 = () => {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
);
}

const encryptSignKey = (signKey) => {
const SHA256 = new Hashes.SHA256().hex(signKey);
return SHA256;
};

const encryptedUUID = encryptSignKey(getUUIDv4());

// sign.valueChangedCallback = () => {
sign.onPropertyChanged.add((sender, options) => {
if (options.name !== "value") return;
if (sign.value && !signDate.value) { //&& locked.value != 'locked'
signDate.value = moment().format('YYYY-MM-DDTHH:mm'); //signDate.value ? signDate.value :
} else if (!sign.value && signDate.value !== null) {
signDate.value = null;
}
if (sign.value) {
signKey.value = encryptedUUID;
// displayKey.setPropertyValue("visible", true);
} else {
signKey.value = null;
// displayKey.setPropertyValue("visible", false);
displayKey.html = "<small>Signature Key = </small>"
sign.setPropertyValue('allowClear', true);
}
});

}

};

Code

Answers approved by surveyjs Support

created 3 years ago

Hello Jim,
You just copied your code and spend several minutes to create the post. It took me twenty minutes, just to replicate your code in a plunker.
If you want us you to help, please go to this plunker, modify it as you need, so we can reproduce the issue and post a new link here.
We will take a look.

Thank you,
Andrew
SurveyJS Team

    Comments (2)

      Sorry to have created a problem and cost you so much time.  I was just trying to make sure that I included enough info to to allow problem to be researched.  I will do as you asked & take a look at the plunkr.

        Thank you, Jim. We are looking forward for your example.

        Andrew
        SurveyJS Team