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:
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:
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:
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.