Extending Eloqua 10 Form Validation

I've used @bkhayes scripts (single checkbox required and picklist checkboxes + single checkbox required) a couple of times with success, but I've come across a new challenge that I can't seem to figure out.

I have two single checkboxes, each need to be mandatory.

Being the novice that I am, I simply tried using this Javascript twice, once for each dom/field value:

<!-- Load jQuery 1.12.4.min.js -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<!-- Make Checkboxes Required on Eloqua Forms -->

<script type="text/javascript">

     $(document).ready(function() {  // DOM Ready

          var dom# = document.querySelector("#form#### input[type='checkbox']");var field# = new LiveValidation(dom#, {validMessage: "", onlyOnBlur: false, wait: 300});field#.add(Validate.Acceptance, {failureMessage:"This field is required"});

      }); // End DOM

</script>

That didn't work out, it only made the first of the two checkboxes required. Additionally, even when I specified the dom/field value of the second of the two checkboxes, submitting the form with both checkboxes blank still put the 'This field is required' error message next to the first checkbox.

Can anyone assist with this?

That was so easy, using the built in checkbox validation, thanks mhalliday, you saved me hours of coding.

Another useful tidbit I found. If you ever want to disable field validation, say if something hides or you want to re-enable it, you can use the below code. The .enable and .disable are part of LiveValidation library. Remember that your first form element starts with 0, not 1.

To enable field validation we create this function:

function enableFields() {

    field0.enable();

     // Put the rest of the fields you would like to enable here.

}

To disable field validation we create this function:

function disableFields() {

    field0.disable();

     // Put the rest of the fields you would like to disable here.

}

We then call the enabledFields function wherever we want it to initialize with this:

enableFields();

We then call the disableFields function wherever we want it to initialize with this:

disableFields();

Hi Ben,

I need your help in Eloqua's required field validation.

I have one drop-down field in my form. it has values. Based on the dropdown value, some fields(these are checkbox picklists) are shown and some fields are hidden. when I am selecting a value and submitting the form, the form is not submitting as the hidden field is required(*). can you help me in fixing this?

Script something like this:

<div id="formElement8" class="elq-field-style form-element-layout row"><div style="text-align:left;" class="col-sm-12 col-xs-12"><label class="elq-label " for="fe1018">How would you describe your Data Science experience?</label></div><div class="col-sm-12 col-xs-12"><div class="row"><div class="col-xs-12"><div class="field-control-wrapper"><select class="elq-item-select" id="fe1018" name="dropdownMenu" style="width:100%;" data-value=""><option value="Please select">Please select</option><option value="I am a Data Analyst">I am a Data Analyst</option><option value="I am a Data Engineer">I am a Data Engineer</option><option value="I am a Data Scientist">I am a Data Scientist</option></select></div></div></div></div></div>

After selecting a value in the dropdown field. below two fields will be shown and remaining will be hidden

<div id="formElement9" class="elq-field-style form-element-layout row" style="display: block;"><div style="text-align:left;" class="col-sm-12 col-xs-12"><label class="elq-label " for="fe1009">Skills (section 1)<span class="elq-required">*</span></label></div><div class="col-sm-12 col-xs-12"><div class="row"><div class="col-xs-12"><div class="field-control-wrapper" id="fe1009"><div><input type="checkbox" id="checkbox-SQL_jtvkccv" value="SQL" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-SQL_jtvkccv">SQL</label><br></div><div><input type="checkbox" id="checkbox-Tableau_ob2yrhvf" value="Tableau" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-Tableau_ob2yrhvf">Tableau</label><br></div><div><input type="checkbox" id="checkbox-Python_8um9pxef" value="Python" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-Python_8um9pxef">Python</label><br></div><div><input type="checkbox" id="checkbox-Web Analytics (SiteCatalyst / Google Analytics / Mixpanel)_fj0bjvb8" value="Web Analytics (SiteCatalyst / Google Analytics / Mixpanel)" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-Web Analytics (SiteCatalyst / Google Analytics / Mixpanel)_fj0bjvb8">Web Analytics (SiteCatalyst / Google Analytics / Mixpanel)</label><br></div><div><input type="checkbox" id="checkbox-A/B Testing_mywxi0gg" value="A/B Testing" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-A/B Testing_mywxi0gg">A/B Testing</label><br></div><div><input type="checkbox" id="checkbox-None of the above_88isu0sg" value="None of the above" name="checkboxes"><label class="checkbox-aligned elq-item-label" for="checkbox-None of the above_88isu0sg">None of the above</label><br></div></div></div></div></div></div>

<div id="formElement10" class="elq-field-style form-element-layout row" style="display: block;"><div style="text-align:left;" class="col-sm-12 col-xs-12"><label class="elq-label " for="fe1010"> Skills continued (section 2)<span class="elq-required">*</span></label></div><div class="col-sm-12 col-xs-12"><div class="row"><div class="col-xs-12"><div class="field-control-wrapper" id="fe1010"><div><input type="checkbox" id="checkbox-Modeling_i6wybnij" value="Modeling" name="checkboxes2"><label class="checkbox-aligned elq-item-label" for="checkbox-Modeling_i6wybnij">Modeling</label><br></div><div><input type="checkbox" id="checkbox-Algorithms_lqo047bi" value="Algorithms" name="checkboxes2"><label class="checkbox-aligned elq-item-label" for="checkbox-Algorithms_lqo047bi">Algorithms</label><br></div><div><input type="checkbox" id="checkbox-R_1c82jzgn" value="R" name="checkboxes2"><label class="checkbox-aligned elq-item-label" for="checkbox-R_1c82jzgn">R</label><br></div><div><input type="checkbox" id="checkbox-None of the above_b8bk6v6a" value="None of the above" name="checkboxes2"><label class="checkbox-aligned elq-item-label" for="checkbox-None of the above_b8bk6v6a">None of the above</label><br></div></div></div></div></div></div>

Thanks in advance.

Thanks,

Sainath

Take a look at this post for how to show/hide a field and combine that with the validation enable/disable like I talked about from above and you should be able to come up with a solution. Basically once the field is hidden, you're going to have to disable the validation for that field. Then if the field is shown again, you will have to enable validation again. It's a pain, and I actually recommend that you make any hidden field not required (if possible). But if you can't, try the above. Best of luck!

Take a look at this post for how to show/hide a field and combine that with the validation enable/disable like I talked about from above and you should be able to come up with a solution. Basically once the field is hidden, you're going to have to disable the validation for that field. Then if the field is shown again, you will have to enable validation again. It's a pain, and I actually recommend that you make any hidden field not required (if possible). But if you can't, try the above. Best of luck!

Hi Ben,

I tried your suggestion to disable and enable the validation for the field. But .disable and .enable aren't working. can you please check below code pen and tell me if I am missing something?

https://codepen.io/sainath1248/pen/mdJbOge?editors=1000

Thanks in advance

Sainathk

Hey Sainathk,

Because JavaScript is a lexical environment, we need to make sure to place any scripts referencing live validation after line 844 which contains the actual live validation script. Right now you are calling .disable and .enable and the live validation script has not run, so it doesn't recognize what those are.

Best regards,

-Ben

Thanks, Ben. That was a helpful tip.