Discussions

Extending Eloqua 10 Form Validation

124»

Comments

  • 3040367
    3040367 Posts: 8 Green Ribbon

    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.

    2018-05-17_11-23-21.png

    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?

  • markhalliday
    markhalliday Posts: 31 Silver Trophy

    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.

    2018-05-17_11-23-21.png

    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?

    Livevalidation has a built in checkbox validation that you can use. So for each checkbox just add a validaion:

    var cb1= new LiveValidation("<ID OF CHECKBOX1>", {validMessage: "", onlyOnSubmit: true});cb1.add(Validate.Acceptance, {failureMessage:"This field is required"});

    var cb2= new LiveValidation("<ID OF CHECKBOX2>", {validMessage: "", onlyOnSubmit: true});cb2.add(Validate.Acceptance, {failureMessage:"This field is required"});

  • User_MGRWK
    User_MGRWK Posts: 1 Red Ribbon

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

  • bkhayes
    bkhayes Posts: 59 Silver Medal

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

  • Sainathk
    Sainathk Posts: 8 Red Ribbon

    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

  • bkhayes
    bkhayes Posts: 59 Silver Medal

    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!

  • bkhayes
    bkhayes Posts: 59 Silver Medal

    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!

  • Sainathk
    Sainathk Posts: 8 Red Ribbon

    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,

    Thanks for responding. As you mentioned, How do I make a field not required when it's hidden.?

    Thank You!

  • Sainathk
    Sainathk Posts: 8 Red Ribbon

    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

  • bkhayes
    bkhayes Posts: 59 Silver Medal

    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

  • Sainathk
    Sainathk Posts: 8 Red Ribbon

    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.