Hello,
I have a form with 2 signature fields, each one is in a collection. How can I make both fields required ?
You just need to add a few lines to get this working. To prevent users from submitting the form, add the following line in your main $(document).ready function:
$('.Submit').attr('disabled', true);
Add this function, which checks to see if the signatures are all done:
function checkSignatures() {
if ($('.sigGroup').length <= 0) {
$('.Submit').removeAttr('disabled');
}
}
Then, in your $('.donebutton').click function, add a call to the checkSignatures() function, as shown in this example:
$('.donebutton').click(function () {
var section = $(this).closest('.sigCollection');
var sigdata = section.find('.signature').jSignature('getData');
section.find('.sigdata textarea').val(htmlEncode(sigdata));
var $img = $('<img class=imported></img>');
$img.attr("src", section.find('.signature').jSignature('getData')).appendTo(section.find('.sigimage'));
section.find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
section.find('.sigwarning').hide();
checkSignatures();
});
Let me know if that gives you any trouble. For more specific help, I'll need to see your JavaScript.
Note: If you have signatures in repeatable collections, you'll need to handle the case where a signature is added after all the other signatures are done.
This is what we are using for a form with 2 signature fields:
$(document).ready(function () {
function htmlEncode(value) {
return $('<div/>').text(value).html();
}
function htmlDecode(value) {
return $('<div/>').html(value).text();
}
$.getScript('http://www2.d91.k12.id.us/forms/js/jSignature.min.js', function () {
$('.signature').jSignature();
});
/**When the page loads, check if the sig data (hidden) field has a value.
If it has a value, decode it and put it in the image, and remove the
signature pad and its buttons.**/
$('.sigCollection').each(function () {
var sigvalue = $(this).find('.sigdata textarea').text();
var sigrovalue = $(this).find('.sigdata .ro').text();
if (sigvalue != '' || sigrovalue != '') {
var decoded = htmlDecode(sigvalue == '' ? sigrovalue : sigvalue);
var $img = $('<img class=imported></img>');
$img.attr("src", decoded).appendTo($(this).find('.sigimage'));
$(this).find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
$(this).find('.sigwarning').hide();
}
});
$('.donebutton').click(function () {
var section = $(this).closest('.sigCollection');
var sigdata = section.find('.signature').jSignature('getData');
section.find('.sigdata textarea').val(htmlEncode(sigdata));
var $img = $('<img class=imported></img>');
$img.attr("src", section.find('.signature').jSignature('getData')).appendTo(section.find('.sigimage'));
section.find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
section.find('.sigwarning').hide();
});
$('.clearbutton').click(function () {
var section = $(this).closest('.sigCollection');
section.find('.signature').jSignature('clear');
});
});
Thank you Blake for your anser, but I allready have the code to use 2 signature fields. What I want is to make them required so the user MUST fill those fields to submit the form.
You just need to add a few lines to get this working. To prevent users from submitting the form, add the following line in your main $(document).ready function:
$('.Submit').attr('disabled', true);
Add this function, which checks to see if the signatures are all done:
function checkSignatures() {
if ($('.sigGroup').length <= 0) {
$('.Submit').removeAttr('disabled');
}
}
Then, in your $('.donebutton').click function, add a call to the checkSignatures() function, as shown in this example:
$('.donebutton').click(function () {
var section = $(this).closest('.sigCollection');
var sigdata = section.find('.signature').jSignature('getData');
section.find('.sigdata textarea').val(htmlEncode(sigdata));
var $img = $('<img class=imported></img>');
$img.attr("src", section.find('.signature').jSignature('getData')).appendTo(section.find('.sigimage'));
section.find('.sigGroup').remove(); //class added to the signature button and image custom HTML fields.
section.find('.sigwarning').hide();
checkSignatures();
});
Let me know if that gives you any trouble. For more specific help, I'll need to see your JavaScript.
Note: If you have signatures in repeatable collections, you'll need to handle the case where a signature is added after all the other signatures are done.
Thank you Eric for your accurate and clear answer, that works perfectly.
Hi Moana,
If your question has been answered, please let us know by clicking the "This answered my question" button on the response.
If you still need assistance with this matter, just update this thread. Thanks!