HTML Best Practice

How to provide own HTML Validation Scripts

Inside the Form Field Details Editor you may specify client side validation scripts to validate user input before submitting a form. If the validation fails (i.e. some user input is invalid) then the form will not be submitted.

Out of the box, Axon.ivy allows you to select from a number of predefined scripts, e.g. Integer > 0 as shown below:

image4

Testing for Integer > 0 may be fine for some cases, but what if you need to test whether an integer value is greater than 10 and smaller than 20? In this case you need to provide your own validation script to test your specific input requirements.

HTML validation scripts are written in JavaScript and are stored in a *.js file. The script file contains a header line and a check function. For example:

 1<!--ivy.input_validate name_de="Ganzzahl: 10 < x < 20" name_en="Integer: 10 < x < 20"-->
 2function integerBetween10And20(field,msg,loc) 
 3{ 
 4  msg_en=field.name+" must be a Number between 10 and 20";      // default message en
 5  msg_de=field.name+" muss eine Zahl zwischen 10 und 20 sein";  // default message de  
 6
 7  if(field.value.length==0 
 8     || isNaN(new Number(field.value)) 
 9     || !(field.value > 10 && field.value < 20)) // check function
10  {
11    if(msg!=null && msg.length>0)     
12      alert(msg);     // alert with custom message, if defined
13    else if(loc=="de")       
14      alert(msg_de);  // alert with default german message
15    else       
16      alert(msg_en);  // alert with default english message  
17    return false;   
18  }   
19  else 
20  {
21    return true; 
22  }
23}

The header of the script file defines the name of the script as it is displayed in the validation combo box of the Form Field Details Editor.

The JavaScript validation function must always define the same 3 parameters: field is the field that is being validated, msg is the custom validation alert message that may optionally be defined when selecting a validation script and loc is the language code that will be provided by the Axon.ivy runtime system.

The above defined checks if the given input field contains a number between 10 and 20 and if so, true is returned. If the value is not a number or not between 0 and 20, then an alert message is shown to the user and false will be returned (which will prevent the sending of the form, as long as the field value is not correct).

In order for the script to be able to selected from the Form Field Details Editor, it must be located in the webContent/scripts/validation folder of the Axon.ivy project where it will be used:

image5

Once you have copied your script to this location, it will become available in the validation selection combo box of the Form Field Detail Editor:

image6

Tip

If you don’t like the behavior of any built-in scripts then you may change them as well. Simply edit the associated validation script file.

You may generally edit the available validation scripts at any time. The changes will become effective immediately on save (unless browsers or other internet entities use a previously cached copy of an old script).

Warning

Please note, that JavaScript must be enabled in your client’s browsers in order for any validation scripts to work!

Also make sure that the name of your script function and the name of your script file are exactly identical (including capitalization). The script will be referred by name of the file. If it does not match the actual function name, then the script will not be executed, and validation will not take place without any obvious error.