Extending Eloqua 10 Form Validation

bkhayes

This thread was a great resource in helping to solve how to make a checkbox required on Eloqua 10 forms.

The code belowRyan Wheler-Oracle) . Please note that the bold areas are what needs to be swapped out with your specific field. For example, if field 4 on your form is a checkbox that is required you must change "field6" and "dom6" to "field4" and "dom4". You will also need to swap the "#form2398" with your specific form's ID. If you run into issues I would make sure that the field your checkbox is in is correct. Eloqua forms start with dom0, field0.

<!-- 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 dom6 = document.querySelector("#form2398 input[type='checkbox']");var field6 = new LiveValidation(dom6, {validMessage: "", onlyOnBlur: false, wait: 300});field6.add(Validate.Acceptance, {failureMessage:"This field is required"});

      }); // End DOM

</script>

2895345

This thread was a great resource in helping to solve how to make a checkbox required on Eloqua 10 forms.

The code belowRyan Wheler-Oracle) . Please note that the bold areas are what needs to be swapped out with your specific field. For example, if field 4 on your form is a checkbox that is required you must change "field6" and "dom6" to "field4" and "dom4". You will also need to swap the "#form2398" with your specific form's ID. If you run into issues I would make sure that the field your checkbox is in is correct. Eloqua forms start with dom0, field0.

<!-- 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 dom6 = document.querySelector("#form2398 input[type='checkbox']");var field6 = new LiveValidation(dom6, {validMessage: "", onlyOnBlur: false, wait: 300});field6.add(Validate.Acceptance, {failureMessage:"This field is required"});

      }); // End DOM

</script>

I'm happy that you found the post helpful. Mark set me on the right path. All credit goes to him. Here is a jfiddle of my final form. I hope that you find it helpful as well:

Floating 1 Form between divs - JSFiddle

Cheers,

-V

Bob at Elemental Marketing

Hope someone can help me out with this - I need to make a single checkbox required, and I've tried a lot of the options above, but I can't get any of them to work. The problem is not so much that the scripts don't work, but that Eloqua seems to overwrite any changes to the form code with the original. I reckon I might be able to put the script outside the form code, but the input for my checkbox doesn't have an ID. Can I give it one via JS that's outside of the form's default code, so I can get the code to work?

bkhayes

Hi Bob,

If you use my method from above you should be able to get it to work. Just make sure you have the right field number and match that with the dom number. The first field on the form starts with 0 so if you have first name, last name, single check box the checkbox would be "field2", "dom2". Also please note that you need to place this script towards the bottom of the page (not in replace of the Eloqua form validation that exists after the form).

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

Let me know if this works!

Ben

Bob at Elemental Marketing

Hi Bob,

If you use my method from above you should be able to get it to work. Just make sure you have the right field number and match that with the dom number. The first field on the form starts with 0 so if you have first name, last name, single check box the checkbox would be "field2", "dom2". Also please note that you need to place this script towards the bottom of the page (not in replace of the Eloqua form validation that exists after the form).

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

Let me know if this works!

Ben

Hi Ben,

Thanks so much, this works swimmingly! Apart from one little thing: the error message when the field is not checked is displayed over the checkbox itself, making it impossible to check it. It seems similar to what @mhalliday posted way back in his OP, about insertAfterWhatNode, but I'm not really sure where to put that bit in your script. If that's even the right solution at all.

Can you help me out?

Thanks!

bkhayes

Hi Ben,

Thanks so much, this works swimmingly! Apart from one little thing: the error message when the field is not checked is displayed over the checkbox itself, making it impossible to check it. It seems similar to what @mhalliday posted way back in his OP, about insertAfterWhatNode, but I'm not really sure where to put that bit in your script. If that's even the right solution at all.

Can you help me out?

Thanks!

Hi Bob,

In the code where you see: "failureMessage:'This field is required'" change the error message to blank "". If this doesn't solve your issue let me know. There may be a CSS solution to it.

Best,

Ben

Bob at Elemental Marketing

Hi Bob,

In the code where you see: "failureMessage:'This field is required'" change the error message to blank "". If this doesn't solve your issue let me know. There may be a CSS solution to it.

Best,

Ben

Hi Ben,

Thanks - but I do want to display an error message, so leaving it blank is not an option. It's just that I want it positioned elsewhere (i.e., not covering the checkbox itself). I'm thinking CSS as well, it's just that I'm not sure how to put that in there as I'm no JS expert.

Regards,

Bob

bkhayes

Hi Ben,

Thanks - but I do want to display an error message, so leaving it blank is not an option. It's just that I want it positioned elsewhere (i.e., not covering the checkbox itself). I'm thinking CSS as well, it's just that I'm not sure how to put that in there as I'm no JS expert.

Regards,

Bob

Hey Bob,

If you can supply a link to what you are working on I may be able to assist you with CSS that could position it. I am going to guess that it would be setting some margin in CSS to the error message itself to move it away from covering it.

Best,

Ben

mcalnan

Hi Bob,

If you use my method from above you should be able to get it to work. Just make sure you have the right field number and match that with the dom number. The first field on the form starts with 0 so if you have first name, last name, single check box the checkbox would be "field2", "dom2". Also please note that you need to place this script towards the bottom of the page (not in replace of the Eloqua form validation that exists after the form).

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

Let me know if this works!

Ben

This worked perfectly for me as well Ben @bkhayes thank you! I've seen folks reference radio button validation as well, do you have any insight into how to adjust your code to make it work in that instance as well? I tried in my super limited coding experience to no avail. Thanks in advance!

bkhayes

This worked perfectly for me as well Ben @bkhayes thank you! I've seen folks reference radio button validation as well, do you have any insight into how to adjust your code to make it work in that instance as well? I tried in my super limited coding experience to no avail. Thanks in advance!

Hi Mcalnan,

You could try the code below. Not sure if it will work but hopefully it gives you a starting point. The bold underlined portion is the part I changed. Instead of "checkbox" place in "radio".

<!-- 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='radio']");var field# = new LiveValidation(dom#, {validMessage: "", onlyOnBlur: false, wait: 300});field#.add(Validate.Acceptance, {failureMessage:"This field is required"});

      }); // End DOM

</script>

If that doesn't work it may require a different validate type then "Validate.Acceptance". I would have to experiment with it further.

mcalnan

Thanks @bkhayes, I did try adjusting the value to radio, as well as a few other iterations, such as radios, radio-buttons, and radio-button with no success. I've found other sources online through generic web search but everything I seem to find requires HTML5, which isn't firing properly when I try it out.  If you ever get a solution that would be great, but I'll continue to try different solutions I find, thanks!

bkhayes

Thanks @bkhayes, I did try adjusting the value to radio, as well as a few other iterations, such as radios, radio-buttons, and radio-button with no success. I've found other sources online through generic web search but everything I seem to find requires HTML5, which isn't firing properly when I try it out.  If you ever get a solution that would be great, but I'll continue to try different solutions I find, thanks!

Hey Mcalnan,

Sorry that it didn't get you 100% of the way to a solution.

You could try something like this:

HTML5: How to use the "required" attribute with a "radio" input field - Stack Overflow

I would suggest having one radio check in place when you first start out. Otherwise the user cannot turn back to the state of all unchecked.

Best,

Ben

mcalnan

Hey Mcalnan,

Sorry that it didn't get you 100% of the way to a solution.

You could try something like this:

HTML5: How to use the "required" attribute with a "radio" input field - Stack Overflow

I would suggest having one radio check in place when you first start out. Otherwise the user cannot turn back to the state of all unchecked.

Best,

Ben

I did try that route as well but no luck yet...I'm guessing I'm missing a comma or a div tag or something simple. I'm taking a crash course in jquery and js to try and figure it out, thanks!

3347806

This thread was a great resource in helping to solve how to make a checkbox required on Eloqua 10 forms.

The code belowRyan Wheler-Oracle) . Please note that the bold areas are what needs to be swapped out with your specific field. For example, if field 4 on your form is a checkbox that is required you must change "field6" and "dom6" to "field4" and "dom4". You will also need to swap the "#form2398" with your specific form's ID. If you run into issues I would make sure that the field your checkbox is in is correct. Eloqua forms start with dom0, field0.

<!-- 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 dom6 = document.querySelector("#form2398 input[type='checkbox']");var field6 = new LiveValidation(dom6, {validMessage: "", onlyOnBlur: false, wait: 300});field6.add(Validate.Acceptance, {failureMessage:"This field is required"});

      }); // End DOM

</script>

Hi Ben

Thanks for this great code. It helped perfectly. What can I do if I need multiple checkboxes to be required. None of the other tips worked for me. I need a required box for the following question:

- 4 Options / 2 have to be picked.

Workshop A

Workshop B

Workshop C

Workshop D

-> they have to select 2

How can I code this? Where do I have to place it in my landing page code?

Thank you so much for your help.

Cheers

Natalie

3341989

Hi Bob,

If you use my method from above you should be able to get it to work. Just make sure you have the right field number and match that with the dom number. The first field on the form starts with 0 so if you have first name, last name, single check box the checkbox would be "field2", "dom2". Also please note that you need to place this script towards the bottom of the page (not in replace of the Eloqua form validation that exists after the form).

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

Let me know if this works!

Ben

Hi Ben

Thanks for this great code. It helped perfectly. What can I do if I need multiple checkboxes to be required. None of the other tips worked for me. I need a required box for the following question:

- 4 Options / 2 have to be picked.

Workshop A

Workshop B

Workshop C

Workshop D

-> they have to select 2

How can I code this? Where do I have to place it in my landing page code?

Thank you so much for your help.

Cheers

bkhayes

Hi Ben

Thanks for this great code. It helped perfectly. What can I do if I need multiple checkboxes to be required. None of the other tips worked for me. I need a required box for the following question:

- 4 Options / 2 have to be picked.

Workshop A

Workshop B

Workshop C

Workshop D

-> they have to select 2

How can I code this? Where do I have to place it in my landing page code?

Thank you so much for your help.

Cheers

Natalie

Hi Natalie,

Hope this helps!

Place the following code right before the ending </body> tag on the landing page HTML. The bold and underlined number is where you can change the number of required checkboxes. Then you just have to change the alert message to the number of desired checkboxes. Also, don't forget to include the jQuery library that was provided below.

<!-- jQuery 1.12.4 -->

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

<!-- Script That Makes At Least Two Checkboxes Required On An Eloqua 10 Form -->

<script type="text/javascript">

$(document).ready(function() {

  $('input[type=submit]').click(function() {

    checked = $("input[type=checkbox]:checked").length;

     <!-- Change the number below to the desired amount of required checkboxes -->

    if (checked !== 2) {

     <!-- Change this alert message to warn about the desired amount of required checkboxes -->

      alert("You must check at least two checkboxes.");

      return false;

    }

  });

});

</script>

bkhayes

Hi Natalie,

Hope this helps!

Place the following code right before the ending </body> tag on the landing page HTML. The bold and underlined number is where you can change the number of required checkboxes. Then you just have to change the alert message to the number of desired checkboxes. Also, don't forget to include the jQuery library that was provided below.

<!-- jQuery 1.12.4 -->

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

<!-- Script That Makes At Least Two Checkboxes Required On An Eloqua 10 Form -->

<script type="text/javascript">

$(document).ready(function() {

  $('input[type=submit]').click(function() {

    checked = $("input[type=checkbox]:checked").length;

     <!-- Change the number below to the desired amount of required checkboxes -->

    if (checked !== 2) {

     <!-- Change this alert message to warn about the desired amount of required checkboxes -->

      alert("You must check at least two checkboxes.");

      return false;

    }

  });

});

</script>

*UPDATED ANSWER*

If you want to make it easier you can use this instead. Simply place before ending </body> tag in HTML and change requiredChecked to your desired amount. This code is set to two.

<!-- jQuery 1.12.4 -->

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

<!-- Script That Makes A Set Amount Of Checkboxes Required On An Eloqua 10 Form -->

$(document).ready(function() {

  $('input[type=submit]').click(function() {

    checked = $("input[type=checkbox]:checked").length;

    <!-- Change This To Your Desired Amount Of Required Checkboxes -->

    requiredChecked = 2;

    if (checked !== requiredChecked) {

      alert("You must check at least" + " " + requiredChecked + " " + "checkboxes.");

      return false;

    }

  });

});

3341989

*UPDATED ANSWER*

If you want to make it easier you can use this instead. Simply place before ending </body> tag in HTML and change requiredChecked to your desired amount. This code is set to two.

<!-- jQuery 1.12.4 -->

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

<!-- Script That Makes A Set Amount Of Checkboxes Required On An Eloqua 10 Form -->

$(document).ready(function() {

  $('input[type=submit]').click(function() {

    checked = $("input[type=checkbox]:checked").length;

    <!-- Change This To Your Desired Amount Of Required Checkboxes -->

    requiredChecked = 2;

    if (checked !== requiredChecked) {

      alert("You must check at least" + " " + requiredChecked + " " + "checkboxes.");

      return false;

    }

  });

});

Hi Ben

Thank you so much for your quick help, but unfortunately it didnt work. I placed it right before </body>.  I just placed it at the end of the HTML. Please see pic below

My form looks like this

I just remember that for the single checkbox we had to add the form and field number info. How does the form know we mean this field? Is that automatically?

Sorry, but I am totally new to the coding landscape. Thank you so much for your help.

Best wishes

Daniela

bkhayes

Hi Ben

Thank you so much for your quick help, but unfortunately it didnt work. I placed it right before </body>.  I just placed it at the end of the HTML. Please see pic below

My form looks like this

I just remember that for the single checkbox we had to add the form and field number info. How does the form know we mean this field? Is that automatically?

Sorry, but I am totally new to the coding landscape. Thank you so much for your help.

Best wishes

Daniela

Hey,

Notice on the HTML editor how the JavaScript is in white? That means that it isn't surrounded by the proper <script type="text/javascript"> tags. You must have accidentally stripped those out. Once you add in that it will work fine for you and yes it is automatic, you don't have to input your checkbox names.

Best,

Ben

bkhayes

Hey,

Notice on the HTML editor how the JavaScript is in white? That means that it isn't surrounded by the proper <script type="text/javascript"> tags. You must have accidentally stripped those out. Once you add in that it will work fine for you and yes it is automatic, you don't have to input your checkbox names.

Best,

Ben

Whoops! I realized I stripped those out in my updated answer! Here is the proper snippet to copy over! Sorry for the confusion.

<!-- jQuery 1.12.4 -->

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

<!-- Script That Makes A Set Amount Of Checkboxes Required On An Eloqua 10 Form -->

<script type="text/javascript">

$(document).ready(function() {

  $('input[type=submit]').click(function() {

    checked = $("input[type=checkbox]:checked").length;

    <!-- Change This To Your Desired Amount Of Required Checkboxes -->

    requiredChecked = 2;

    if (checked !== requiredChecked) {

      alert("You must check at least" + " " + requiredChecked + " " + "checkboxes.");

      return false;

    }

  });

});

</script>

3341989

*UPDATED ANSWER*

If you want to make it easier you can use this instead. Simply place before ending </body> tag in HTML and change requiredChecked to your desired amount. This code is set to two.

<!-- jQuery 1.12.4 -->

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

<!-- Script That Makes A Set Amount Of Checkboxes Required On An Eloqua 10 Form -->

$(document).ready(function() {

  $('input[type=submit]').click(function() {

    checked = $("input[type=checkbox]:checked").length;

    <!-- Change This To Your Desired Amount Of Required Checkboxes -->

    requiredChecked = 2;

    if (checked !== requiredChecked) {

      alert("You must check at least" + " " + requiredChecked + " " + "checkboxes.");

      return false;

    }

  });

});

Hi Ben

IT WORKED. I kept testing. Thank you so much. But now I am facing another problem. It would be awesome if you could help me with this.

Besides my 3 checkboxes, I have a single check box with our Privacy Policy which has to be required as well. This means I am now using both your codes (for a single checkbox and multiple checkboxes) in one form. Unfortunately, instead of the single checkbox, the first box in the multiple picklist is now required, please see below:

The single checkbox is not required anymore. Before I added the multiple checkboxes it worked just fine.

The code I used for the single checkbox is the following. I used the forth field category so I placed nr 4 in the code.

Was that wrong?

Thanks again so much.

bkhayes

Hi Ben

IT WORKED. I kept testing. Thank you so much. But now I am facing another problem. It would be awesome if you could help me with this.

Besides my 3 checkboxes, I have a single check box with our Privacy Policy which has to be required as well. This means I am now using both your codes (for a single checkbox and multiple checkboxes) in one form. Unfortunately, instead of the single checkbox, the first box in the multiple picklist is now required, please see below:

The single checkbox is not required anymore. Before I added the multiple checkboxes it worked just fine.

The code I used for the single checkbox is the following. I used the forth field category so I placed nr 4 in the code.

Was that wrong?

Thanks again so much.

So you are trying to have 2 checkboxes required? Or are you trying to have the privacy checkbox and any other checkbox required?

bkhayes

So you are trying to have 2 checkboxes required? Or are you trying to have the privacy checkbox and any other checkbox required?

What if you make them all single checkboxes. Does it work for you then?

3341989

What if you make them all single checkboxes. Does it work for you then?

Hi Ben

Yes, I want to have the picklist 'Workshops' required, so that people have to select at least two options and additionally I want the Single Checkbox 'Privacy Setting' required. Having them all single is not working, as the participants can only select two workshops out of the three options.

I want to keep both the workshop and privacy two separate custom fields that are both required.

Is that possible? How could I do that?

3341989

What if you make them all single checkboxes. Does it work for you then?

The form in the form editor looks like this

bkhayes

The form in the form editor looks like this

Just for clarity here, you want the following, correct?

• 2 out of the 3 group checkboxes must be required
• Privacy Policy must also be required

If that is the case:

<!-- jQuery 1.12.4 -->

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

    

    <!-- Script That Makes A Set Amount Of Checkboxes Required On An Eloqua 10 Form -->

    <script type="text/javascript">

    $(document).ready(function() {

      var dom1 = document.querySelector("input[name=singleCheckbox]");var field1 = new LiveValidation(dom1, {validMessage: "", onlyOnBlur: false, wait: 300}).add(Validate.Acceptance, {failureMessage:" "});

      $('input[type=submit]').click(function() {

        checked = $("input[name=checkboxes]:checked").length;

        requiredChecked = 2;

        if (checked !== requiredChecked && checked <= requiredChecked) {

          alert("You must check at least" + " " + requiredChecked + " " + "checkboxes and the terms & conditions box.");

          return false;

        }

      });

    });

    </script>

Working Eloqua 10 example here:

Multiple Required Checkbox Testing Page

Anthony Larsen

Hi @mhalliday I am running into an issue with my form validation, I have form validation set up for a number of fields on my company's contact form, however in your example with your email address when you click on the field and then click off you get a this field is required message, with our form when I try this nothing happens. Is there any insight you can provide to why our form is not acting the same as your example?

Thank you,

Tony 

3341989

Just for clarity here, you want the following, correct?

• 2 out of the 3 group checkboxes must be required
• Privacy Policy must also be required

If that is the case:

<!-- jQuery 1.12.4 -->

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

    

    <!-- Script That Makes A Set Amount Of Checkboxes Required On An Eloqua 10 Form -->

    <script type="text/javascript">

    $(document).ready(function() {

      var dom1 = document.querySelector("input[name=singleCheckbox]");var field1 = new LiveValidation(dom1, {validMessage: "", onlyOnBlur: false, wait: 300}).add(Validate.Acceptance, {failureMessage:" "});

      $('input[type=submit]').click(function() {

        checked = $("input[name=checkboxes]:checked").length;

        requiredChecked = 2;

        if (checked !== requiredChecked && checked <= requiredChecked) {

          alert("You must check at least" + " " + requiredChecked + " " + "checkboxes and the terms & conditions box.");

          return false;

        }

      });

    });

    </script>

Working Eloqua 10 example here:

Multiple Required Checkbox Testing Page

Hi Ben

It works perfectly, this is awesome. I can't thank you enough!!!!!!!!!!!!!

Cheers

Daniela

bkhayes

Hi Ben

It works perfectly, this is awesome. I can't thank you enough!!!!!!!!!!!!!

Cheers

Daniela

All you have to do now is mark the answer as correct on your end   Glad it worked for you!

rlnagelmaker

@MateuszDąbrowski

Check this out funny.

kr,

Robert