Input Extensions – Input Validation
Following on from the recent posts about Errors and Input Extensions, this week we’re going to look at input validation and error handling. Not, you will understand, error handling in the JavaScript sense (writing try…catch and so forth) but how to handle errors that the user makes when entering data in your Input Extension.
Let’s set the scene with some simple examples. You have created an Input Extension in the form of an INPUT tag that displays an attribute for the user to enter. You intend to use the validate handler to do the work of testing the user’s data entry and flagging it to the user if they have made a mistake.
So you begin by understanding that the validation handler is ultimately a three way trigger : you can return true (in which case there is no error, and the data entered passes validation) or false (you wish to signal to the user there is an error, without an error message) or better still a text string which means yes there is an error, and furthermore here is a text string to tell you what it is. For our little example, we will therefore be looking to handle true and text string.
Basic Validation
var currentValue = document.getElementById("xInput").value;
var bBanana = document.getElementById("xInput").value === 'BANANA';In the above example, we retrieve the current value of the INPUT and compare it to the text string “BANANA”. If you have entered “BANANA” then you have passed our validation (true) and if not (false).
if(!bBanana)
{
return "JavaScript Validation Error";
}Great. The case is solved, to paraphrase a famous detective. But then, one day, your Input Extension stops working. It mysteriously refuses to validate your user’s data entry, even when the data entry is correct. It simply refuses to let the user go forward, but there is no error message. So where is the problem coming from?
You take a look at the attribute you are supposed to be validating and notice that the rule designer has added something since you last looked:
So the rule designer has added a Regular Expression to the attribute. And what you are entering, perhaps, is not matching the RegEx. But how on earth are you supposed to check for that / handle that in an Input Extension? There is no documented process / property set for this, but if you dig down deep enough, you can find the following properties:
Input Validation – RegEx
control._source.config.inputRestriction.regularExpression (the RegEx)
control._source.config.inputRestriction.rawErrorMessage (the message)The above properties give you access to the rule designer’s RegEx and associated error message. They do NOT, however, test the value of your input against the RegEx. So don’t forget to actually include the RegEx in your validate handler. At a simple level it might be something like this:
var regExpression = new RegExp(control._source.config.inputRestriction.regularExpression);
var bTestInput = regExpression.test(currentValue);Again, we will have a boolean variable which will tell us if the text entered has passed the RegEx validation or not. So now you can include this in your standard validation, to be able to present the user with reasonably decent message:
If you are interested in taking this further you can download an example project from the Intelligent-Advisor.com Shop. You’ll find the official reference online.
See also these older articles that may prove useful :