JavaScript In-Question Validation

Contents

1 Overview

JavaScript validation can be applied to any field in a form not just on the outcomes. This is in field validation allows an agent to correct in real time the data whilst still having the customer on the phone. In field validation is quite straight forward to set up but some considerations are needed.

The validation is added to the onFocus, onChange and onBlur events of the question. More information on this can be found at JavaScript_Field_Events

Lets start with a few simple examples.

2 Ensure there is content

We have a text box which stores a mobile number. We do not want to let the agent move on until a phone number is in there. Why a phone number, well if you are in a call you really should have a number to call the customer back on, so phone number should be vital.

The event is: when the agent moves into and then out of the phone number text box, we want to alert the user to put something and move them back into the phone number box.

Process

1. Take a text box on any form. Make sure you have edit permission to this form, i.e. there is a little pencil icon to the right of every question.
2. Go to the very top of the editing page to find the field name. Usually in the format strCDA_X_field_Y_Z. For our example we will use the one displayed, i.e. strCDA_1170_field_0_3
3. Go down to the onBlur box and enter the following

var strCDA_1170_field_0_3 = document.getElementById('strCDA_1170_field_0_3');
if ( strCDA_1170_field_0_3.value == '' ) {
	strCDA_1170_field_0_3.focus();
	alert('Sorry but you must provide a phone number.');
}

Now if you try to move past the phone number box, the system will stop you with a message and return the focus into the box so the agent can enter a number.

Line 1. Creates a variable (the var bit). A variable is an object you can do things with. You can name your variables pretty much anything. We have named this variable uniquely with the same name as this question, for ease of reference. Into this variable ( the = character ) we ask the web page to transfer the text box into this object.)

Line 2. We now use our new object. We ask a question... if the value in our variable (strCDA_1170_field_0_3.value) is equal to (==) an empty string ( ) then

Line 3. Put the focus of the cursor back into the text box.

Line 4. Pop up an error to the user advising them what they need to do.

Line 5. This closes up the structure of the question if ( comparison ) { work to be done }. You'll see the opening { at the end of line 2.

Now go try it. You should be restricted to typing something into the box before you can continue.

3 Ensuring minimum length

With a phone number we may want to check that it has a minimum number of characters, so we can add an extra check.

Again into the onBlur

var strCDA_1170_field_0_3 = document.getElementById('strCDA_1170_field_0_3');
if ( strCDA_1170_field_0_3.value.length < 7 ) {
	strCDA_1170_field_0_3.focus();
	alert('Sorry but you must provide a phone number which is at least 7 characters long.');
}

Line 2. This is the only big change. Our conditional rule has now become ... if the length of the value that is in our variable (strCDA_1170_field_0_3.value.length) is less than 7 characters... then set the focus and advise the user appropriately.

Line 4. We update the error message to help the user to correct their own data entry.

4 Ensuring that only numbers are used

BE includes a vast library of functions to reduce the amount of time you need to spend developing code. All of our library functions are exceptionally cross compatible and have been tested and are known to provide consistent results in Internet Explorer, Firefox, Safari, Opera and Chrome. The library is automatically include on every BE form page for you.

The library can be found at [1]

One of the functions in this library is called fn_isNumeric which returns true or false.

So again into the onBlur and we now add

var strCDA_1170_field_0_3 = document.getElementById('strCDA_1170_field_0_3');
if ( (strCDA_1170_field_0_3.value.length < 7) && ( fn_isNumeric ( strCDA_1170_field_0_3.value ) == false ) ) {
	strCDA_1170_field_0_3.focus();
	alert('Sorry but you must provide a phone number which is at least 7 numbers long.');
}

Line 2. we add a second rule separated by && which is AND in English. So we are saying that we need a length of 7 characters AND we check the value of our variable by passing it to isNumeric and fn_isNumeric will reply. If the reply from fn_isNumeric is false, then we need to stop the user.

Line 4. We update the error message to let the user know they have to put in numbers rather than any ol character.