Discussions

Extending Eloqua 10 Form Validation

24

Comments

  • markhalliday
    markhalliday Posts: 31 Silver Trophy

    @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
    erika.wong Posts: 5 Red Ribbon

    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
    markhalliday Posts: 31 Silver Trophy

    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!

  • Thanks, this is still coming to good use!

  • 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
    markhalliday Posts: 31 Silver Trophy

    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

  • 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

  • markhalliday
    markhalliday Posts: 31 Silver Trophy

    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.

    1. 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
    2. 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>

  • Prathima. A
    Prathima. A Posts: 1 Red Ribbon

    Hi,

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

  • Hi Stella,

    I found the problem and it requires two changes.

    1. 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
    2. 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:

    <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 " >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" 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" >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
    markhalliday Posts: 31 Silver Trophy

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

  • 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">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head><!-- StartFormCustomCSS --><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><!-- EndFormCustomCSS -->

    <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

  • markhalliday
    markhalliday Posts: 31 Silver Trophy

    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><!-- StartFormCustomCSS --><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><!-- EndFormCustomCSS -->

    <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
    Cheli Posts: 29 Gold Medal

    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). 

  • 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

  • markhalliday
    markhalliday Posts: 31 Silver Trophy

    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.

    <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 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
    markhalliday Posts: 31 Silver Trophy

    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.

  • 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
    markhalliday Posts: 31 Silver Trophy

    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.

  • 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
    markhalliday Posts: 31 Silver Trophy

    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.

  • 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
    markhalliday Posts: 31 Silver Trophy

    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.

  • 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?

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

  • markhalliday
    markhalliday Posts: 31 Silver Trophy

    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);

  • 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

  • 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
    markhalliday Posts: 31 Silver Trophy

    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.