Discussions
Extending Eloqua 10 Form Validation
This post is inspired by a question asked about validating in group of check boxes in a form. While some solutions were given, I thought I could take it further and actually get validation to work the way that out-of-the-box validation works in Eloqua. Here is the result.
Creating the Eloqua form
I used E10 to create my simple text form. To create the group of checkboxes, just select the 'checkboxes' option in the left-hand column under the heading 'CUSTOM FIELDS'.
In the Field Settings section, note the HTML name of your checkbox group. In my example, the name is 'checkboxes' (you'll need this later).
When you're happy with your form, save it, then under the settings dropdown, select 'View HTML' - copy and paste your HTML into your favorite HTML editor (I just use Notepad++).
Customizing Validation
Its good to understand how Eloqua validates forms before you go extended the code. Eloqua 10 uses a light-weight JavaScript library called LiveValidation to validate forms client-side. It has plenty of pre-built functions that make validation easy. But it doesn't do everything (like validating that a certain number of checkboxes are checked). But it does provide a custom function that allows you to validate a value against a custom function that returns true when valid or false when not valid. We're going to take advantage of this. You'll find your livevalidation CSS (for error styling) and JavaScript at the bottom of you copied code. In my example, I had made the email address field (id of field1) required. LiveValidation took care of this for us:
We're going to add validation to the checkboxes. All the checkboxes in the checkbox group have the same id (in my example, field3). You'll need to add this code to your livevalidation JavaScript:
var field3 = new LiveValidation( "field3", {onlyOnSubmit: true, insertAfterWhatNode:"cb_err_msg" } );
This field creates a new LiveValidation for field3 ( our checkboxes) and specifies where to put the error message. By default the error message ends up right before the first checkbox, which is ugly. In my example I gave the label element for the checkbox field an id of 'cb_err_msg'
field3.add( Validate.Custom, { against: function(value){ return isValidField(value) }, failureMessage: "Please Select 3 Values" } );
This code creates the custom validation. It will call a function that we will create that I've named isValidField(). The function is below:
function isValidField(){
var selectd_items = 0;
//need to call checkbox by name, not by id - bPCheckbox... is the form name
var numboxes = document.forms['bPCheckboxValidate-1348667791597'].checkboxes.length;
//counts the number of checked boxes
for (var i=0; i < numboxes; i++)
if(document.forms['bPCheckboxValidate-1348667791597'].checkboxes[i].checked)
selectd_items++;
//if more than 2 checkboxes are checked returns true, else returns fals
return (selectd_items > 2)? true : false;
}
You will want to place this function before the livevalidation calls. Now your checkboxes will validate like the standard validation in Eloqua.
Full example is attached. Hope this is helpful.
Comments
-
This totally rocks!! We are using this for a webinar series registration form and I love it! Thank you so much.
-
This totally rocks!! We are using this for a webinar series registration form and I love it! Thank you so much.
Glad its helpful - I'm putting an automated version together for those who'd rather not delve into the javascript, but its been sidelined by other priorities.
-
Glad its helpful - I'm putting an automated version together for those who'd rather not delve into the javascript, but its been sidelined by other priorities.
Hi Mark - your instructions are spot on, thank you! One question -- if I want to just require validation on a single checkbox (rather than a group) -- how would I modify your script, OR is there a simpler way to set it up?
Thanks!
-
Hi Erika,
Same script, just simpler. This function:
function isValidField(){
var selectd_items = 0;
var numboxes = document.forms['bPCheckboxValidate-1348667791597'].checkboxes.length;
for (var i=0; i < numboxes; i++)
if(document.forms['bPCheckboxValidate-1348667791597'].checkboxes[i].checked)
selectd_items++;
return (selectd_items > 2)? true : false;
}
now becomes this function:
function isValidField(){
/* looks to see if the checkbox is checked. Returns true if checked, false if unchecked
this only works if there is one checkbox in the form */
return (document.forms['bPCheckboxValidate-1348667791597'].checked);
}
or you could do it this way:
function isValidField(){
/* looks to see if the checkbox is checked. Returns true if checked, false if unchecked
in this example you specify the id of the field you want to validate (field3 in this example) */
return (document.getElementById('field3').checked);
}
I have an example but I can't seem to upload a file in the comments
Post edited by Unknown User on -
Hi Erika,
Same script, just simpler. This function:
function isValidField(){
var selectd_items = 0;
var numboxes = document.forms['bPCheckboxValidate-1348667791597'].checkboxes.length;
for (var i=0; i < numboxes; i++)
if(document.forms['bPCheckboxValidate-1348667791597'].checkboxes[i].checked)
selectd_items++;
return (selectd_items > 2)? true : false;
}
now becomes this function:
function isValidField(){
/* looks to see if the checkbox is checked. Returns true if checked, false if unchecked
this only works if there is one checkbox in the form */
return (document.forms['bPCheckboxValidate-1348667791597'].checked);
}
or you could do it this way:
function isValidField(){
/* looks to see if the checkbox is checked. Returns true if checked, false if unchecked
in this example you specify the id of the field you want to validate (field3 in this example) */
return (document.getElementById('field3').checked);
}
I have an example but I can't seem to upload a file in the comments
Thanks so much, I will give these a shot and let you know how it works out!
-
Hi Erika,
Same script, just simpler. This function:
function isValidField(){
var selectd_items = 0;
var numboxes = document.forms['bPCheckboxValidate-1348667791597'].checkboxes.length;
for (var i=0; i < numboxes; i++)
if(document.forms['bPCheckboxValidate-1348667791597'].checkboxes[i].checked)
selectd_items++;
return (selectd_items > 2)? true : false;
}
now becomes this function:
function isValidField(){
/* looks to see if the checkbox is checked. Returns true if checked, false if unchecked
this only works if there is one checkbox in the form */
return (document.forms['bPCheckboxValidate-1348667791597'].checked);
}
or you could do it this way:
function isValidField(){
/* looks to see if the checkbox is checked. Returns true if checked, false if unchecked
in this example you specify the id of the field you want to validate (field3 in this example) */
return (document.getElementById('field3').checked);
}
I have an example but I can't seem to upload a file in the comments
Just following up -- Mark, that script worked great for validating single checkboxes, thanks for your help!
-
Just following up -- Mark, that script worked great for validating single checkboxes, thanks for your help!
you're welcome - glad it worked out for you.
-
Nice scripts Mark. Thanks
-
Hi Erika,
Same script, just simpler. This function:
function isValidField(){
var selectd_items = 0;
var numboxes = document.forms['bPCheckboxValidate-1348667791597'].checkboxes.length;
for (var i=0; i < numboxes; i++)
if(document.forms['bPCheckboxValidate-1348667791597'].checkboxes[i].checked)
selectd_items++;
return (selectd_items > 2)? true : false;
}
now becomes this function:
function isValidField(){
/* looks to see if the checkbox is checked. Returns true if checked, false if unchecked
this only works if there is one checkbox in the form */
return (document.forms['bPCheckboxValidate-1348667791597'].checked);
}
or you could do it this way:
function isValidField(){
/* looks to see if the checkbox is checked. Returns true if checked, false if unchecked
in this example you specify the id of the field you want to validate (field3 in this example) */
return (document.getElementById('field3').checked);
}
I have an example but I can't seem to upload a file in the comments
The LiveValidation library also has built-in a build in function called for validating checkboxes. To validate a single checkbox or at least one checkbox in a group is checked, you can use the code:
var field3 = new LiveValidation("field3", {validMessage: "", onlyOnSubmit: true});field3.add(Validate.Acceptance, {failureMessage:"This field is required"});
This will ellimnate the need to write a custom validation function and make the code a little easier to mantain. Documentation for other built-in LiveValidation functions can be found at LiveValidation - Documentation
-
The LiveValidation library also has built-in a build in function called for validating checkboxes. To validate a single checkbox or at least one checkbox in a group is checked, you can use the code:
var field3 = new LiveValidation("field3", {validMessage: "", onlyOnSubmit: true});field3.add(Validate.Acceptance, {failureMessage:"This field is required"});
This will ellimnate the need to write a custom validation function and make the code a little easier to mantain. Documentation for other built-in LiveValidation functions can be found at LiveValidation - Documentation
Nice catch - when I did the multi-check validation I came across this but gave up on it because it couldn't do the multi-check, but it is much simpler to use this if you just need to validate a single checkbox.
-
I need help please and I tested with different scripts and none seems to work for me. Here is my code. I need to make at least one checkbox required. Thanks for your help
==============================
<html>
<head>
<title>CA_2013_Sem-Toronto-Board-of-trade</title>
<STYLE type="text/css"> .elqFieldValidation { background-color:FC8888; } .elqLayout{font-family:Verdana;font-size:8pt;}.elqField{font-size:10pt;}.elqLabel{padding-top: 5px; padding-left: 5px; padding-bottom: 5px; font-family:Arial;font-size:8pt;}.elqLayoutRow{font-size:10pt;}.elqSubmit{font-size:10pt;}.elqHeading{font-size:10pt;}.elqSubHeading{font-size:10pt;}.elqMatrix{font-size:10pt;}.elqMatrixRow{font-size:10pt;}.elqTextArea{font-size:10pt;}.elqMatrixHeaderRow{font-size:10pt;}.elqMatrixAltRow{font-size:10pt;}</STYLE>
<SCRIPT TYPE="text/javascript">
var errorSet = null;
FieldObj = function() {
var Field;
this.get_Field = function() { return Field; }
this.set_Field = function(val) { Field = val; }
var ErrorMessage;
this.get_ErrorMessage = function() { return ErrorMessage; }
this.set_ErrorMessage = function(val) { ErrorMessage = val; }
}
function ResetHighlight() {
var field;
if (errorSet != null) {
for (var i = 0; i < errorSet.length; i++) {
errorSet[i].Field.className = 'elqField'
}
}
errorSet = new Array();
}
function DisplayErrorSet(ErrorSet) {
var element;
var ErrorMessage = '';
for (var i = 0; i < ErrorSet.length; i++) {
ErrorMessage = ErrorMessage + ErrorSet[i].ErrorMessage + '\n';
ErrorSet[i].Field.className = 'elqFieldValidation';
}
if (ErrorMessage != '')
alert(ErrorMessage);
}
function ValidateRequiredField(Element, args) {
var elementVal=Element.value;
var testPass=true;
if (Element) {
if (args.Type == 'text') {
if (Element.value == null || Element.value == "") {
return false;
}
}
else if (args.Type == 'singlesel') {
if (Element.value == null || Element.value == "") {
return false;
}
}
else if (args.Type == 'multisel') {
var selCount=0;
for (var i=0; i<Element.length; i++) {
if (Element[i].selected && Element[i].value !='') {
selCount += 1;
}
}
if (selCount == 0)
return false;
}
}
else
testPass = false;
return testPass;
}
function ValidateEmailAddress(Element) {
var varRegExp='^[A-Z0-9!#\\$%&\'\\*\\+\\-/=\\?\\^_`\\{\\|\\}~][A-Z0-9!#\\$%&\'\\*\\+\\-/=\\?\\^_`\\{\\|\\}~\\.]{0,62}@([A-Z0-9](?:[A-Z0-9\\-]{0,61}[A-Z0-9])?(\\.[A-Z0-9](?:[A-Z0-9\\-]{0,61}[A-Z0-9])?)+)$';
if ((Element) && (Element.value != '')) {
var reg = new RegExp(varRegExp,"i");
var match = reg.exec(Element.value);
if ((match) && (match.length=3) && (match[1].length<=255) && ((match[2].length>=3) & (match[2].length<=7)))
return true;
}
return false;
}
function ValidateDataTypeLength(Element, args, ErrorMessage) {
var elementVal = Element.value;
var testPass = true;
if (Element) {
if (args.Type == 'text') {
if ((elementVal == '')) {
testPass = false;
}
if ((args.Minimum != '') && (elementVal.length < args.Minimum))
testPass = false;
if ((args.Maximum != '') && (elementVal.length > args.Maximum))
testPass = false;
}
else if (args.Type == 'numeric') {
if ((elementVal == '')) {
testPass = false;
}
if ((elementVal != '') && (elementVal != parseFloat(elementVal)))
testPass = false;
if (args.Minimum != '') {
if ((elementVal == '') || (parseFloat(elementVal) < args.Minimum))
testPass = false;
}
if (args.Maximum != '') {
if ((elementVal != '') && (parseFloat(elementVal) > args.Maximum))
testPass = false;
}
}
}
else
testPass = false;
return testPass;
}
function CheckElqForm(elqForm) {
var args = null;
var allValid = true;
if (elqForm == null) {
alert('Unable to execute form validation!\Unable to locate correct form');
return false;
}
ResetHighlight();
formField = new FieldObj();
formField.Field = elqForm.elements['FirstName'];
formField.ErrorMessage ='Form field First Name is required'
args = {'Type': 'text' };
if (formField.Field != null) {
if (!ValidateRequiredField(formField.Field, args)) {
errorSet.push(formField);
allValid = false;
}
}
formField = new FieldObj();
formField.Field = elqForm.elements['C_LastName'];
formField.ErrorMessage ='Form field Last Name is required'
args = {'Type': 'text' };
if (formField.Field != null) {
if (!ValidateRequiredField(formField.Field, args)) {
errorSet.push(formField);
allValid = false;
}
}
formField = new FieldObj();
formField.Field = elqForm.elements['C_Company'];
formField.ErrorMessage ='Form field Company is required'
args = {'Type': 'text' };
if (formField.Field != null) {
if (!ValidateRequiredField(formField.Field, args)) {
errorSet.push(formField);
allValid = false;
}
}
formField = new FieldObj();
formField.Field = elqForm.elements['C_EmailAddress'];
formField.ErrorMessage ='Form field Email Address is required'
args = {'Type': 'text' };
if (formField.Field != null) {
if (!ValidateRequiredField(formField.Field, args)) {
errorSet.push(formField);
allValid = false;
}
}
if (!allValid) {
DisplayErrorSet(errorSet);
return false;
}
return true;
}
function submitForm(elqForm) {
if (CheckElqForm(elqForm)) {
prepareSelectsForEloqua(elqForm);
fnPrepareCheckboxMatricesForEloqua(elqForm);
return true;
}
else { return false; }
}
function prepareSelectsForEloqua(elqForm) {
var selects = elqForm.getElementsByTagName("SELECT");
for (var i = 0; i < selects.length; i++) {
if (selects[i].multiple) {
createEloquaSelectField(elqForm, selects[i]);
}
}
return true;
}
function createEloquaSelectField(elqForm, sel) {
var inputName = sel.name;
var newInput = document.createElement('INPUT');
newInput.style.display = "none";
newInput.name = inputName;
newInput.value = "";
for (var i = 0; i < sel.options.length; i++) {
if (sel.options[i].selected) {
newInput.value += sel.options[i].value + "::";
}
}
if (newInput.value.length > 0) {
newInput.value = newInput.value.substr(0, newInput.value.length - 2);
}
sel.disabled = true;
newInput.id = inputName;
elqForm.insertBefore(newInput, elqForm.firstChild);
}
function fnPrepareCheckboxMatricesForEloqua(elqForm) {
var matrices = elqForm.getElementsByTagName('TABLE');
for (var i = 0; i < matrices.length; i++) {
var tableClassName = matrices[i].className;
if (tableClassName.match(/elqMatrix/)) {
if (fnDetermineMatrixType(matrices[i]).toLowerCase() == 'checkbox') {
if (matrices[i].rows[0].cells[0].childNodes.length == 1) {
if (matrices[i].rows[0].cells[0].childNodes[0].nodeName != '#text') {
fnCreateHorizontalMatrixCheckboxField(elqForm, matrices[i]);
}
else {
fnCreateVerticalMatrixCheckboxField(elqForm, matrices[i]);
}
}
}
}
}
return true;
}
function fnCreateVerticalMatrixCheckboxField(elqForm, matrix) {
var inputName = matrix.id + 'r' + 1;
var newInput = document.createElement('INPUT');
newInput.style.display = 'none';
newInput.name = inputName;
newInput.value = '';
var inputs = document.getElementsByName(inputName);
for (var i=0; i < inputs.length; i++) {
if (inputs[i].nodeName.toLowerCase() == 'input') {
if (inputs[i].checked == true) {
if (inputs[i].type.toLowerCase() == 'checkbox') {
newInput.value += inputs[i].value + '::';
inputs[i].disabled = true;
}
}
}
}
if (newInput.value.length > 0) {
newInput.value = newInput.value.substr(0, newInput.value.length - 2);
}
newInput.id = inputName;
elqForm.insertBefore(newInput, elqForm.firstChild);
matrix.disabled = true;
}
function fnCreateHorizontalMatrixCheckboxField(elqForm, matrix) {
for (var i=1; i < matrix.rows.length; i++) {
var inputs = document.getElementsByName(matrix.id + 'r' + i);
var oMatrixRow = matrix.rows[i];
var inputName = oMatrixRow.id;
var newInput = document.createElement('INPUT');
newInput.style.display = 'none';
newInput.name = inputName;
newInput.value = '';
for (var j=0; j < inputs.length; j++) {
if (inputs[j].nodeName.toLowerCase() == 'input') {
if (inputs[j].checked == true) {
if (inputs[i].type.toLowerCase() == 'checkbox') {
newInput.value += inputs[j].value + '::';
inputs[j].disabled = true;
}
}
}
}
if (newInput.value.length > 0) {
newInput.value = newInput.value.substr(0, newInput.value.length - 2);
}
newInput.id = inputName;
elqForm.insertBefore(newInput, elqForm.firstChild);
}
matrix.disabled = true;
}
function fnDetermineMatrixType(oTable) {
var oFirstMatrixInput = oTable.rows[1].cells[1].childNodes[0];
return oFirstMatrixInput.type;
}
</SCRIPT>
</head>
<body style='text-align:center;'>
<form name="CA_2013_Sem-Toronto-Board-of-trade" id="CA_2013_Sem-Toronto-Board-of-trade" onsubmit='return submitForm(this);' action="http://s2598.t.eloqua.com/e/f2" method="post">
<div>
<input type="hidden" name="elqFormName" value="CA_2013_Sem-Toronto-Board-of-trade">
<input type="hidden" name="elqSiteID" value="2598">
</div>
<TABLE style="WIDTH: 600px; HEIGHT: 100%; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" id=PageTable >
<TBODY id=tableBody>
<TR style="WIDTH: 100%; HEIGHT: 100%" id=PageRow >
<TD id=pageData height="100%" width="100%">
<DIV style="POSITION: static; WIDTH: 100%; HEIGHT: 100%" id=MainDiv class="elqLayout">
<DIV style="Z-INDEX: 0; POSITION: static; WIDTH: 100%; CURSOR: default" id=ContainerDiv37 class="elqHeading" title="" >
<P align=right><IMG border=0 alt=ExclInvDistinguishedSpeakers_02 src="http://<elqDomain type=2/>/eloquaimages/clients/aonhewitt/{b8ec92f1-e0c0-4a71-8862-db8d593d858a}_exclinvdistinguishedspeakers_02.jpg" width=746 height=150 ><BR><FONT color=#f9f3f9>.</FONT></p></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv40 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label40 class="elqLabel" for=FirstName><FONT color=#5c555c size=3><STRONG>First Name</STRONG></FONT></LABEL></TD>
<TD><INPUT style="WIDTH: 275px" id=FirstName class="elqField" value="<span class="eloquaemail">FirstName</span>" size=40 name=FirstName ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo40 class="elqLabel" for=LabelTwo40>*</LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv27 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label27 class="elqLabel" for=C_LastName><FONT color=#5c555c size=3><STRONG>Last Name</STRONG></FONT></LABEL></TD>
<TD><INPUT style="WIDTH: 275px" id=C_LastName class="elqField" value="<span class="eloquaemail">LastName</span>" size=40 name=C_LastName ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo27 class="elqLabel" for=LabelTwo27>*</LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv28 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label28 class="elqLabel" for=C_Company><FONT color=#5c555c size=3><STRONG>Company</STRONG></FONT></LABEL></TD>
<TD><INPUT style="WIDTH: 275px" id=C_Company class="elqField" value="<span class="eloquaemail">Company</span>" size=40 name=C_Company ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo28 class="elqLabel" for=LabelTwo28>*</LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv29 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label29 class="elqLabel" for=C_EmailAddress><FONT color=#5c555c size=3><STRONG>Email Address</STRONG></FONT></LABEL></TD>
<TD><INPUT style="WIDTH: 275px" id=C_EmailAddress class="elqField" value="<span class="eloquaemail">EmailAddress</span>" size=40 name=C_EmailAddress ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo29 class="elqLabel" for=LabelTwo29>*</LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; WIDTH: 100%; CURSOR: default" id=ContainerDiv38 class="elqHeading" title="" ><BR><FONT color=#5c555c size=3 face=Arial><STRONG> Please check all sessions you plan to attend:</STRONG></FONT></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv44 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD style="VERTICAL-ALIGN: middle" class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label44 class="elqLabel" for=Session1>
<P style="MARGIN: 0px" align=right><STRONG><FONT color=#760e76 size=2>10:45-11:45 am </FONT></STRONG></p></LABEL></TD>
<TD><INPUT id=Session1 class="elqField" onclick="this.value='on'" value="" type=checkbox name=Session1 ></TD>
<TD style="WIDTH: 100%; VERTICAL-ALIGN: middle"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo44 class="elqLabel" for=LabelTwo44><FONT color=#4f4f4f size=2>Exclusive Meet and Greet with the Panelist at this Invitation-Only Reception</FONT></LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv35 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block" id=Label35 class="elqLabel" for=Session2><FONT color=#4f4f4f face=" Arial"><FONT color=#4f4f4f face=" Arial"><FONT color=#841284 face=" Arial">
<P style="MARGIN: 0px" align=right><FONT color=#760e76 size=2><STRONG>11:45-01:45 pm </STRONG></FONT></p></FONT></FONT></FONT></LABEL></TD>
<TD><INPUT id=Session2 class="elqField" onclick="this.value='on'" value="" type=checkbox name=Session2 ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo35 class="elqLabel" for=LabelTwo35><FONT color=#4f4f4f face=" Arial"><FONT color=#4f4f4f face=" Arial"><FONT color=#4f4f4f size=2 face=" Arial">Distinguished Speaker Panel Series: Panel Discussion and Luncheon</FONT></FONT></FONT></LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv36 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label36 class="elqLabel" for=Session3><FONT color=#4f4f4f size=3 face=" Arial"><FONT color=#4f4f4f size=3 face=" Arial"><FONT color=#760e76 size=2 face=" Arial">
<P style="MARGIN: 0px" align=right><STRONG>02:00-03:00 pm </STRONG></p></FONT></FONT></FONT></LABEL></TD>
<TD><INPUT id=Session3 class="elqField" onclick="this.value='on'" value="" type=checkbox name=Session3 ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo36 class="elqLabel" for=LabelTwo36><FONT color=#4f4f4f face=" Arial"><FONT color=#4f4f4f face=" Arial"><FONT color=#4f4f4f size=2 face=" Arial">Post Reception</FONT></FONT></FONT></LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; WIDTH: 100%; CURSOR: default" id=ContainerDiv47 class="elqTextArea" title="" ><FONT color=#fdfbfd size=1 face=Arial>.</FONT></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv30 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD style="VERTICAL-ALIGN: top" class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label30 class="elqLabel" for=talk-to-us>
<P align=right><FONT color=#5b555b size=2><STRONG>Notes</STRONG>: </FONT></p></LABEL></TD>
<TD><TEXTAREA style="WIDTH: 275px" id=talk-to-us class="elqField" cols=42 rows=2 name=talk-to-us ></TEXTAREA></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo30 class="elqLabel" for=LabelTwo30></LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; WIDTH: 100%; CURSOR: default" id=ContainerDiv48 class="elqTextArea" title="" ><FONT size=1 face=Arial></FONT></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv33 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label33 class="elqLabel" for=elqInput33> <BR><BR></LABEL></TD>
<TD><INPUT id=submit class="elqSubmit" value=Submit type=submit name=submit ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo33 class="elqLabel" for=LabelTwo33></LABEL></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE>
</form>
</body>
</html>
-
I need help please and I tested with different scripts and none seems to work for me. Here is my code. I need to make at least one checkbox required. Thanks for your help
==============================
<html>
<head>
<title>CA_2013_Sem-Toronto-Board-of-trade</title>
<STYLE type="text/css"> .elqFieldValidation { background-color:FC8888; } .elqLayout{font-family:Verdana;font-size:8pt;}.elqField{font-size:10pt;}.elqLabel{padding-top: 5px; padding-left: 5px; padding-bottom: 5px; font-family:Arial;font-size:8pt;}.elqLayoutRow{font-size:10pt;}.elqSubmit{font-size:10pt;}.elqHeading{font-size:10pt;}.elqSubHeading{font-size:10pt;}.elqMatrix{font-size:10pt;}.elqMatrixRow{font-size:10pt;}.elqTextArea{font-size:10pt;}.elqMatrixHeaderRow{font-size:10pt;}.elqMatrixAltRow{font-size:10pt;}</STYLE>
<SCRIPT TYPE="text/javascript">
var errorSet = null;
FieldObj = function() {
var Field;
this.get_Field = function() { return Field; }
this.set_Field = function(val) { Field = val; }
var ErrorMessage;
this.get_ErrorMessage = function() { return ErrorMessage; }
this.set_ErrorMessage = function(val) { ErrorMessage = val; }
}
function ResetHighlight() {
var field;
if (errorSet != null) {
for (var i = 0; i < errorSet.length; i++) {
errorSet[i].Field.className = 'elqField'
}
}
errorSet = new Array();
}
function DisplayErrorSet(ErrorSet) {
var element;
var ErrorMessage = '';
for (var i = 0; i < ErrorSet.length; i++) {
ErrorMessage = ErrorMessage + ErrorSet[i].ErrorMessage + '\n';
ErrorSet[i].Field.className = 'elqFieldValidation';
}
if (ErrorMessage != '')
alert(ErrorMessage);
}
function ValidateRequiredField(Element, args) {
var elementVal=Element.value;
var testPass=true;
if (Element) {
if (args.Type == 'text') {
if (Element.value == null || Element.value == "") {
return false;
}
}
else if (args.Type == 'singlesel') {
if (Element.value == null || Element.value == "") {
return false;
}
}
else if (args.Type == 'multisel') {
var selCount=0;
for (var i=0; i<Element.length; i++) {
if (Element[i].selected && Element[i].value !='') {
selCount += 1;
}
}
if (selCount == 0)
return false;
}
}
else
testPass = false;
return testPass;
}
function ValidateEmailAddress(Element) {
var varRegExp='^[A-Z0-9!#\\$%&\'\\*\\+\\-/=\\?\\^_`\\{\\|\\}~][A-Z0-9!#\\$%&\'\\*\\+\\-/=\\?\\^_`\\{\\|\\}~\\.]{0,62}@([A-Z0-9](?:[A-Z0-9\\-]{0,61}[A-Z0-9])?(\\.[A-Z0-9](?:[A-Z0-9\\-]{0,61}[A-Z0-9])?)+)$';
if ((Element) && (Element.value != '')) {
var reg = new RegExp(varRegExp,"i");
var match = reg.exec(Element.value);
if ((match) && (match.length=3) && (match[1].length<=255) && ((match[2].length>=3) & (match[2].length<=7)))
return true;
}
return false;
}
function ValidateDataTypeLength(Element, args, ErrorMessage) {
var elementVal = Element.value;
var testPass = true;
if (Element) {
if (args.Type == 'text') {
if ((elementVal == '')) {
testPass = false;
}
if ((args.Minimum != '') && (elementVal.length < args.Minimum))
testPass = false;
if ((args.Maximum != '') && (elementVal.length > args.Maximum))
testPass = false;
}
else if (args.Type == 'numeric') {
if ((elementVal == '')) {
testPass = false;
}
if ((elementVal != '') && (elementVal != parseFloat(elementVal)))
testPass = false;
if (args.Minimum != '') {
if ((elementVal == '') || (parseFloat(elementVal) < args.Minimum))
testPass = false;
}
if (args.Maximum != '') {
if ((elementVal != '') && (parseFloat(elementVal) > args.Maximum))
testPass = false;
}
}
}
else
testPass = false;
return testPass;
}
function CheckElqForm(elqForm) {
var args = null;
var allValid = true;
if (elqForm == null) {
alert('Unable to execute form validation!\Unable to locate correct form');
return false;
}
ResetHighlight();
formField = new FieldObj();
formField.Field = elqForm.elements['FirstName'];
formField.ErrorMessage ='Form field First Name is required'
args = {'Type': 'text' };
if (formField.Field != null) {
if (!ValidateRequiredField(formField.Field, args)) {
errorSet.push(formField);
allValid = false;
}
}
formField = new FieldObj();
formField.Field = elqForm.elements['C_LastName'];
formField.ErrorMessage ='Form field Last Name is required'
args = {'Type': 'text' };
if (formField.Field != null) {
if (!ValidateRequiredField(formField.Field, args)) {
errorSet.push(formField);
allValid = false;
}
}
formField = new FieldObj();
formField.Field = elqForm.elements['C_Company'];
formField.ErrorMessage ='Form field Company is required'
args = {'Type': 'text' };
if (formField.Field != null) {
if (!ValidateRequiredField(formField.Field, args)) {
errorSet.push(formField);
allValid = false;
}
}
formField = new FieldObj();
formField.Field = elqForm.elements['C_EmailAddress'];
formField.ErrorMessage ='Form field Email Address is required'
args = {'Type': 'text' };
if (formField.Field != null) {
if (!ValidateRequiredField(formField.Field, args)) {
errorSet.push(formField);
allValid = false;
}
}
if (!allValid) {
DisplayErrorSet(errorSet);
return false;
}
return true;
}
function submitForm(elqForm) {
if (CheckElqForm(elqForm)) {
prepareSelectsForEloqua(elqForm);
fnPrepareCheckboxMatricesForEloqua(elqForm);
return true;
}
else { return false; }
}
function prepareSelectsForEloqua(elqForm) {
var selects = elqForm.getElementsByTagName("SELECT");
for (var i = 0; i < selects.length; i++) {
if (selects[i].multiple) {
createEloquaSelectField(elqForm, selects[i]);
}
}
return true;
}
function createEloquaSelectField(elqForm, sel) {
var inputName = sel.name;
var newInput = document.createElement('INPUT');
newInput.style.display = "none";
newInput.name = inputName;
newInput.value = "";
for (var i = 0; i < sel.options.length; i++) {
if (sel.options[i].selected) {
newInput.value += sel.options[i].value + "::";
}
}
if (newInput.value.length > 0) {
newInput.value = newInput.value.substr(0, newInput.value.length - 2);
}
sel.disabled = true;
newInput.id = inputName;
elqForm.insertBefore(newInput, elqForm.firstChild);
}
function fnPrepareCheckboxMatricesForEloqua(elqForm) {
var matrices = elqForm.getElementsByTagName('TABLE');
for (var i = 0; i < matrices.length; i++) {
var tableClassName = matrices[i].className;
if (tableClassName.match(/elqMatrix/)) {
if (fnDetermineMatrixType(matrices[i]).toLowerCase() == 'checkbox') {
if (matrices[i].rows[0].cells[0].childNodes.length == 1) {
if (matrices[i].rows[0].cells[0].childNodes[0].nodeName != '#text') {
fnCreateHorizontalMatrixCheckboxField(elqForm, matrices[i]);
}
else {
fnCreateVerticalMatrixCheckboxField(elqForm, matrices[i]);
}
}
}
}
}
return true;
}
function fnCreateVerticalMatrixCheckboxField(elqForm, matrix) {
var inputName = matrix.id + 'r' + 1;
var newInput = document.createElement('INPUT');
newInput.style.display = 'none';
newInput.name = inputName;
newInput.value = '';
var inputs = document.getElementsByName(inputName);
for (var i=0; i < inputs.length; i++) {
if (inputs[i].nodeName.toLowerCase() == 'input') {
if (inputs[i].checked == true) {
if (inputs[i].type.toLowerCase() == 'checkbox') {
newInput.value += inputs[i].value + '::';
inputs[i].disabled = true;
}
}
}
}
if (newInput.value.length > 0) {
newInput.value = newInput.value.substr(0, newInput.value.length - 2);
}
newInput.id = inputName;
elqForm.insertBefore(newInput, elqForm.firstChild);
matrix.disabled = true;
}
function fnCreateHorizontalMatrixCheckboxField(elqForm, matrix) {
for (var i=1; i < matrix.rows.length; i++) {
var inputs = document.getElementsByName(matrix.id + 'r' + i);
var oMatrixRow = matrix.rows[i];
var inputName = oMatrixRow.id;
var newInput = document.createElement('INPUT');
newInput.style.display = 'none';
newInput.name = inputName;
newInput.value = '';
for (var j=0; j < inputs.length; j++) {
if (inputs[j].nodeName.toLowerCase() == 'input') {
if (inputs[j].checked == true) {
if (inputs[i].type.toLowerCase() == 'checkbox') {
newInput.value += inputs[j].value + '::';
inputs[j].disabled = true;
}
}
}
}
if (newInput.value.length > 0) {
newInput.value = newInput.value.substr(0, newInput.value.length - 2);
}
newInput.id = inputName;
elqForm.insertBefore(newInput, elqForm.firstChild);
}
matrix.disabled = true;
}
function fnDetermineMatrixType(oTable) {
var oFirstMatrixInput = oTable.rows[1].cells[1].childNodes[0];
return oFirstMatrixInput.type;
}
</SCRIPT>
</head>
<body style='text-align:center;'>
<form name="CA_2013_Sem-Toronto-Board-of-trade" id="CA_2013_Sem-Toronto-Board-of-trade" onsubmit='return submitForm(this);' action="http://s2598.t.eloqua.com/e/f2" method="post">
<div>
<input type="hidden" name="elqFormName" value="CA_2013_Sem-Toronto-Board-of-trade">
<input type="hidden" name="elqSiteID" value="2598">
</div>
<TABLE style="WIDTH: 600px; HEIGHT: 100%; MARGIN-LEFT: auto; MARGIN-RIGHT: auto" id=PageTable >
<TBODY id=tableBody>
<TR style="WIDTH: 100%; HEIGHT: 100%" id=PageRow >
<TD id=pageData height="100%" width="100%">
<DIV style="POSITION: static; WIDTH: 100%; HEIGHT: 100%" id=MainDiv class="elqLayout">
<DIV style="Z-INDEX: 0; POSITION: static; WIDTH: 100%; CURSOR: default" id=ContainerDiv37 class="elqHeading" title="" >
<P align=right><IMG border=0 alt=ExclInvDistinguishedSpeakers_02 src="http://<elqDomain type=2/>/eloquaimages/clients/aonhewitt/{b8ec92f1-e0c0-4a71-8862-db8d593d858a}_exclinvdistinguishedspeakers_02.jpg" width=746 height=150 ><BR><FONT color=#f9f3f9>.</FONT></p></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv40 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label40 class="elqLabel" for=FirstName><FONT color=#5c555c size=3><STRONG>First Name</STRONG></FONT></LABEL></TD>
<TD><INPUT style="WIDTH: 275px" id=FirstName class="elqField" value="<span class="eloquaemail">FirstName</span>" size=40 name=FirstName ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo40 class="elqLabel" for=LabelTwo40>*</LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv27 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label27 class="elqLabel" for=C_LastName><FONT color=#5c555c size=3><STRONG>Last Name</STRONG></FONT></LABEL></TD>
<TD><INPUT style="WIDTH: 275px" id=C_LastName class="elqField" value="<span class="eloquaemail">LastName</span>" size=40 name=C_LastName ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo27 class="elqLabel" for=LabelTwo27>*</LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv28 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label28 class="elqLabel" for=C_Company><FONT color=#5c555c size=3><STRONG>Company</STRONG></FONT></LABEL></TD>
<TD><INPUT style="WIDTH: 275px" id=C_Company class="elqField" value="<span class="eloquaemail">Company</span>" size=40 name=C_Company ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo28 class="elqLabel" for=LabelTwo28>*</LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv29 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label29 class="elqLabel" for=C_EmailAddress><FONT color=#5c555c size=3><STRONG>Email Address</STRONG></FONT></LABEL></TD>
<TD><INPUT style="WIDTH: 275px" id=C_EmailAddress class="elqField" value="<span class="eloquaemail">EmailAddress</span>" size=40 name=C_EmailAddress ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo29 class="elqLabel" for=LabelTwo29>*</LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; WIDTH: 100%; CURSOR: default" id=ContainerDiv38 class="elqHeading" title="" ><BR><FONT color=#5c555c size=3 face=Arial><STRONG> Please check all sessions you plan to attend:</STRONG></FONT></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv44 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD style="VERTICAL-ALIGN: middle" class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label44 class="elqLabel" for=Session1>
<P style="MARGIN: 0px" align=right><STRONG><FONT color=#760e76 size=2>10:45-11:45 am </FONT></STRONG></p></LABEL></TD>
<TD><INPUT id=Session1 class="elqField" onclick="this.value='on'" value="" type=checkbox name=Session1 ></TD>
<TD style="WIDTH: 100%; VERTICAL-ALIGN: middle"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo44 class="elqLabel" for=LabelTwo44><FONT color=#4f4f4f size=2>Exclusive Meet and Greet with the Panelist at this Invitation-Only Reception</FONT></LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv35 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block" id=Label35 class="elqLabel" for=Session2><FONT color=#4f4f4f face=" Arial"><FONT color=#4f4f4f face=" Arial"><FONT color=#841284 face=" Arial">
<P style="MARGIN: 0px" align=right><FONT color=#760e76 size=2><STRONG>11:45-01:45 pm </STRONG></FONT></p></FONT></FONT></FONT></LABEL></TD>
<TD><INPUT id=Session2 class="elqField" onclick="this.value='on'" value="" type=checkbox name=Session2 ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo35 class="elqLabel" for=LabelTwo35><FONT color=#4f4f4f face=" Arial"><FONT color=#4f4f4f face=" Arial"><FONT color=#4f4f4f size=2 face=" Arial">Distinguished Speaker Panel Series: Panel Discussion and Luncheon</FONT></FONT></FONT></LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv36 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label36 class="elqLabel" for=Session3><FONT color=#4f4f4f size=3 face=" Arial"><FONT color=#4f4f4f size=3 face=" Arial"><FONT color=#760e76 size=2 face=" Arial">
<P style="MARGIN: 0px" align=right><STRONG>02:00-03:00 pm </STRONG></p></FONT></FONT></FONT></LABEL></TD>
<TD><INPUT id=Session3 class="elqField" onclick="this.value='on'" value="" type=checkbox name=Session3 ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo36 class="elqLabel" for=LabelTwo36><FONT color=#4f4f4f face=" Arial"><FONT color=#4f4f4f face=" Arial"><FONT color=#4f4f4f size=2 face=" Arial">Post Reception</FONT></FONT></FONT></LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; WIDTH: 100%; CURSOR: default" id=ContainerDiv47 class="elqTextArea" title="" ><FONT color=#fdfbfd size=1 face=Arial>.</FONT></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv30 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD style="VERTICAL-ALIGN: top" class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label30 class="elqLabel" for=talk-to-us>
<P align=right><FONT color=#5b555b size=2><STRONG>Notes</STRONG>: </FONT></p></LABEL></TD>
<TD><TEXTAREA style="WIDTH: 275px" id=talk-to-us class="elqField" cols=42 rows=2 name=talk-to-us ></TEXTAREA></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo30 class="elqLabel" for=LabelTwo30></LABEL></TD></TR></TBODY></TABLE></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; WIDTH: 100%; CURSOR: default" id=ContainerDiv48 class="elqTextArea" title="" ><FONT size=1 face=Arial></FONT></DIV>
<DIV style="Z-INDEX: 0; POSITION: static; DISPLAY: block; CURSOR: default" id=ContainerDiv33 >
<TABLE class="elqLayout" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class="LayoutTableRowStart"><LABEL style="WIDTH: 180px; DISPLAY: block; FLOAT: left" id=Label33 class="elqLabel" for=elqInput33> <BR><BR></LABEL></TD>
<TD><INPUT id=submit class="elqSubmit" value=Submit type=submit name=submit ></TD>
<TD style="WIDTH: 100%"><LABEL style="WIDTH: 100%; DISPLAY: block; FLOAT: left" id=LabelTwo33 class="elqLabel" for=LabelTwo33></LABEL></TD></TR></TBODY></TABLE></DIV></DIV></TD></TR></TBODY></TABLE>
</form>
</body>
</html>
Hi Sid,
I did have just a quick glance at your code,
In function
you are trying to get prepareSelectsForEloqua(elqForm)
elqForm.getElementsByTagName("SELECT");
But in your form html there is no SELECT element. That's why the flow is not going through at all it seems.
You may want to check that.
-
Hi Sid,
I did have just a quick glance at your code,
In function
you are trying to get prepareSelectsForEloqua(elqForm)
elqForm.getElementsByTagName("SELECT");
But in your form html there is no SELECT element. That's why the flow is not going through at all it seems.
You may want to check that.
Thanks for your reply, Rajesh. What do you suggest I add?
Sid Ouagague | Associate
Aon Hewitt | Digital and Social Media Marketing
225 King Street West | 14th Floor, Toronto ON M5V 3M2 Canada
t +1.416.263.7862 | m +1.647.402.4977 | f +1.416.227.5744
[email protected] | aonhewitt.com
Rajesh Talele <[email protected]>
Jan/25/2013 09:35 AM PST
Please respond to
To
Sid Ouagague/ACW/CA/AON
cc
Subject
Re: - Extending Eloqua 10 Form Validation
Extending Eloqua 10 Form Validation
new comment by Rajesh Talele - View all comments on this blog post
Hi Sid,
I did have just a quick glance at your code,
In function
you are trying to get prepareSelectsForEloqua(elqForm)
elqForm.getElementsByTagName("SELECT");
But in your form html there is no SELECT element. That's why the flow is
not going through at all it seems.
You may want to check that.
Reply to this email to respond to Rajesh Talele's comment.
**********************************************************************************
This communication (and any attachments) is directed in confidence to the addressee(s) listed above, and may not otherwise be distributed, copied or used. The contents of this communication may also be subject to privilege, and all rights to that privilege are expressly claimed and not waived. If you have received this communication in error, please notify us by reply e-mail or by telephone and delete this communication (and any attachments) without making a copy. Thank you.
***************
La présente communication (et tout fichier rattaché) s'adresse uniquement au(x) destinataire(s) précité(s) et ne peut être autrement distribuée, copiée ou utilisée. Le contenu de cette communication peut être assujetti au privilège. Tout droit à ce privilège est expressément revendiqué et nullement abandonné. Si vous avez reçu cette communication par erreur, veuillez nous en avertir immédiatement en répondant à ce courriel ou en nous appelant. Veuillez également effacer cette communication (et tout fichier rattaché) sans en conserver une copie. Merci.
-
Thanks for your reply, Rajesh. What do you suggest I add?
Sid Ouagague | Associate
Aon Hewitt | Digital and Social Media Marketing
225 King Street West | 14th Floor, Toronto ON M5V 3M2 Canada
t +1.416.263.7862 | m +1.647.402.4977 | f +1.416.227.5744
[email protected] | aonhewitt.com
Rajesh Talele <[email protected]>
Jan/25/2013 09:35 AM PST
Please respond to
To
Sid Ouagague/ACW/CA/AON
cc
Subject
Re: - Extending Eloqua 10 Form Validation
Extending Eloqua 10 Form Validation
new comment by Rajesh Talele - View all comments on this blog post
Hi Sid,
I did have just a quick glance at your code,
In function
you are trying to get prepareSelectsForEloqua(elqForm)
elqForm.getElementsByTagName("SELECT");
But in your form html there is no SELECT element. That's why the flow is
not going through at all it seems.
You may want to check that.
Reply to this email to respond to Rajesh Talele's comment.
**********************************************************************************
This communication (and any attachments) is directed in confidence to the addressee(s) listed above, and may not otherwise be distributed, copied or used. The contents of this communication may also be subject to privilege, and all rights to that privilege are expressly claimed and not waived. If you have received this communication in error, please notify us by reply e-mail or by telephone and delete this communication (and any attachments) without making a copy. Thank you.
***************
La présente communication (et tout fichier rattaché) s'adresse uniquement au(x) destinataire(s) précité(s) et ne peut être autrement distribuée, copiée ou utilisée. Le contenu de cette communication peut être assujetti au privilège. Tout droit à ce privilège est expressément revendiqué et nullement abandonné. Si vous avez reçu cette communication par erreur, veuillez nous en avertir immédiatement en répondant à ce courriel ou en nous appelant. Veuillez également effacer cette communication (et tout fichier rattaché) sans en conserver une copie. Merci.
Not perfect clean javascript but wanted to give a pointer. Why not just keep things simple and add code such as following to your CheckElqForm function?
formField = new FieldObj();
formField.Field1 = elqForm.elements['Session1'];
formField.Field2 = elqForm.elements['Session2'];
formField.Field3 = elqForm.elements['Session3'];
formField.ErrorMessage ='Please select atleast 1 session.';
if (!(formField.Field1.checked) || (formField.Field2.checked) || (formField.Field3.checked))
{
alert("Please select at least 1 session.");
errorSet.push(formField);
allValid = false;
}
-
Not perfect clean javascript but wanted to give a pointer. Why not just keep things simple and add code such as following to your CheckElqForm function?
formField = new FieldObj();
formField.Field1 = elqForm.elements['Session1'];
formField.Field2 = elqForm.elements['Session2'];
formField.Field3 = elqForm.elements['Session3'];
formField.ErrorMessage ='Please select atleast 1 session.';
if (!(formField.Field1.checked) || (formField.Field2.checked) || (formField.Field3.checked))
{
alert("Please select at least 1 session.");
errorSet.push(formField);
allValid = false;
}
Will test. Thanks. Lot.
Sid Ouagague | Associate
Aon Hewitt | Marketing and Communications
225 King Street West | 15th Floor, Toronto ON M5V 3M2 Canada
t +1.416.263.7862 | m +1.647.402.4977 | f +1.416.227.5744
[email protected] | aonhewitt.com
-
Sorry Rajesh. I pasted code below just under the emailaddress validation script, but that did not seem to do the trick for me.
}
}
formField = new FieldObj();
formField.Field1 = elqForm.elements['Session1'];
formField.Field2 = elqForm.elements['Session2'];
formField.Field3 = elqForm.elements['Session3'];
formField.ErrorMessage ='Please select atleast 1 session.';
if (!(formField.Field1.checked) || (formField.Field2.checked) || (formField.Field3.checked))
{
alert("Please select at least 1 session.");
errorSet.push(formField);
allValid = false;
}
}
-
Rajesh...what do you think of this?
Only problem...I need your help with just script I can insert into Eloqua form header, if possible. Thank you
jquery - validation for at least one checkbox - Stack Overflow
-
It's now working perfect! Here is what I did:
round line 182, you’ll find the following code
if (!allValid) {
DisplayErrorSet(errorSet);
return false;
}
Just prior to that, I added the following code:
formField = new FieldObj();
formField.Field = elqForm.elements['Session1'];
validate = formField.Field.value;
formField.Field = elqForm.elements['Session2'];
validate += formField.Field.value;
formField.Field = elqForm.elements['Session3'];
validate += formField.Field.value;
formField.ErrorMessage ='You must select one or more of the sessions'
args = {'Type': 'checkbox' };
if (validate == "") {
errorSet.push(formField);
allValid = false;
}
-
The LiveValidation library also has built-in a build in function called for validating checkboxes. To validate a single checkbox or at least one checkbox in a group is checked, you can use the code:
var field3 = new LiveValidation("field3", {validMessage: "", onlyOnSubmit: true});field3.add(Validate.Acceptance, {failureMessage:"This field is required"});
This will ellimnate the need to write a custom validation function and make the code a little easier to mantain. Documentation for other built-in LiveValidation functions can be found at LiveValidation - Documentation
Just to expand on my earlier comment, I have put together a quick example which uses the livevalidation's built-in checkbox validation. This script can run from the JS panel in the page header scripts on an E10 landing page.
/*This line defines IDs for all of the checkbox fields on the form. By default, checkbox fields on E10 forms don't have IDs. The IDs that this scrip assigns will be the same as the checkboxes HTML names*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function() {
$("form input").each(function(i) {
if($(this).attr("type")==="checkbox"){
$(this).attr("id", $(this).attr("name"));
}});
/*adds validation to checkboxes. Replace "checkbox1" with the HTML name of your checkbox field.*/
var checkbox1validation = new LiveValidation("singleCheckbox", {validMessage: "", onlyOnBlur: true});checkbox1validation.add(Validate.Acceptance, {failureMessage:"This Field is Required"});
});
Post edited by Unknown User on -
Just to expand on my earlier comment, I have put together a quick example which uses the livevalidation's built-in checkbox validation. This script can run from the JS panel in the page header scripts on an E10 landing page.
/*This line defines IDs for all of the checkbox fields on the form. By default, checkbox fields on E10 forms don't have IDs. The IDs that this scrip assigns will be the same as the checkboxes HTML names*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function() {
$("form input").each(function(i) {
if($(this).attr("type")==="checkbox"){
$(this).attr("id", $(this).attr("name"));
}});
/*adds validation to checkboxes. Replace "checkbox1" with the HTML name of your checkbox field.*/
var checkbox1validation = new LiveValidation("singleCheckbox", {validMessage: "", onlyOnBlur: true});checkbox1validation.add(Validate.Acceptance, {failureMessage:"This Field is Required"});
});
Ryan, thanks for the code. It seems really simple, but somehow I can't get it to work on my landing page. I even changed the HTML name of my checkbox field to be "checkbox1" and it still allows the form to be submitted without anything checked. Is there anything I have to do within the form itself? Here's the code I'm using in the JS Editor.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function() {
$("form input").each(function(i) {
if($(this).attr("type")==="checkbox"){
$(this).attr("id", $(this).attr("name"));
}})
});
var checkbox1validation = new LiveValidation("checkbox1", {validMessage: "", onlyOnBlur: true});checkbox1validation.add(Validate.Acceptance, {failureMessage:"This Field is Required"});
});</script>
-
Hi , This Custom form validation will work only on Upload HTML. Its not working in Template i.e E10 landing page work space. Please any one help how to implement Custom validation in E10 work space.
Thanks in Advance
Dhina
-
Hi , This Custom form validation will work only on Upload HTML. Its not working in Template i.e E10 landing page work space. Please any one help how to implement Custom validation in E10 work space.
Thanks in Advance
Dhina
Hi Dhina,
The code above should work in the E10 JavaScript workspace. Do you ahve any other custom written JavaScript on your page that might be interfering with it?
-
@Matt Jacobson @Dhina garan Sorry, it looks like there was a slight typo in my script. I have updated the post above. Please try the revised JavaScript.
-
Hey @Ryan Wheler does this: var field3 = new LiveValidation("field3", {validMessage: "", onlyOnSubmit: true});field3.add(Validate.Acceptance, {failureMessage:"This field is required"}); work for radio buttons as well?
-
Hey @Ryan Wheler does this: var field3 = new LiveValidation("field3", {validMessage: "", onlyOnSubmit: true});field3.add(Validate.Acceptance, {failureMessage:"This field is required"}); work for radio buttons as well?
@Cullen Ruffner No, I don't believe the livevalidation library has native support for radio buttons; the Validate.Acceptance function is specifically for checkboxes.
-
The LiveValidation library also has built-in a build in function called for validating checkboxes. To validate a single checkbox or at least one checkbox in a group is checked, you can use the code:
var field3 = new LiveValidation("field3", {validMessage: "", onlyOnSubmit: true});field3.add(Validate.Acceptance, {failureMessage:"This field is required"});
This will ellimnate the need to write a custom validation function and make the code a little easier to mantain. Documentation for other built-in LiveValidation functions can be found at LiveValidation - Documentation
Hi @Ryan Wheler
I have tried your code to have my single checkbox to be checked in order to validate the form, but it doesn't work. Would you have time to help me?
-
Just to expand on my earlier comment, I have put together a quick example which uses the livevalidation's built-in checkbox validation. This script can run from the JS panel in the page header scripts on an E10 landing page.
/*This line defines IDs for all of the checkbox fields on the form. By default, checkbox fields on E10 forms don't have IDs. The IDs that this scrip assigns will be the same as the checkboxes HTML names*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function() {
$("form input").each(function(i) {
if($(this).attr("type")==="checkbox"){
$(this).attr("id", $(this).attr("name"));
}});
/*adds validation to checkboxes. Replace "checkbox1" with the HTML name of your checkbox field.*/
var checkbox1validation = new LiveValidation("singleCheckbox", {validMessage: "", onlyOnBlur: true});checkbox1validation.add(Validate.Acceptance, {failureMessage:"This Field is Required"});
});
How do you make this work with multiple checkboxes? They need to check yes or no (for example)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function() {
$("form input").each(function(i) {
if($(this).attr("type")==="checkbox"){
$(this).attr("id", $(this).attr("name"));
}});
/*adds validation to checkboxes. Replace "checkbox1" with the HTML name of your checkbox field.*/
var checkbox1validation = new LiveValidation("singleCheckbox", {validMessage: "", onlyOnBlur: true});checkbox1validation.add(Validate.Acceptance, {failureMessage:"This Field is Required"});
});
-
@Ryan Wheler and @Mark Halliday
I am having issues with junk form submissions. I used the hidden field to catch spam and this is not working is there a simple solution I can implement using JV scripts?
Thanks
-
@Mark Halliday or @Ryan Wheler -- I am currently using validate.Acceptance to make a single checkbox required. However, in my form the checkbox only shows after you've selected a specific value in a dropdown field. I want the checkbox to be required if the specific value is selected and it displays on the form, but not required if it does not display. Is this possible? Thanks!
-
@Ryan Wheler and @Mark Halliday
I am having issues with junk form submissions. I used the hidden field to catch spam and this is not working is there a simple solution I can implement using JV scripts?
Thanks
Hi Nadine,
I don't think there is a simple tweak that can be made - the spambots are growing more sophisticated. One possible solution would be to borrow from some of the techniques wordpress users are taking:
- Create a honey pot with the same name as one of the default fields. Make it look legit with a label. If you are using bootstrap, make it look perfectly legit with label and icon. We don’t want to alert the bot in any way that this field is special.
- Place the honey pot in the form in a random location. Keep moving it around between the valid fields. We don’t want the spam bot writer to simply ignore the same field based on index.
- Rename your default fields to something random. Keep in mind you have to convert it back to it’s proper name on the server side. By naming the default fields to something random, the valid fields now begin to look like honey pots to the spam bot.
- Add an expiration to your form. This will keep spam bots from using the same fields and submitting the form later.
- You have to hide the honey pot to keep the valid users from filling it out. In my form, I hide the honeypot with JavaScript. It is still valid for you to hide this field with CSS. If you use CSS, your best bet is to use a class that contains a random word. In other words, if you call it “hide”, then the spam bot author will pick it out easily.
Now some of this is easier said than done. But I can take a pass at something in a couple of week (end of quarter time). If you have an example form, just DM me with the link.
(credit for the bullets: http://www.smartfile.com/blog/captchas-dont-work-how-to-trick-spam-bots-with-a-smarter-honey-pot/#sthash.c99DmVZz.dpuf )