Personal tools

Log in

Changes

From All n One's bxp software Wixi

Jump to: navigation, search

JavaScript - Extending Outcome Validation

3,741 bytes added, 15:03, 1 September 2014
Created page with "== Overview == Extending the validation of outcomes on the page involves you using custom JavaScript and knowing a little about how the validation engine works. The primar..."
== Overview ==


Extending the validation of outcomes on the page involves you using custom JavaScript and knowing a little about how the validation engine works.


The primary validation of the page is done in a function called


<syntaxhighlight lang="javascript">
function js_fn_Master_Validation_Script(obj) {
</syntaxhighlight>


This function uses two variables called blError and strError_Message.


If blError == true then the page will not submit. The message that the user sees is in the strError_Message variable.


The function is called when the Submit button on the page is pressed.


Each outcome gets its own discrete set of rules


<syntaxhighlight lang="javascript">
if (obj.value == 'Save Test') {

}
</syntaxhighlight>


Validation can be done using the standard outcome validation constructors.


'''Main Menu > Form Management > Form - Outcome Manager > Outcome - Edit > Choose your Form > Choose the outcome > JavaScript > Validation'''


However further customisation can be done through


'''Main Menu > Form Management > Form - Outcome Manager > Outcome - Edit > Choose your Form > Choose the outcome > JavaScript > JavaScript''' This section injects custom JavaScript into this js_fn_Master_Validation_Script function.



== Worked Example ==


If you wanted to add validation to an outcome to check if text was in a box. Firstly work out the Form specific name of the field we want to validate. e.g. strCDA_X_field_0_1. If you click the pencil icon to the right of the question, at the very top of the editing page, you will see the name there.


So if we want to check the content has some values then...



<syntaxhighlight lang="javascript">


// Firstly we work out how long is the data that has been typed into the box
var intLength_CDA_X_field_0_1 = document.getElementById('strCDA_X_field_0_1').value.length;


// If the length of the content is 0, then nothing has been typed in.
if (intLength_CDA_X_field_0_1 == 0) {


// Firstly we tell bxp that we have found a validation error.
blError = 'True';


// Along with any other validation messages, we tell the user how to correct the issue.
// Please make your error messages helpful to your users so they know how to fix the issue
strError_Message = strError_Message + 'Please type something into the strCDA_X_field_0_1 field.';


}
</syntaxhighlight>


From here you can add as many rules as you like to the outcome with as much custom validation as you require.



== Function injection ==


Putting in lots and lots of validation in an outcome can make the code difficult to manage over time. Especially if the validation repeats. e.g. 4 outcomes with the same validation. If there is an update there are four validation routines to use rather than 1.


When this occurs it can be useful to "abstract" the validation to a centralised function. Put your validation function into the onLoad of the Form. Then all outcomes can access it. So we in two steps.


=== Step 1 ===


Firstly we create a centralised validation function that returns text.


<syntaxhighlight lang="javascript">

function fn_CentralValidation() {

var strMyErrorMessage = '';
var intLength_CDA_X_field_0_1 = document.getElementById('strCDA_X_field_0_1').value.length;

if (intLength_CDA_X_field_0_1 == 0) {
strMyErrorMessage = strMyErrorMessage + 'Please type something into the strCDA_X_field_0_1 field.';
}
return strMyErrorMessage ;

}

</syntaxhighlight>



=== Step 2 ===


Now with that in place, we can put into each function....

<syntaxhighlight lang="javascript">

var strMessage = fn_CentralValidation();
if (strMessage.length > 0){
blError = 'True';
strError_Message = strError_Message + strMessage;
}

</syntaxhighlight>
7,528
edits