Extending Eloqua 10 Form Validation

markhalliday · Jun 17, 2014 7:49AM

@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!

I think it is possible; I've seen some scripts that accomplish something similar (for country/state, with a a conditional checkbox). I'll take a look tonight and see what can be done.

erika.wong · Jun 17, 2014 9:58AM

I think it is possible; I've seen some scripts that accomplish something similar (for country/state, with a a conditional checkbox). I'll take a look tonight and see what can be done.

Thanks for replying, but actually, I played around a little more with Live Validation after I posted yesterday and I think I figured it out! Here's what I used:

$('#DropdownMenu').change(function() {

if ($("#DropdownMenu").val() == "SelectionA") {

var ConditionalCheckbox = new LiveValidation( 'ConditionalCheckbox', {onlyOnSubmit: true } );

ConditionalCheckbox.add(Validate.Acceptance,{failureMessage:"Your consent is necessary for the completion of this form."} );

added = true;

}

else {

ConditionalCheckbox.disable();

added = false;

}

});

Let me know what you think -- so far so good as I'm testing it.

markhalliday · Jun 17, 2014 10:10AM

Thanks for replying, but actually, I played around a little more with Live Validation after I posted yesterday and I think I figured it out! Here's what I used:
$('#DropdownMenu').change(function() {
if ($("#DropdownMenu").val() == "SelectionA") {
      var ConditionalCheckbox = new LiveValidation( 'ConditionalCheckbox', {onlyOnSubmit: true } );
ConditionalCheckbox.add(Validate.Acceptance,{failureMessage:"Your consent is necessary for the completion of this form."} );
          added = true;
}
else {
          ConditionalCheckbox.disable();
          added = false;
}
});
Let me know what you think -- so far so good as I'm testing it.

Nice - without testing it, that looks like the right direction. The part that was concerning me was the ability to toggle off the validation when the dropdown value changes, but if that's working for you then I think you've got it!

Zubin Gada · Feb 13, 2015 12:50PM

Thanks, this is still coming to good use!

stella_f · Sep 28, 2015 9:21PM

I have tried this code but it does not work. May be it is too old code for Elouqa 10 nowaday.

After I modified the code and put it back into Eloqua and saved. The code will be changed to another codes which is not the same as the one I put in before.

Anyone has any good suggestion to make validation for checkboxes (for one choice only) or Radio button (yes or no)?

markhalliday · Sep 30, 2015 4:21PM

I have tried this code but it does not work. May be it is too old code for Elouqa 10 nowaday.
After I modified the code and put it back into Eloqua and saved. The code will be changed to another codes which is not the same as the one I put in before.
Anyone has any good suggestion to make validation for checkboxes (for one choice only) or Radio button (yes or no)?

Hi Stella,

I haven't used this code in some time, but if you can tell me how you're trying to use the code I can see if it still works. If you could let me know if this is a form you're using with an Eloqua landing page or if it's being hosted from your web site for example. If you could show me what code is changing that'd be great, too.

- Mark

stella_f · Oct 2, 2015 1:49AM

Hi Mark

It works when I just copy the code from the example as below:

<html>

<head><title>Checkbox Validate</title></head>

<body>

<div><form method="post" name="bPCheckboxValidate-1348667791597" action="https://s1935121708.t.eloqua.com/e/f2" id="form18" ><input value="bPCheckboxValidate-1348667791597" type="hidden" name="elqFormName" /><input value="1935121708" type="hidden" name="elqSiteId" /><input name="elqCampaignId" type="hidden" /><div id="formElement0" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px; clear: both" ><label style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >Email Address<span style="color: red !important; display: inline; float: none; font-weight: bold; margin: 0pt 0pt 0pt; padding: 0pt 0pt 0pt" >*</span></label><div class="form-input-wrapper" style="width: 96%" ><input id="field0" value="" type="text" name="emailAddress" class="" style="width: 50%" /></div></div><div id="formElement1" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px; clear: both" ><label style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >First Name</label><div class="form-input-wrapper" style="width: 96%" ><input id="field1" value="" type="text" name="firstName" class="" style="width: 50%" /></div></div><div id="formElement2" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px; clear: both" ><label style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >Last Name</label><div class="form-input-wrapper" style="width: 96%" ><input id="field2" value="" type="text" name="lastName" class="" style="width: 50%" /></div></div><div id="formElement3" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px; clear: both" ><label style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" id="cb_err_msg" >Checkboxes</label><div class="form-input-wrapper" style="width: 96%" ><div style="float: left; display: block; width: 75%" ><span class="" style="display: block; margin: 0pt 7px 0pt 0pt; width: 100%; clear: both" ><label style="display: block; float: left; padding-right: 10px; padding-left: 22px; text-indent: -22px" ><input id="field3" value="First" name="checkboxes" type="checkbox" style="vertical-align: middle; margin-right: 7px" /><span style="vertical-align: middle" >First</span></label></span><span class="" style="display: block; margin: 0pt 7px 0pt 0pt; width: 100%; clear: both" ><label style="display: block; float: left; padding-right: 10px; padding-left: 22px; text-indent: -22px" ><input id="field3" value="Second" name="checkboxes" type="checkbox" style="vertical-align: middle; margin-right: 7px" /><span style="vertical-align: middle" >Second</span></label></span><span class="" style="display: block; margin: 0pt 7px 0pt 0pt; width: 100%; clear: both" ><label style="display: block; float: left; padding-right: 10px; padding-left: 22px; text-indent: -22px" ><input id="field3" value="Third" name="checkboxes" type="checkbox" style="vertical-align: middle; margin-right: 7px" /><span style="vertical-align: middle" >Third</span></label></span></div></div></div><div id="formElement4" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px; clear: both" ><div class="form-input-wrapper" style="width: 96%" ><input id="field4" value="Submit" type="submit" style="font-size: 100%; width: 100px; height: 24px" /></div></div></form><script src="https://img.en25.com/i/livevalidation_standalone.compressed.js" type="text/javascript" ></script><style type="text/css" media="screen" >.LV_validation_message{ font-weight:bold; margin: 0 0 0 5px; }

.LV_valid{ color:#00CC00; display:none; }

.LV_invalid{ color:#CC0000; font-size:10px; }

.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active { border: 1px solid #00CC00; }

.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { border: 1px solid #CC0000; }</style><script type="text/javascript" >

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 == 1)? true : false;

}

</script></div>

</body>

</html>

But after I create a new form in Eloqua and put in those new codes, it does not work:

.LV_validation_message{ font-weight:bold; margin: 0 0 0 5px; }

.LV_valid{ color:#00CC00; display:none; }

.LV_invalid{ color:#CC0000; font-size:10px; }

.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active { outline: 1px solid #00CC00; }

.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { outline: 1px solid #CC0000; }</style>

function isValidField(){

var selectd_items = 0;

var numboxes = document.forms['testCheckboxValidation'].checkboxes.length;

for (var i=0; i < numboxes; i++)

if(document.forms['testCheckboxValidation'].checkboxes[i].checked)

selectd_items++;

return (selectd_items == 1)? true : false;

}

var dom0 = document.querySelector('#form9945 #field0');var field0 = new LiveValidation(dom0, {validMessage: "", onlyOnBlur: true});field0.add(Validate.Presence, {failureMessage:"This field is required"});field0.add(Validate.Format, {pattern: /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, failureMessage: "A valid email address is required"});var dom1 = document.querySelector('#form9945 #field1');var field1 = new LiveValidation(dom1, {validMessage: "", onlyOnBlur: true});var dom2 = document.querySelector('#form9945 #field2');var field2 = new LiveValidation(dom2, {validMessage: "", onlyOnBlur: true});var field3 = new LiveValidation( "field3", {onlyOnSubmit: true, insertAfterWhatNode:"cb_err_msg" } );field3.add( Validate.Custom, { against: function(value){ return isValidField(value) }, failureMessage: "Please Select one" } );

I put this in Eloqua Form:

https://secure.p01.eloqua.com/Main.aspx#forms&id=9945

Landing Form page:

http://insight.aon.com/LP=10352

Hoping you can help me to see what is going wrong.

Thanks and regards

Stella

markhalliday · Oct 2, 2015 10:57AM

Hi Mark
It works when I just copy the code from the example as below:
<html>
<head><title>Checkbox Validate</title></head>
<body>
<div><form method="post" name="bPCheckboxValidate-1348667791597" action="https://s1935121708.t.eloqua.com/e/f2" id="form18" ><input value="bPCheckboxValidate-1348667791597" type="hidden" name="elqFormName" /><input value="1935121708" type="hidden" name="elqSiteId" /><input name="elqCampaignId" type="hidden" /><div id="formElement0" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px; clear: both" ><label style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >Email Address<span style="color: red !important; display: inline; float: none; font-weight: bold; margin: 0pt 0pt 0pt; padding: 0pt 0pt 0pt" >*</span></label><div class="form-input-wrapper" style="width: 96%" ><input id="field0" value="" type="text" name="emailAddress" class="" style="width: 50%" /></div></div><div id="formElement1" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px; clear: both" ><label style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >First Name</label><div class="form-input-wrapper" style="width: 96%" ><input id="field1" value="" type="text" name="firstName" class="" style="width: 50%" /></div></div><div id="formElement2" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px; clear: both" ><label style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" >Last Name</label><div class="form-input-wrapper" style="width: 96%" ><input id="field2" value="" type="text" name="lastName" class="" style="width: 50%" /></div></div><div id="formElement3" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px; clear: both" ><label style="display: block; line-height: 150%; padding: 1px 0pt 3px; white-space: nowrap" id="cb_err_msg" >Checkboxes</label><div class="form-input-wrapper" style="width: 96%" ><div style="float: left; display: block; width: 75%" ><span class="" style="display: block; margin: 0pt 7px 0pt 0pt; width: 100%; clear: both" ><label style="display: block; float: left; padding-right: 10px; padding-left: 22px; text-indent: -22px" ><input id="field3" value="First" name="checkboxes" type="checkbox" style="vertical-align: middle; margin-right: 7px" /><span style="vertical-align: middle" >First</span></label></span><span class="" style="display: block; margin: 0pt 7px 0pt 0pt; width: 100%; clear: both" ><label style="display: block; float: left; padding-right: 10px; padding-left: 22px; text-indent: -22px" ><input id="field3" value="Second" name="checkboxes" type="checkbox" style="vertical-align: middle; margin-right: 7px" /><span style="vertical-align: middle" >Second</span></label></span><span class="" style="display: block; margin: 0pt 7px 0pt 0pt; width: 100%; clear: both" ><label style="display: block; float: left; padding-right: 10px; padding-left: 22px; text-indent: -22px" ><input id="field3" value="Third" name="checkboxes" type="checkbox" style="vertical-align: middle; margin-right: 7px" /><span style="vertical-align: middle" >Third</span></label></span></div></div></div><div id="formElement4" class="sc-view form-design-field sc-static-layout sc-regular-size" style="left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 6px 5px 9px 9px; clear: both" ><div class="form-input-wrapper" style="width: 96%" ><input id="field4" value="Submit" type="submit" style="font-size: 100%; width: 100px; height: 24px" /></div></div></form><script src="https://img.en25.com/i/livevalidation_standalone.compressed.js" type="text/javascript" ></script><style type="text/css" media="screen" >.LV_validation_message{ font-weight:bold; margin: 0 0 0 5px; }
.LV_valid{ color:#00CC00; display:none; }
.LV_invalid{ color:#CC0000; font-size:10px; }
.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active { border: 1px solid #00CC00; }
.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { border: 1px solid #CC0000; }</style><script type="text/javascript" >
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 == 1)? true : false;
}
var field0 = new LiveValidation("field0", {validMessage: "", onlyOnBlur: true});field0.add(Validate.Presence, {failureMessage:"This field is required"});var field1 = new LiveValidation("field1", {validMessage: "", onlyOnBlur: true});var field2 = new LiveValidation("field2", {validMessage: "", onlyOnBlur: true});var field3 = new LiveValidation( "field3", {onlyOnSubmit: true, insertAfterWhatNode:"cb_err_msg" } );field3.add( Validate.Custom, { against: function(value){ return isValidField(value) }, failureMessage: "Please Select .." } );

</script></div>
                  </body>
                  </html>
But after I create a new form in Eloqua and put in those new codes, it does not work:
<style type="text/css" media="screen"> /* RESET */ .elq-form * { margin: 0; padding: 0;}.elq-form input, textarea { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} .elq-form button,input[type=reset],input[type=button],input[type=submit],input[type=checkbox],input[type=radio],select { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}/* GENERIC */.elq-form input { height: 16px; line-height: 16px;}.elq-form .item-padding { padding:6px 5px 9px 9px;}.elq-form .pp-group { padding:0px 5px 0px 9px;}.elq-form .pp-field { padding:6px 0px 9px 0px;}.elq-form .field-wrapper.individual {    float: left;    width: 100%; clear: both;}.elq-form .field-p { position: relative; margin: 0; padding: 0;}.elq-form .zIndex-fix { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0;}.elq-form .field-design { position:absolute; z-index:2; top:0; left:0; right:0; bottom:0; margin:0; padding:0;}.elq-form .no-fields-prompt { float: left; width: 100%; height: 150px; padding-top: 50px; clear: both;}/* SECTION BREAKS */.elq-form .section-break { float:left; width: 97%; margin-right:2%; margin-left:1%; padding-bottom:6px;}.elq-form .section-break .heading { width:100%; font-weight: bold; margin:0; padding:0;}/* LABEL */.elq-form .required { color: red !important; display: inline; float: none; font-weight: bold; margin: 0pt 0pt 0pt; padding: 0pt 0pt 0pt;}/* FIELD GROUP */.elq-form .field-group { float: left; clear: both;}.elq-form .field-group.large { width:100%;}.elq-form .field-group.medium { width:51%;}.elq-form .field-group.small { width:31%;}.elq-form .field-group .label { float:left; width:97%; margin-right:2%; margin-left:1%; padding-bottom:6px; font-weight: bold;}.elq-form .progressive-profile .pp-inner { float: left; clear: both;}.elq-form .progressive-profile .pp-inner.large { width:100%;}.elq-form .progressive-profile .pp-inner.medium { width:51%;}.elq-form .progressive-profile .pp-inner.small { width:31%;}/* RADIO */.elq-form .radio-option { display: inline-block;}.elq-form .radio-option .label { display:block; float:left; padding-right:10px; padding-left:22px; text-indent:-22px;}.elq-form .radio-option .input { vertical-align:middle; margin-right:7px;}.elq-form .radio-option .inner { vertical-align:middle;}/* CHECKBOX */.elq-form .checkbox-span { display:inline-block;}.elq-form .checkbox-label { margin-left:4px;}/* INPUT */.elq-form .accept-default { width:100%;}/* SIZING */.elq-form .field-style { float:left; margin-right:2%; margin-left:2%;}.elq-form .field-style._25 { width:21%;}.elq-form .field-style._50 { width:46%;}.elq-form .field-style._50_left { clear:left; width:46%;}.elq-form .field-style._75 { width:71%;}.elq-form .field-style._100 { width:96%;}.elq-form .field-size-top-small { width:30%;}.elq-form .field-size-top-medium { width:75%;}.elq-form .field-size-top-large { width:100%;}.elq-form .field-size-left-small { width:21%;}.elq-form .field-size-left-medium { width:46%;}.elq-form .field-size-left-large { width:60%;}/* INSTRUCTIONS */.elq-form .instructions.default { color:#444444; display:block; font-size:10px; padding:6px 0pt 3px;}.elq-form .instructions.group { float:left; width:97%; margin-right:2%; margin-left:2%; padding:6px 0pt 3px; color:#444444; display:block; font-size:10px;}.elq-form .instructions.left-single { margin:0 0 0 33%;}.elq-form .instructions-other {   margin:0;}/* POSITIONING */.elq-form .label-position.left { display:block; line-height:150%;    padding:1px 0pt 3px;    float:left;    width:31%;    margin:0pt 15px 0pt 0pt;    word-wrap:break-word;}.elq-form .label-position.top { display:block; line-height:150%;    padding:1px 0pt 3px;    white-space:nowrap;}.elq-form .label-position.alignment-left { text-align: left;}.elq-form .label-position.alignment-right { text-align: right;}/* LIST ORDER */.elq-form .list-order { display:block;}.elq-form .list-order.oneColumn { margin:0pt 7px 0pt 0pt; width:100%; clear:both;}.elq-form .list-order.twoColumn { float:left; margin:0pt 7px 0pt 0pt; width:38%;}.elq-form .list-order.threeColumn { float:left; margin:0pt 7px 0pt 0pt; width:30%;}.elq-form .list-order.oneColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:100%;}.elq-form .list-order.twoColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:38%;}.elq-form .list-order.threeColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:30%;}/* GRID STYLE */.elq-form .grid-style { display:inline; float:left;      margin-left:2%;      margin-right:2%;}.elq-form .grid-style._25 {      width:21%;}.elq-form .grid-style._50 { width:46%;}.elq-form .grid-style._75 {      width:71%;}.elq-form .grid-style._100 {      width:96%; }</style><div><form method="post" name="testCheckboxValidation" action="https://s526.t.eloqua.com/e/f2" id="form9945" class="elq-form" ><input value="testCheckboxValidation" type="hidden" name="elqFormName" /><input value="526" type="hidden" name="elqSiteId" /><input name="elqCampaignId" type="hidden" /><div id="formElement0" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size" ><div class="field-wrapper" ></div><div class="individual field-wrapper" ><div class="_100 field-style" ><p class="field-p" ><label for="field0" class="label-position top " >Email Address<span class="required" >*</span></label><input id="field0" name="emailAddress" type="text" value="<eloqua type='emailfield' syntax='Company' />" class="field-size-top-large" /></p></div></div></div><div id="formElement1" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size" ><div class="field-wrapper" ></div><div class="individual field-wrapper" ><div class="_100 field-style" ><p class="field-p" ><label for="field1" class="label-position top " >First Name</label><input id="field1" name="firstName" type="text" value="" class="field-size-top-large" /></p></div></div></div><div id="formElement2" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size" ><div class="field-wrapper" ></div><div class="individual field-wrapper" ><div class="_100 field-style" ><p class="field-p" ><label for="field2" class="label-position top " >Last name</label><input id="field2" name="lastName" type="text" value="" class="field-size-top-large" /></p></div></div></div><div id="formElement3" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size" ><div class="field-wrapper" ></div><div class="individual field-wrapper" ><div class="_100 field-style" ><p class="field-p" ><label for="field3" class="label-position top "id="cab_err_msg" >Checkboxes</label><span class="radio-option field-size-top-large" ><span class="list-order oneColumn" ><label class="label" ><input name="checkboxes" type="checkbox" value="First" class="input" /><span class="inner" >First</span></label></span><span class="list-order oneColumn" ><label class="label" ><input name="checkboxes" type="checkbox" value="Second" class="input" /><span class="inner" >Second</span></label></span><span class="list-order oneColumn" ><label class="label" ><input name="checkboxes" type="checkbox" value="Third" class="input" /><span class="inner" >Third</span></label></span></span></p></div></div></div><div id="formElement4" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size" ><div class="field-wrapper" ></div><div class="individual field-wrapper" ><div class="_100 field-style" ><p class="field-p" ><input type="submit" onclick="this.disabled=true;return true;" value="Submit" class="submit-button" style="font-size: 100%; height: 24px; width: 100px" /></p></div></div></div></form><script src="https://img.en25.com/i/livevalidation_standalone.compressed.js" type="text/javascript" ></script><style type="text/css" media="screen" >
.LV_validation_message{ font-weight:bold; margin: 0 0 0 5px; }
.LV_valid{ color:#00CC00; display:none; }
.LV_invalid{ color:#CC0000; font-size:10px; }
.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active { outline: 1px solid #00CC00; }
.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { outline: 1px solid #CC0000; }</style>
<script type="text/javascript" >
function isValidField(){
var selectd_items = 0;

var numboxes = document.forms['testCheckboxValidation'].checkboxes.length;

for (var i=0; i < numboxes; i++)
      if(document.forms['testCheckboxValidation'].checkboxes[i].checked)
      selectd_items++;

return (selectd_items == 1)? true : false;
}
var dom0 = document.querySelector('#form9945 #field0');var field0 = new LiveValidation(dom0, {validMessage: "", onlyOnBlur: true});field0.add(Validate.Presence, {failureMessage:"This field is required"});field0.add(Validate.Format, {pattern: /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, failureMessage: "A valid email address is required"});var dom1 = document.querySelector('#form9945 #field1');var field1 = new LiveValidation(dom1, {validMessage: "", onlyOnBlur: true});var dom2 = document.querySelector('#form9945 #field2');var field2 = new LiveValidation(dom2, {validMessage: "", onlyOnBlur: true});var field3 = new LiveValidation( "field3", {onlyOnSubmit: true, insertAfterWhatNode:"cb_err_msg" } );field3.add( Validate.Custom, { against: function(value){ return isValidField(value) }, failureMessage: "Please Select one" } );
function resetSubmitButton(e){ var submitButtons = e.target.form.getElementsByClassName('submit-button'); for(var i=0;i<submitButtons.length;i++){ submitButtons[i].disabled = false; } }function addChangeHandler(elements){ for(var i=0; i<elements.length; i++){   elements[i].addEventListener('change', resetSubmitButton); } }var form = document.getElementById('form9945'); addChangeHandler(form.getElementsByTagName('input')); addChangeHandler(form.getElementsByTagName('select')); addChangeHandler(form.getElementsByTagName('textarea'));</script></div>
I put this in Eloqua Form:
https://secure.p01.eloqua.com/Main.aspx#forms&id=9945
Landing Form page:
http://insight.aon.com/LP=10352
Hoping you can help me to see what is going wrong.
Thanks and regards
Stella

Hi Stella,

I found the problem and it requires two changes.

In the three checkbox input fields, you'll need to add id="field3" this is the ID the javascript validation is looking for. Right now there is no id specified
In the JavaScript, insertAfterWhatNode:"cb_err_msg" - the value needs to be changed to match your error message label. So change it to cab_err_msg

I was able to get it to work after that - I for testing outside of Eloqua, I had to add <html></html> and <body></body> tags. I tried to put this in JSFiddle for you to experiment with, but it doesn't like how Eloqua organizes things. If I get it to work, I'll post an update.

Here's the working code. You can put this in unminify.com to make it more readable.

Hope that helps.

/* WORKING CODE BELOW */

.LV_validation_message{ font-weight:bold; margin: 0 0 0 5px; }

.LV_valid{ color:#00CC00; display:none; }

.LV_invalid{ color:#CC0000; font-size:10px; }

.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active { outline: 1px solid #00CC00; }

.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { outline: 1px solid #CC0000; }</style>

function isValidField(){

var selectd_items = 0;

var numboxes = document.forms['testCheckboxValidation'].checkboxes.length;

for (var i=0; i < numboxes; i++)

if(document.forms['testCheckboxValidation'].checkboxes[i].checked)

selectd_items++;

return (selectd_items == 1)? true : false;

}

var dom0 = document.querySelector('#form9945 #field0');var field0 = new LiveValidation(dom0, {validMessage: "", onlyOnBlur: true});field0.add(Validate.Presence, {failureMessage:"This field is required"});field0.add(Validate.Format, {pattern: /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, failureMessage: "A valid email address is required"});var dom1 = document.querySelector('#form9945 #field1');var field1 = new LiveValidation(dom1, {validMessage: "", onlyOnBlur: true});var dom2 = document.querySelector('#form9945 #field2');var field2 = new LiveValidation(dom2, {validMessage: "", onlyOnBlur: true});var field3 = new LiveValidation( "field3", {onlyOnSubmit: true, insertAfterWhatNode:"cab_err_msg" } );field3.add( Validate.Custom, { against: function(value){ return isValidField(value) }, failureMessage: "Please Select one" } );

Prathima. A · Oct 9, 2015 3:35AM

Hi,

I want to test the Honey Pot method in Eloqua. Can anyone help me on this.

stella_f · Oct 11, 2015 8:07PM

Hi Stella,
I found the problem and it requires two changes.
In the three checkbox input fields, you'll need to add id="field3" this is the ID the javascript validation is looking for. Right now there is no id specified
In the JavaScript, insertAfterWhatNode:"cb_err_msg" - the value needs to be changed to match your error message label. So change it to cab_err_msg
I was able to get it to work after that - I for testing outside of Eloqua, I had to add <html></html> and <body></body> tags. I tried to put this in JSFiddle for you to experiment with, but it doesn't like how Eloqua organizes things. If I get it to work, I'll post an update.
Here's the working code. You can put this in unminify.com to make it more readable.
Hope that helps.
/* WORKING CODE BELOW */
<style type="text/css" media="screen"> /* RESET */ .elq-form * { margin: 0; padding: 0;}.elq-form input, textarea { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} .elq-form button,input[type=reset],input[type=button],input[type=submit],input[type=checkbox],input[type=radio],select { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}/* GENERIC */.elq-form input { height: 16px; line-height: 16px;}.elq-form .item-padding { padding:6px 5px 9px 9px;}.elq-form .pp-group { padding:0px 5px 0px 9px;}.elq-form .pp-field { padding:6px 0px 9px 0px;}.elq-form .field-wrapper.individual {    float: left;    width: 100%; clear: both;}.elq-form .field-p { position: relative; margin: 0; padding: 0;}.elq-form .zIndex-fix { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0;}.elq-form .field-design { position:absolute; z-index:2; top:0; left:0; right:0; bottom:0; margin:0; padding:0;}.elq-form .no-fields-prompt { float: left; width: 100%; height: 150px; padding-top: 50px; clear: both;}/* SECTION BREAKS */.elq-form .section-break { float:left; width: 97%; margin-right:2%; margin-left:1%; padding-bottom:6px;}.elq-form .section-break .heading { width:100%; font-weight: bold; margin:0; padding:0;}/* LABEL */.elq-form .required { color: red !important; display: inline; float: none; font-weight: bold; margin: 0pt 0pt 0pt; padding: 0pt 0pt 0pt;}/* FIELD GROUP */.elq-form .field-group { float: left; clear: both;}.elq-form .field-group.large { width:100%;}.elq-form .field-group.medium { width:51%;}.elq-form .field-group.small { width:31%;}.elq-form .field-group .label { float:left; width:97%; margin-right:2%; margin-left:1%; padding-bottom:6px; font-weight: bold;}.elq-form .progressive-profile .pp-inner { float: left; clear: both;}.elq-form .progressive-profile .pp-inner.large { width:100%;}.elq-form .progressive-profile .pp-inner.medium { width:51%;}.elq-form .progressive-profile .pp-inner.small { width:31%;}/* RADIO */.elq-form .radio-option { display: inline-block;}.elq-form .radio-option .label { display:block; float:left; padding-right:10px; padding-left:22px; text-indent:-22px;}.elq-form .radio-option .input { vertical-align:middle; margin-right:7px;}.elq-form .radio-option .inner { vertical-align:middle;}/* CHECKBOX */.elq-form .checkbox-span { display:inline-block;}.elq-form .checkbox-label { margin-left:4px;}/* INPUT */.elq-form .accept-default { width:100%;}/* SIZING */.elq-form .field-style { float:left; margin-right:2%; margin-left:2%;}.elq-form .field-style._25 { width:21%;}.elq-form .field-style._50 { width:46%;}.elq-form .field-style._50_left { clear:left; width:46%;}.elq-form .field-style._75 { width:71%;}.elq-form .field-style._100 { width:96%;}.elq-form .field-size-top-small { width:30%;}.elq-form .field-size-top-medium { width:75%;}.elq-form .field-size-top-large { width:100%;}.elq-form .field-size-left-small { width:21%;}.elq-form .field-size-left-medium { width:46%;}.elq-form .field-size-left-large { width:60%;}/* INSTRUCTIONS */.elq-form .instructions.default { color:#444444; display:block; font-size:10px; padding:6px 0pt 3px;}.elq-form .instructions.group { float:left; width:97%; margin-right:2%; margin-left:2%; padding:6px 0pt 3px; color:#444444; display:block; font-size:10px;}.elq-form .instructions.left-single { margin:0 0 0 33%;}.elq-form .instructions-other {   margin:0;}/* POSITIONING */.elq-form .label-position.left { display:block; line-height:150%;    padding:1px 0pt 3px;    float:left;    width:31%;    margin:0pt 15px 0pt 0pt;    word-wrap:break-word;}.elq-form .label-position.top { display:block; line-height:150%;    padding:1px 0pt 3px;    white-space:nowrap;}.elq-form .label-position.alignment-left { text-align: left;}.elq-form .label-position.alignment-right { text-align: right;}/* LIST ORDER */.elq-form .list-order { display:block;}.elq-form .list-order.oneColumn { margin:0pt 7px 0pt 0pt; width:100%; clear:both;}.elq-form .list-order.twoColumn { float:left; margin:0pt 7px 0pt 0pt; width:38%;}.elq-form .list-order.threeColumn { float:left; margin:0pt 7px 0pt 0pt; width:30%;}.elq-form .list-order.oneColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:100%;}.elq-form .list-order.twoColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:38%;}.elq-form .list-order.threeColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:30%;}/* GRID STYLE */.elq-form .grid-style { display:inline; float:left;      margin-left:2%;      margin-right:2%;}.elq-form .grid-style._25 {      width:21%;}.elq-form .grid-style._50 { width:46%;}.elq-form .grid-style._75 {      width:71%;}.elq-form .grid-style._100 {      width:96%; }</style><div><form method="post" name="testCheckboxValidation" action="https://s526.t.eloqua.com/e/f2" id="form9945" class="elq-form" ><input value="testCheckboxValidation" type="hidden" name="elqFormName" /><input value="526" type="hidden" name="elqSiteId" /><input name="elqCampaignId" type="hidden" /><div id="formElement0" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size" ><div class="field-wrapper" ></div><div class="individual field-wrapper" ><div class="_100 field-style" ><p class="field-p" ><label for="field0" class="label-position top " >Email Address<span class="required" >*</span></label><input id="field0" name="emailAddress" type="text" value="<eloqua type='emailfield' syntax='Company' />" class="field-size-top-large" /></p></div></div></div><div id="formElement1" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size" ><div class="field-wrapper" ></div><div class="individual field-wrapper" ><div class="_100 field-style" ><p class="field-p" ><label for="field1" class="label-position top " >First Name</label><input id="field1" name="firstName" type="text" value="" class="field-size-top-large" /></p></div></div></div><div id="formElement2" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size" ><div class="field-wrapper" ></div><div class="individual field-wrapper" ><div class="_100 field-style" ><p class="field-p" ><label for="field2" class="label-position top " >Last name</label><input id="field2" name="lastName" type="text" value="" class="field-size-top-large" /></p></div></div></div><div id="formElement3" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size" ><div class="field-wrapper" ></div><div class="individual field-wrapper" ><div class="_100 field-style" ><p class="field-p" ><label for="field3" class="label-position top "id="cab_err_msg" >Checkboxes</label><span class="radio-option field-size-top-large" ><span class="list-order oneColumn" ><label class="label" ><input name="checkboxes" type="checkbox" value="First" class="input" id="field3" /><span class="inner" >First</span></label></span><span class="list-order oneColumn" ><label class="label" ><input name="checkboxes" type="checkbox" value="Second" class="input" id="field3" /><span class="inner" >Second</span></label></span><span class="list-order oneColumn" ><label class="label" ><input name="checkboxes" type="checkbox" value="Third" class="input" id="field3" /><span class="inner" >Third</span></label></span></span></p></div></div></div><div id="formElement4" class="sc-view form-design-field sc-static-layout item-padding sc-regular-size" ><div class="field-wrapper" ></div><div class="individual field-wrapper" ><div class="_100 field-style" ><p class="field-p" ><input type="submit" onclick="this.disabled=true;return true;" value="Submit" class="submit-button" style="font-size: 100%; height: 24px; width: 100px" /></p></div></div></div></form><script src="https://img.en25.com/i/livevalidation_standalone.compressed.js" type="text/javascript" ></script><style type="text/css" media="screen" >
.LV_validation_message{ font-weight:bold; margin: 0 0 0 5px; }
.LV_valid{ color:#00CC00; display:none; }
.LV_invalid{ color:#CC0000; font-size:10px; }
.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active { outline: 1px solid #00CC00; }
.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { outline: 1px solid #CC0000; }</style>
<script type="text/javascript" >
function isValidField(){
var selectd_items = 0;
var numboxes = document.forms['testCheckboxValidation'].checkboxes.length;
for (var i=0; i < numboxes; i++)
      if(document.forms['testCheckboxValidation'].checkboxes[i].checked)
      selectd_items++;

return (selectd_items == 1)? true : false;
}
var dom0 = document.querySelector('#form9945 #field0');var field0 = new LiveValidation(dom0, {validMessage: "", onlyOnBlur: true});field0.add(Validate.Presence, {failureMessage:"This field is required"});field0.add(Validate.Format, {pattern: /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, failureMessage: "A valid email address is required"});var dom1 = document.querySelector('#form9945 #field1');var field1 = new LiveValidation(dom1, {validMessage: "", onlyOnBlur: true});var dom2 = document.querySelector('#form9945 #field2');var field2 = new LiveValidation(dom2, {validMessage: "", onlyOnBlur: true});var field3 = new LiveValidation( "field3", {onlyOnSubmit: true, insertAfterWhatNode:"cab_err_msg" } );field3.add( Validate.Custom, { against: function(value){ return isValidField(value) }, failureMessage: "Please Select one" } );
function resetSubmitButton(e){ var submitButtons = e.target.form.getElementsByClassName('submit-button'); for(var i=0;i<submitButtons.length;i++){ submitButtons[i].disabled = false; } }function addChangeHandler(elements){ for(var i=0; i<elements.length; i++){   elements[i].addEventListener('change', resetSubmitButton); } }var form = document.getElementById('form9945'); addChangeHandler(form.getElementsByTagName('input')); addChangeHandler(form.getElementsByTagName('select')); addChangeHandler(form.getElementsByTagName('textarea'));</script></div>

Hi Mark

Thank you very much for helping me on this.

I haD tried both by hand modified the form according to you instruction and I also cut and paste them in Eloqua form before.

After I saved the form and test it. It does not work. So I go back to see the HTML code in Eloqua. The code changed to below which actually take out all the code that I had modified according to your instruction. Very sad about it.

CODE CHANGE AFTER TESTING TO:

.LV_valid{ color:#00CC00; display:none; }

.LV_invalid{ color:#CC0000; font-size:10px; }

.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active { outline: 1px solid #00CC00; }

.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { outline: 1px solid #CC0000; }</style><script type="text/javascript" >var dom0 = document.querySelector('#form9945 #field0');var field0 = new LiveValidation(dom0, {validMessage: "", onlyOnBlur: true});field0.add(Validate.Presence, {failureMessage:"This field is required"});field0.add(Validate.Format, {pattern: /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, failureMessage: "A valid email address is required"});var dom1 = document.querySelector('#form9945 #field1');var field1 = new LiveValidation(dom1, {validMessage: "", onlyOnBlur: true});var dom2 = document.querySelector('#form9945 #field2');var field2 = new LiveValidation(dom2, {validMessage: "", onlyOnBlur: true});function resetSubmitButton(e){ var submitButtons = e.target.form.getElementsByClassName('submit-button'); for(var i=0;i<submitButtons.length;i++){ submitButtons[i].disabled = false; } }function addChangeHandler(elements){ for(var i=0; i<elements.length; i++){ elements[i].addEventListener('change', resetSubmitButton); } }var form = document.getElementById('form9945'); addChangeHandler(form.getElementsByTagName('input')); addChangeHandler(form.getElementsByTagName('select')); addChangeHandler(form.getElementsByTagName('textarea'));</script></div>

It seems that Eloqua does not like me to modify their code at all.

Do you have any idea why?

Really wants to make it work in Eloqua!

Kind regards

Stella

markhalliday · Oct 12, 2015 3:20PM

Hi Stella,

Sorry its not working for you; I don't have access to an instance of Eloqua at this time (my role has changed since I first wrote this post) so I have no way of seeing how Eloqua is treating the code. But that would be unfortunate if they've eliminated a way to extend the form and provided no alternative.

stella_f · Oct 12, 2015 8:32PM

Hi Stella,
Sorry its not working for you; I don't have access to an instance of Eloqua at this time (my role has changed since I first wrote this post) so I have no way of seeing how Eloqua is treating the code. But that would be unfortunate if they've eliminated a way to extend the form and provided no alternative.

Hi Mark

Yes. It is very sad to know Eloqua 10 cannot do it.

Alternately I have to use the drop down list and put YES and NO for user to choose. But it is very not friendly using particular in this mobile world.

Thanks Mark.

Stella

stella_f · Oct 13, 2015 11:30PM

Hi Stella,
Sorry its not working for you; I don't have access to an instance of Eloqua at this time (my role has changed since I first wrote this post) so I have no way of seeing how Eloqua is treating the code. But that would be unfortunate if they've eliminated a way to extend the form and provided no alternative.

Hi Mark

Finally it works! Eloqua had changed some code at the validation part recently. I retouch it and then it works.

I put this in Eloqua Form:

https://secure.p01.eloqua.com/Main.aspx#forms&id=9945

Landing Form page:

http://insight.aon.com/LP=10449

P.s. Banner is changed!

working code for landing form page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head><style type="text/css" media="screen"> /* RESET */ .elq-form * { margin: 0; padding: 0;}.elq-form input, textarea { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} .elq-form button,input[type=reset],input[type=button],input[type=submit],input[type=checkbox],input[type=radio],select { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}/* GENERIC */.elq-form input { height: 16px; line-height: 16px;}.elq-form .item-padding { padding:6px 5px 9px 9px;}.elq-form .pp-group { padding:0px 5px 0px 9px;}.elq-form .pp-field { padding:6px 0px 9px 0px;}.elq-form .field-wrapper.individual { float: left; width: 100%; clear: both;}.elq-form .field-p { position: relative; margin: 0; padding: 0;}.elq-form .zIndex-fix { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0;}.elq-form .field-design { position:absolute; z-index:2; top:0; left:0; right:0; bottom:0; margin:0; padding:0;}.elq-form .no-fields-prompt { float: left; width: 100%; height: 150px; padding-top: 50px; clear: both;}/* SECTION BREAKS */.elq-form .section-break { float:left; width: 97%; margin-right:2%; margin-left:1%; padding-bottom:6px;}.elq-form .section-break .heading { width:100%; font-weight: bold; margin:0; padding:0;}/* LABEL */.elq-form .required { color: red !important; display: inline; float: none; font-weight: bold; margin: 0pt 0pt 0pt; padding: 0pt 0pt 0pt;}/* FIELD GROUP */.elq-form .field-group { float: left; clear: both;}.elq-form .field-group.large { width:100%;}.elq-form .field-group.medium { width:51%;}.elq-form .field-group.small { width:31%;}.elq-form .field-group .label { float:left; width:97%; margin-right:2%; margin-left:1%; padding-bottom:6px; font-weight: bold;}.elq-form .progressive-profile .pp-inner { float: left; clear: both;}.elq-form .progressive-profile .pp-inner.large { width:100%;}.elq-form .progressive-profile .pp-inner.medium { width:51%;}.elq-form .progressive-profile .pp-inner.small { width:31%;}/* RADIO */.elq-form .radio-option { display: inline-block;}.elq-form .radio-option .label { display:block; float:left; padding-right:10px; padding-left:22px; text-indent:-22px;}.elq-form .radio-option .input { vertical-align:middle; margin-right:7px;}.elq-form .radio-option .inner { vertical-align:middle;}/* CHECKBOX */.elq-form .checkbox-span { display:inline-block;}.elq-form .checkbox-label { margin-left:4px;}/* INPUT */.elq-form .accept-default { width:100%;}/* SIZING */.elq-form .field-style { float:left; margin-right:2%; margin-left:2%;}.elq-form .field-style._25 { width:21%;}.elq-form .field-style._50 { width:46%;}.elq-form .field-style._50_left { clear:left; width:46%;}.elq-form .field-style._75 { width:71%;}.elq-form .field-style._100 { width:96%;}.elq-form .field-size-top-small { width:30%;}.elq-form .field-size-top-medium { width:75%;}.elq-form .field-size-top-large { width:100%;}.elq-form .field-size-left-small { width:21%;}.elq-form .field-size-left-medium { width:46%;}.elq-form .field-size-left-large { width:60%;}/* INSTRUCTIONS */.elq-form .instructions.default { color:#444444; display:block; font-size:10px; padding:6px 0pt 3px;}.elq-form .instructions.group { float:left; width:97%; margin-right:2%; margin-left:2%; padding:6px 0pt 3px; color:#444444; display:block; font-size:10px;}.elq-form .instructions.left-single { margin:0 0 0 33%;}.elq-form .instructions-other { margin:0;}/* POSITIONING */.elq-form .label-position.left { display:block; line-height:150%; padding:1px 0pt 3px; float:left; width:31%; margin:0pt 15px 0pt 0pt; word-wrap:break-word;}.elq-form .label-position.top { display:block; line-height:150%; padding:1px 0pt 3px; white-space:nowrap;}.elq-form .label-position.alignment-left { text-align: left;}.elq-form .label-position.alignment-right { text-align: right;}/* LIST ORDER */.elq-form .list-order { display:block;}.elq-form .list-order.oneColumn { margin:0pt 7px 0pt 0pt; width:100%; clear:both;}.elq-form .list-order.twoColumn { float:left; margin:0pt 7px 0pt 0pt; width:38%;}.elq-form .list-order.threeColumn { float:left; margin:0pt 7px 0pt 0pt; width:30%;}.elq-form .list-order.oneColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:100%;}.elq-form .list-order.twoColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:38%;}.elq-form .list-order.threeColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:30%;}/* GRID STYLE */.elq-form .grid-style { display:inline; float:left; margin-left:2%; margin-right:2%;}.elq-form .grid-style._25 { width:21%;}.elq-form .grid-style._50 { width:46%;}.elq-form .grid-style._75 { width:71%;}.elq-form .grid-style._100 { width:96%; }</style>

BODY {

MARGIN: 10px;

text-align:center

}

A:link {

COLOR: #e11b22

}

A:visited {

COLOR: #000000

}

A:hover {

COLOR: #000000

}

A:active {

COLOR: #000000

}

.copy {

FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #000000; FONT-SIZE: 11px

}

.mandatory { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #e11b22; FONT-SIZE: 9px

}

.subtitle { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #F37321; FONT-SIZE: 13px; font-weight:bold;

}

.title { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #F37321; FONT-SIZE: 16px; font-weight:bold;

}

</style>

<style>

body{ background-color: #f1f1f1; } a img{border: none;}.ReadMsgBody { width: 100%;}.ExternalClass {width: 100%;}

</style>

<style>

body{ background-color: #f1f1f1; } a img{border: none;}.ReadMsgBody { width: 100%;}.ExternalClass {width: 100%;}div.sc-view.inline-styled-view.editor-outline {height: 100% !important;}

</style>

@media only screen and (max-width: 610px) {

/*CSS styles here will be applied on supporting mobile devices*/

table, div{

width:96% !important;

position:relative !important;

height:auto !important;

overflow:hidden !important;

top:0px !important;

}

img {

max-width:100%;

width:auto !important;

height: auto !important;

}

</style>

</head>

<body>

<tr>

</td>

</tr>

</table>

<tr>

<td class="copy" valign="top" align="left"><strong><em>Please note this registration is unique to you only.</em></strong></td>

</tr>

<tr>

<td class="copy" valign="top" align="left"><strong>First name</strong></td>

</tr>

<tr>

<td class="copy" valign="top" align="left"><input id="field1" name="firstName" type="text" value="<eloqua type='emailfield' syntax='First_Name13' />" style="width: 100%"></td>

</tr>

<tr>

</tr>

<tr>

<td class="copy" valign="top" align="left"><input id="field2" name="lastName" type="text" value="<eloqua type='emailfield' syntax='Last_Name11' />" style="width: 100%"></td>

</tr>

<tr>

<td class="copy" valign="top" align="left"><strong>Email Address</strong><span class="required">*</span></td>

</tr>

<tr>

<td class="copy" valign="top" align="left"><input id="field0" name="emailAddress" type="text" value="<eloqua type='emailfield' syntax='Company' />" style="width: 100%"></td>

</tr>

<tr>

<td class="copy" valign="top" align="left"><label for="field3" id="cb_err_msg"><strong>Checkboxes</strong></label></td>

</tr>

<span class="radio-option field-size-top-large"><span class="list-order oneColumn"><label class="label"><input name="checkboxes" type="checkbox" value="First" class="input" id="field3"><span class="copy">First</span></label></span> <span class="list-order oneColumn"><label class="label">

<input name="checkboxes" type="checkbox" value="Second" class="input" id="field3"><span class="copy">Second</span></label></span> <span class="list-order oneColumn"><label class="label"><input name="checkboxes" type="checkbox" value="Third" class="input" id="field3"><span class="copy">Third</span></label></span></span></td>

</table></td></tr>

<tr>

</tr>

<tr>

</tr>

</table></td></tr>

.LV_valid{ color:#00CC00; display:none; }

.LV_invalid{ color:#CC0000; font-size:10px; }

.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active { outline: 1px solid #00CC00; }

.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { outline: 1px solid #CC0000; }</style>

function isValidField(){

var selectd_items = 0;

var numboxes = document.forms['testCheckboxValidation'].checkboxes.length;

for (var i=0; i < numboxes; i++)

if(document.forms['testCheckboxValidation'].checkboxes[i].checked)

selectd_items++;

return (selectd_items == 1)? true : false;

}

var dom0 = document.querySelector('#form9945 #field0');var field0 = new LiveValidation(dom0, {validMessage: "", onlyOnBlur: true});field0.add(Validate.Presence, {failureMessage:"This field is required"});field0.add(Validate.Format, {pattern: /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, failureMessage: "A valid email address is required"});var dom1 = document.querySelector('#form9945 #field1');var field1 = new LiveValidation(dom1, {validMessage: "", onlyOnBlur: true});var dom2 = document.querySelector('#form9945 #field2');var field2 = new LiveValidation(dom2, {validMessage: "", onlyOnBlur: true});var dom3 = document.querySelector('#form9945 #field3');var field3 = new LiveValidation(dom3, {onlyOnSubmit: true, insertAfterWhatNode:"cb_err_msg" });field3.add( Validate.Custom, { against: function(value){ return isValidField(value) }, failureMessage: "Please Select only one" } );

</table></body></html>

THANK YOU VERY MUCH FOR YOUR HELP.

Stella

markhalliday · Oct 14, 2015 2:31PM

Hi Mark
Finally it works! Eloqua had changed some code at the validation part recently. I retouch it and then it works.
I put this in Eloqua Form:
https://secure.p01.eloqua.com/Main.aspx#forms&id=9945
Landing Form page:
http://insight.aon.com/LP=10449
P.s. Banner is changed!
working code for landing form page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><style type="text/css" media="screen"> /* RESET */ .elq-form * { margin: 0; padding: 0;}.elq-form input, textarea { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box;} .elq-form button,input[type=reset],input[type=button],input[type=submit],input[type=checkbox],input[type=radio],select { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}/* GENERIC */.elq-form input { height: 16px; line-height: 16px;}.elq-form .item-padding { padding:6px 5px 9px 9px;}.elq-form .pp-group { padding:0px 5px 0px 9px;}.elq-form .pp-field { padding:6px 0px 9px 0px;}.elq-form .field-wrapper.individual {    float: left;    width: 100%; clear: both;}.elq-form .field-p { position: relative; margin: 0; padding: 0;}.elq-form .zIndex-fix { position: absolute; z-index: 1; top: 0; left: 0; right: 0; bottom: 0;}.elq-form .field-design { position:absolute; z-index:2; top:0; left:0; right:0; bottom:0; margin:0; padding:0;}.elq-form .no-fields-prompt { float: left; width: 100%; height: 150px; padding-top: 50px; clear: both;}/* SECTION BREAKS */.elq-form .section-break { float:left; width: 97%; margin-right:2%; margin-left:1%; padding-bottom:6px;}.elq-form .section-break .heading { width:100%; font-weight: bold; margin:0; padding:0;}/* LABEL */.elq-form .required { color: red !important; display: inline; float: none; font-weight: bold; margin: 0pt 0pt 0pt; padding: 0pt 0pt 0pt;}/* FIELD GROUP */.elq-form .field-group { float: left; clear: both;}.elq-form .field-group.large { width:100%;}.elq-form .field-group.medium { width:51%;}.elq-form .field-group.small { width:31%;}.elq-form .field-group .label { float:left; width:97%; margin-right:2%; margin-left:1%; padding-bottom:6px; font-weight: bold;}.elq-form .progressive-profile .pp-inner { float: left; clear: both;}.elq-form .progressive-profile .pp-inner.large { width:100%;}.elq-form .progressive-profile .pp-inner.medium { width:51%;}.elq-form .progressive-profile .pp-inner.small { width:31%;}/* RADIO */.elq-form .radio-option { display: inline-block;}.elq-form .radio-option .label { display:block; float:left; padding-right:10px; padding-left:22px; text-indent:-22px;}.elq-form .radio-option .input { vertical-align:middle; margin-right:7px;}.elq-form .radio-option .inner { vertical-align:middle;}/* CHECKBOX */.elq-form .checkbox-span { display:inline-block;}.elq-form .checkbox-label { margin-left:4px;}/* INPUT */.elq-form .accept-default { width:100%;}/* SIZING */.elq-form .field-style { float:left; margin-right:2%; margin-left:2%;}.elq-form .field-style._25 { width:21%;}.elq-form .field-style._50 { width:46%;}.elq-form .field-style._50_left { clear:left; width:46%;}.elq-form .field-style._75 { width:71%;}.elq-form .field-style._100 { width:96%;}.elq-form .field-size-top-small { width:30%;}.elq-form .field-size-top-medium { width:75%;}.elq-form .field-size-top-large { width:100%;}.elq-form .field-size-left-small { width:21%;}.elq-form .field-size-left-medium { width:46%;}.elq-form .field-size-left-large { width:60%;}/* INSTRUCTIONS */.elq-form .instructions.default { color:#444444; display:block; font-size:10px; padding:6px 0pt 3px;}.elq-form .instructions.group { float:left; width:97%; margin-right:2%; margin-left:2%; padding:6px 0pt 3px; color:#444444; display:block; font-size:10px;}.elq-form .instructions.left-single { margin:0 0 0 33%;}.elq-form .instructions-other {   margin:0;}/* POSITIONING */.elq-form .label-position.left { display:block; line-height:150%;    padding:1px 0pt 3px;    float:left;    width:31%;    margin:0pt 15px 0pt 0pt;    word-wrap:break-word;}.elq-form .label-position.top { display:block; line-height:150%;    padding:1px 0pt 3px;    white-space:nowrap;}.elq-form .label-position.alignment-left { text-align: left;}.elq-form .label-position.alignment-right { text-align: right;}/* LIST ORDER */.elq-form .list-order { display:block;}.elq-form .list-order.oneColumn { margin:0pt 7px 0pt 0pt; width:100%; clear:both;}.elq-form .list-order.twoColumn { float:left; margin:0pt 7px 0pt 0pt; width:38%;}.elq-form .list-order.threeColumn { float:left; margin:0pt 7px 0pt 0pt; width:30%;}.elq-form .list-order.oneColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:100%;}.elq-form .list-order.twoColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:38%;}.elq-form .list-order.threeColumnLeft { float:left; margin:0pt 7px 0pt 0pt; width:30%;}/* GRID STYLE */.elq-form .grid-style {      display:inline;      float:left;      margin-left:2%;      margin-right:2%;}.elq-form .grid-style._25 {      width:21%;}.elq-form .grid-style._50 {      width:46%;}.elq-form .grid-style._75 {      width:71%;}.elq-form .grid-style._100 {      width:96%; }</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type=text/css>
BODY {
MARGIN: 10px;
text-align:center
}
A:link {
COLOR: #e11b22
}
A:visited {
COLOR: #000000
}
A:hover {
COLOR: #000000
}
A:active {
COLOR: #000000
}
.copy {
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #000000; FONT-SIZE: 11px
}
.mandatory { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #e11b22; FONT-SIZE: 9px
}
.subtitle { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #F37321; FONT-SIZE: 13px; font-weight:bold;
}
.title { FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; COLOR: #F37321; FONT-SIZE: 16px; font-weight:bold;
}
</style>
<style>
body{ background-color: #f1f1f1; } a img{border: none;}.ReadMsgBody { width: 100%;}.ExternalClass {width: 100%;}
</style>
<style>
body{ background-color: #f1f1f1; } a img{border: none;}.ReadMsgBody { width: 100%;}.ExternalClass {width: 100%;}div.sc-view.inline-styled-view.editor-outline {height: 100% !important;}
</style>
<style type="text/css">
@media only screen and (max-width: 610px) {
/*CSS styles here will be applied on supporting mobile devices*/
table, div{
width:96% !important;
position:relative !important;
height:auto !important;
overflow:hidden !important;
top:0px !important;
}
img {
max-width:100%;
width:auto !important;
height: auto !important;
}
}
</style>

</head>
<body>
<form method="post" name="testCheckboxValidation" action="https://s526.t.eloqua.com/e/f2" id="form9945" class="elq-form"><input value="testCheckboxValidation" type="hidden" name="elqFormName"><input value="526" type="hidden" name="elqSiteId"><input name="elqCampaignId" type="hidden">

<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr><td>

<table width="584" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td valign="top" align="left"><img src="http://images.comms.aon.com/EloquaImages/clients/AON/{fb743937-29c0-4fa4-af80-e54e042a20ea}_CORP0068-Charity-Golf-Classic-2015.jpg" width="600" height="261" alt="You're Invited - ">
    </td>
</tr>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor=#ffffff>
<tr><td>

<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td class="copy" valign="top" align="left"><strong><em>Please note this registration is unique to you only.</em></strong></td>
</tr>
<tr>
     <td class="copy" valign="top" align="left"><strong>First name</strong></td>
</tr>
<tr>
     <td class="copy" valign="top" align="left"><input id="field1" name="firstName" type="text" value="<eloqua type='emailfield' syntax='First_Name13' />" style="width: 100%"></td>
</tr>
<tr>
     <td class="copy" valign="top" align="left"><strong>Last name</strong></td>
</tr>
<tr>
     <td class="copy" valign="top" align="left"><input id="field2" name="lastName" type="text" value="<eloqua type='emailfield' syntax='Last_Name11' />" style="width: 100%"></td>
</tr>
<tr>
     <td class="copy" valign="top" align="left"><strong>Email Address</strong><span class="required">*</span></td>
</tr>
<tr>
     <td class="copy" valign="top" align="left"><input id="field0" name="emailAddress" type="text" value="<eloqua type='emailfield' syntax='Company' />" style="width: 100%"></td>
</tr>

<tr>
     <td class="copy" valign="top" align="left"><label for="field3" id="cb_err_msg"><strong>Checkboxes</strong></label></td>
</tr>

     <td class="copy" valign="top" align="left">
<span class="radio-option field-size-top-large"><span class="list-order oneColumn"><label class="label"><input name="checkboxes" type="checkbox" value="First" class="input" id="field3"><span class="copy">First</span></label></span>  <span class="list-order oneColumn"><label class="label">
<input name="checkboxes" type="checkbox" value="Second" class="input" id="field3"><span class="copy">Second</span></label></span>  <span class="list-order oneColumn"><label class="label"><input name="checkboxes" type="checkbox" value="Third" class="input" id="field3"><span class="copy">Third</span></label></span></span></td>
</table></td></tr>

<tr>
     <td class="copy" valign="top" align="left"><br> <input type="submit" value="Submit" style="font-size: 100%; height: 24px; width: 100px"></td>
</tr>
    <tr>
     <td class="copy" valign="top" align="left"> </td>
</tr>

</table></td></tr>

<script src="https://img.en25.com/i/livevalidation_standalone.compressed.js" type="text/javascript"></script><style type="text/css" media="screen">.LV_validation_message{ font-weight:bold; margin: 0 0 0 5px; }
.LV_valid{ color:#00CC00; display:none; }
.LV_invalid{ color:#CC0000; font-size:10px; }
.LV_valid_field, input.LV_valid_field:hover, input.LV_valid_field:active, textarea.LV_valid_field:hover, textarea.LV_valid_field:active { outline: 1px solid #00CC00; }
.LV_invalid_field, input.LV_invalid_field:hover, input.LV_invalid_field:active, textarea.LV_invalid_field:hover, textarea.LV_invalid_field:active { outline: 1px solid #CC0000; }</style>

<script type="text/javascript">

    function isValidField(){
var selectd_items = 0;

var numboxes = document.forms['testCheckboxValidation'].checkboxes.length;

for (var i=0; i < numboxes; i++)
if(document.forms['testCheckboxValidation'].checkboxes[i].checked)
      selectd_items++;

return (selectd_items == 1)? true : false;
}

   var dom0 = document.querySelector('#form9945 #field0');var field0 = new LiveValidation(dom0, {validMessage: "", onlyOnBlur: true});field0.add(Validate.Presence, {failureMessage:"This field is required"});field0.add(Validate.Format, {pattern: /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i, failureMessage: "A valid email address is required"});var dom1 = document.querySelector('#form9945 #field1');var field1 = new LiveValidation(dom1, {validMessage: "", onlyOnBlur: true});var dom2 = document.querySelector('#form9945 #field2');var field2 = new LiveValidation(dom2, {validMessage: "", onlyOnBlur: true});var dom3 = document.querySelector('#form9945 #field3');var field3 = new LiveValidation(dom3, {onlyOnSubmit: true, insertAfterWhatNode:"cb_err_msg" });field3.add( Validate.Custom, { against: function(value){ return isValidField(value) }, failureMessage: "Please Select only one" } );

function resetSubmitButton(e){ var submitButtons = e.target.form.getElementsByClassName('submit-button'); for(var i=0;i<submitButtons.length;i++){ submitButtons[i].disabled = false; } }function addChangeHandler(elements){ for(var i=0; i<elements.length; i++){   elements[i].addEventListener('change', resetSubmitButton); } }var form = document.getElementById('form9945'); addChangeHandler(form.getElementsByTagName('input')); addChangeHandler(form.getElementsByTagName('select')); addChangeHandler(form.getElementsByTagName('textarea'));</script>
</table></body></html>
THANK YOU VERY MUCH FOR YOUR HELP.
Stella

Hi Stella,

Glad you were able to get it to work - also glad it's still a workable solution!

- Mark

Cheli · Feb 1, 2016 2:26PM

Thanks for this, everybody! This was a recent need and we got it to work (thanks to my very wonderful colleague who's a wiz with HTML).

2895345 · Apr 20, 2016 6:31PM

Hi @mhalliday, and

I have a related issue that I cannot find a solution. We are trying to allow customers to choose to download content from any of the 5 forms on an Eloqua LP, and the LiveValidation only works on the last form. While all forms have a unique form id (ex: id="form296"), there are form element duplicates on each form (ex: id=formElement0, id=field0, etc.). I've tried giving each form element and associated LiveValidation form element unique descriptors, used external jQuery to validate the form fields to no avail. Here is a snippet of the LiveValidation script:

var dom0 = document.querySelector('#form296 #field0');

var field0 = new LiveValidation(dom0, {

validMessage: "",

onlyOnBlur: true

});

field0.add(Validate.Presence, {

failureMessage: "This field is required"

});

</script>

Do you have any suggestions on how to achieve form field validation on multiple forms on one page? On one of the above posts, Ryan mentioned a LiveValidation - Documentation library. I've searched topliners and have not found such a resource. Any help you can provide will be greatly appreciated.

Thanks,

Vernon

markhalliday · Apr 20, 2016 7:21PM

Hi @mhalliday, and
I have a related issue that I cannot find a solution. We are trying to allow customers to choose to download content from any of the 5 forms on an Eloqua LP, and the LiveValidation only works on the last form. While all forms have a unique form id (ex: id="form296"), there are form element duplicates on each form (ex: id=formElement0, id=field0, etc.). I've tried giving each form element and associated LiveValidation form element unique descriptors, used external jQuery to validate the form fields to no avail. Here is a snippet of the LiveValidation script:
<script type="text/javascript">
        var dom0 = document.querySelector('#form296 #field0');
        var field0 = new LiveValidation(dom0, {
            validMessage: "",
            onlyOnBlur: true
        });
        field0.add(Validate.Presence, {
            failureMessage: "This field is required"
        });
</script>
Do you have any suggestions on how to achieve form field validation on multiple forms on one page? On one of the above posts, Ryan mentioned a LiveValidation - Documentation library. I've searched topliners and have not found such a resource. Any help you can provide will be greatly appreciated.
Thanks,
Vernon

Hi Vernon,

Off the top of my head, I'd use jquery. For each form, you'd create a submit function. In the function, you'd include the livevalidation code. Here's a simple example. When you submit the the form with id 'form89', the first function is called, when 'form90' is called, the second function runs.

$('#form89').submit(function(){

alert("form 1");

});

$('#form90').submit(function(){

alert("form 2");

});

</script>

You can see a working test at http://www.rbrienpaving.com/multiform.html

fill in the required fields for both form 1 and form 2. Sumbit form 1. The value of the confirmation page should match the value of the first name field in form 1. Hit the back button. submit form 2. Now the value should match the value in the first name field of form 2.

Hope that helps.

2895345 · Apr 21, 2016 6:47PM

Hi Vernon,
Off the top of my head, I'd use jquery. For each form, you'd create a submit function. In the function, you'd include the livevalidation code. Here's a simple example. When you submit the the form with id 'form89', the first function is called, when 'form90' is called, the second function runs.
<script type="text/javascript">
$('#form89').submit(function(){
alert("form 1");
});
$('#form90').submit(function(){
alert("form 2");
});
</script>
You can see a working test at http://www.rbrienpaving.com/multiform.html
fill in the required fields for both form 1 and form 2. Sumbit form 1. The value of the confirmation page should match the value of the first name field in form 1. Hit the back button. submit form 2. Now the value should match the value in the first name field of form 2.
Hope that helps.

Hi Mark,

Thanks for the quick reply. Looking at your working test and only form 1 displays the alert if the required fields are empty. I viewed the page source of your test, copied your form code and tried it on one of my Eloqua test pages, with the same results. I didn't see this script on your working test page when I viewed the page source code. I'm sure that I am missing something obvious.

I've applied your javascript listed above and formatted it to match my form ids, and added your validation ($('#form90').submit(function(){) to each form's script. Here is the landing page that I'm working on: https://forms.web.roberthalf.com/2016SalaryGuides

Our goal is to allow visitors to complete any of the 5 forms to receive the download email for that particular asset. The confirmation page then redirects back to the form landing page to allow the downloading of additional assets. Would you mind taking a look at the source code for my page and let me know if there is something that I am doing incorrectly?

Thanks again,

-Vernon

markhalliday · Apr 22, 2016 9:30AM

Hi Mark,
Thanks for the quick reply. Looking at your working test and only form 1 displays the alert if the required fields are empty. I viewed the page source of your test, copied your form code and tried it on one of my Eloqua test pages, with the same results. I didn't see this script on your working test page when I viewed the page source code. I'm sure that I am missing something obvious.
I've applied your javascript listed above and formatted it to match my form ids, and added your validation ($('#form90').submit(function(){) to each form's script. Here is the landing page that I'm working on: https://forms.web.roberthalf.com/2016SalaryGuides
Our goal is to allow visitors to complete any of the 5 forms to receive the download email for that particular asset. The confirmation page then redirects back to the form landing page to allow the downloading of additional assets. Would you mind taking a look at the source code for my page and let me know if there is something that I am doing incorrectly?
Thanks again,
-Vernon

Hi Vernon,

Totally whiffed on this one - fast won't help you if it's not right. I'm taking another look at this.

2895345 · Apr 22, 2016 2:48PM

Hi Vernon,
Totally whiffed on this one - fast won't help you if it's not right. I'm taking another look at this.

Thanks Mark,

I appreciate any help you can provide.

markhalliday · Apr 25, 2016 9:59AM

Thanks Mark,
I appreciate any help you can provide.

Hi Vernon,

I think the best thing for you to do would be to have one form, and move it on the page to where you need it to be.

https://jsfiddle.net/7vxLcc49/

See this little example - if you click on any of the colored boxes, the form will move. I am assuming your form is the same, save for the page that gets displayed. You could handle this through a hidden field. The alert that pops up shows you how you can change the value of the hidden field.

I think this is a much better solution for you.

2895345 · Apr 25, 2016 6:40PM

Hi Vernon,
I think the best thing for you to do would be to have one form, and move it on the page to where you need it to be.
https://jsfiddle.net/7vxLcc49/
See this little example - if you click on any of the colored boxes, the form will move. I am assuming your form is the same, save for the page that gets displayed. You could handle this through a hidden field. The alert that pops up shows you how you can change the value of the hidden field.
I think this is a much better solution for you.

Hi Mark,

I like the functionality of your example. However, this won't work for me as the form(s) must target a specific action. Your suggestion has me rethinking the approach. I'm looking into a single form with radio buttons for selecting the version of the asset the visitor wants. A simple solution may be the best solution. Once I get it to work, I'll post the solution for others.

Cheers,

-V

markhalliday · Apr 26, 2016 6:57AM

Hi Mark,
I like the functionality of your example. However, this won't work for me as the form(s) must target a specific action. Your suggestion has me rethinking the approach. I'm looking into a single form with radio buttons for selecting the version of the asset the visitor wants. A simple solution may be the best solution. Once I get it to work, I'll post the solution for others.
Cheers,
-V

Whatever approach you choose, I'd suggest a single form. I was able to get a multi-form solution to work, but I felt it required too much code modification. I'll include it here in case anyone tries it - its a modified version of the one I posted that didn't quite work. Now it does:

http://www.rbrienpaving.com/multiform.html

But to get this to work, you have to rename the livevalidation objects - what that means is that each required field has a validation object defined like this:

var dom0 = document.querySelector('#form89 #field0');

var field0 = new LiveValidation(dom0, {

validMessage: "", onlyOnBlur: true}

);

But when you add multiple forms, you're going to get more than one object with the same var name. that's not going to work. So, you have to give each object a unique var name. So if you add an additional form - let's say a form with an id of 'form90' - you'll need to rename all the vars. So what initially looks like this:

var dom0 = document.querySelector('#form90 #field0');

var field0 = new LiveValidation(dom0, {

validMessage: "", onlyOnBlur: true}

);

Would need to be changed to something unique. So. if your first form had vars with names from dom0 to dom5, you'd have to start your var names for form2 beginning with dom6:

var dom6 = document.querySelector('#form90 #field0');

var field0 = new LiveValidation(dom6, {

validMessage: "", onlyOnBlur: true}

);

This works, but its a lot of re-write, which makes it error-prone. With the number of forms you have, I wouldn't recommend it.

2895345 · May 23, 2016 1:50PM

Whatever approach you choose, I'd suggest a single form. I was able to get a multi-form solution to work, but I felt it required too much code modification. I'll include it here in case anyone tries it - its a modified version of the one I posted that didn't quite work. Now it does:
http://www.rbrienpaving.com/multiform.html
But to get this to work, you have to rename the livevalidation objects - what that means is that each required field has a validation object defined like this:
var dom0 = document.querySelector('#form89 #field0');
    var field0 = new LiveValidation(dom0, {
      validMessage: "", onlyOnBlur: true}
                                   );
But when you add multiple forms, you're going to get more than one object with the same var name. that's not going to work. So, you have to give each object a unique var name. So if you add an additional form - let's say a form with an id of 'form90' - you'll need to rename all the vars. So what initially looks like this:
var dom0 = document.querySelector('#form90 #field0');
    var field0 = new LiveValidation(dom0, {
      validMessage: "", onlyOnBlur: true}
                                   );
Would need to be changed to something unique. So. if your first form had vars with names from dom0 to dom5, you'd have to start your var names for form2 beginning with dom6:
var dom6 = document.querySelector('#form90 #field0');
    var field0 = new LiveValidation(dom6, {
      validMessage: "", onlyOnBlur: true}
);
This works, but its a lot of re-write, which makes it error-prone. With the number of forms you have, I wouldn't recommend it.

Hi Mark,

Just wanted to give you an update on finding a resolution to my issue. I took your advice on using a single form, and borrowed you example of floating the form between divs. Here is my solution: https://jsfiddle.net/vlomax/4b2jy8v0/2/#&togetherjs=mLxagGN60h

On my final LP, I've added JS to hide the form on load, then show upon clicking the specific div. I also added JS to sync each div to the form field associated with the asset to be selected. I couldn't add that script to the jsfiddle, as it causes the floating action to break. But it works perfectly on my ELQ LP. My team is impress. Thanks for sharing your knowledge and pointing me in the right direction.

With great respect and gratitude,

-Vernon

markhalliday · May 23, 2016 7:48PM

Hi Mark,
Just wanted to give you an update on finding a resolution to my issue. I took your advice on using a single form, and borrowed you example of floating the form between divs. Here is my solution: https://jsfiddle.net/vlomax/4b2jy8v0/2/#&togetherjs=mLxagGN60h
On my final LP, I've added JS to hide the form on load, then show upon clicking the specific div. I also added JS to sync each div to the form field associated with the asset to be selected. I couldn't add that script to the jsfiddle, as it causes the floating action to break. But it works perfectly on my ELQ LP. My team is impress. Thanks for sharing your knowledge and pointing me in the right direction.
With great respect and gratitude,
-Vernon

Hi Vernon - that looks really good - if you wanted to, you could even pass in the headings of each section to help with your logic/routing behind the scenes. Thanks for sharing.

2895345 · May 23, 2016 8:48PM

Hi Vernon - that looks really good - if you wanted to, you could even pass in the headings of each section to help with your logic/routing behind the scenes. Thanks for sharing.

Hi Mark,

Per your suggestion, I've tried selecting a hidden form field with the following "$(#field__").focus();" for each div without success. My script is below. Any ideas?

$("#divone").click(function() {

$("#divone").append($("#form328"));

$("#form328").show();

$("#field9").focus();

});

$("#divtwo").click(function() {

$("#divtwo").append($("#form328"));

$("#form328").show();

$("#field10").focus();

});

$("#divthree").click(function() {

$("#divthree").append($("#form328"));

$("#form328").show();

$("#field11").focus();

});

$("#divfour").click(function() {

$("#divfour").append($("#form328"));

$("#form328").show();

$("#field12").focus();

});

$("#divfive").click(function() {

$("#divfive").append($("#form328"));

$("#form328").show();

$("#field13").focus();

});

</script>

markhalliday · May 23, 2016 9:44PM

Hi Mark,
Per your suggestion, I've tried selecting a hidden form field with the following "$(#field__").focus();" for each div without success. My script is below. Any ideas?
<script>
$("#divone").click(function() {
$("#divone").append($("#form328"));
    $("#form328").show();
$("#field9").focus();
});
$("#divtwo").click(function() {
    $("#divtwo").append($("#form328"));
$("#form328").show();
$("#field10").focus();
});
$("#divthree").click(function() {
    $("#divthree").append($("#form328"));
$("#form328").show();
$("#field11").focus();
});
$("#divfour").click(function() {
    $("#divfour").append($("#form328"));
$("#form328").show();
$("#field12").focus();
});
$("#divfive").click(function() {
    $("#divfive").append($("#form328"));
$("#form328").show();
$("#field13").focus();
});
   });
</script>

Hi Vernon,

Instead of trying to append the whole div, I'd recommend giving your headings a unique id - you could use a span or h1 tag for example. So, if you gave your first heading and id of 'heading1' you could get the text like this:

var d1 = $("#heading1").html();

Then you could append it to a hidden field - like field7:

$("#field7").val(d1);

2895345 · May 24, 2016 1:13PM

Hi Vernon,
Instead of trying to append the whole div, I'd recommend giving your headings a unique id - you could use a span or h1 tag for example. So, if you gave your first heading and id of 'heading1' you could get the text like this:
var d1 = $("#heading1").html();
Then you could append it to a hidden field - like field7:
$("#field7").val(d1);

Hi Mark,

You are an Eloqua genius! Thanks for solving this for me.

Cheers,

-V

2895345 · Jun 1, 2016 7:10PM

Hi Mark,
You are an Eloqua genius! Thanks for solving this for me.
Cheers,
-V

Hi Mark,

The actual fix was simple. I replaced: $(#field__").focus(); with $("#field10").val("on"); - and changed the field ID under each div to correspond with the asset. I already had a condition on each hidden field in the processing steps with the boolean of "on". Now all is working and the form submitter receives the correct asset download email. Increasing my knowledge of javascript, jQuery, and even JSON is a must.

Best wishes,

-V

markhalliday · Jun 1, 2016 7:25PM

Hi Mark,
The actual fix was simple. I replaced: $(#field__").focus(); with $("#field10").val("on"); - and changed the field ID under each div to correspond with the asset. I already had a condition on each hidden field in the processing steps with the boolean of "on". Now all is working and the form submitter receives the correct asset download email. Increasing my knowledge of javascript, jQuery, and even JSON is a must.
Best wishes,
-V

That's great - once you learn how to manipulate objects on the page with JavaScript (and even CSS), your world changes forever.

Categories

Extending Eloqua 10 Form Validation

Comments