This post is inspired by a question asked about validating in group of check boxes in a form. While some solutions were given, I thought I could take it further and actually get validation to work the way that out-of-the-box validation works in Eloqua. Here is the result.

 

Creating the Eloqua form

I used E10 to create my simple text form. To create the group of checkboxes, just select the 'checkboxes' option in the left-hand column under the heading 'CUSTOM FIELDS'.

ee_form.png

In the Field Settings section, note the HTML name of your checkbox group. In my example, the name is 'checkboxes' (you'll need this later).

 

When you're happy with your form, save it, then under the settings dropdown, select 'View HTML' - copy and paste your HTML into your favorite HTML editor (I just use Notepad++).

 

Customizing Validation

Its good to understand how Eloqua validates forms before you go extended the code. Eloqua 10 uses a light-weight JavaScript library called LiveValidation to validate forms client-side. It has plenty of pre-built functions that make validation easy. But it doesn't do everything (like validating that a certain number of checkboxes are checked). But it does provide a custom function that allows you to validate a value against a custom function that returns true when valid or false when not valid. We're going to take advantage of this. You'll find your livevalidation CSS (for error styling) and JavaScript at the bottom of you copied code. In my example, I had made the email address field (id of field1) required. LiveValidation took care of this for us:

 

unadulteratedval.png

 

We're going to add validation to the checkboxes. All the checkboxes in the checkbox group have the same id (in my example, field3). You'll need to add this code to your livevalidation JavaScript:

 

var field3 = new LiveValidation( "field3", {onlyOnSubmit: true, insertAfterWhatNode:"cb_err_msg" } );

This field creates a new LiveValidation for field3 ( our checkboxes) and specifies where to put the error message. By default the error message ends up right before the first checkbox, which is ugly. In my example I gave the label element for the checkbox field an id of 'cb_err_msg'

 

 

field3.add( Validate.Custom, { against: function(value){ return isValidField(value) }, failureMessage: "Please Select 3 Values" } );

This code creates the custom validation. It will call a function that we will create that I've named isValidField(). The function is below:

 

function isValidField(){

var selectd_items = 0;

//need to call checkbox by name, not by id - bPCheckbox... is the form name

var numboxes = document.forms['bPCheckboxValidate-1348667791597'].checkboxes.length;

//counts the number of checked boxes

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

    if(document.forms['bPCheckboxValidate-1348667791597'].checkboxes[i].checked)

    selectd_items++;

//if more than 2 checkboxes are checked returns true, else returns fals   

return (selectd_items > 2)? true : false;

}

 

You will want to place this function before the livevalidation calls. Now your checkboxes will validate like the standard validation in Eloqua.

 

Full example is attached. Hope this is helpful.