JavaScript Validation

JavaScript Validation

  
How Can i extend the validation of my forms (client-side validation), using Javascript?

For example, in HTML, if i wanted to check if the user inputed only numbers i would use a JavaScipt function to return false to my form on the submit action.

Thanks.
Hello João,

OutSystems Hub Edition provides JavaScript form validation based on the type of the variable assigned to the inputs. This means that you can make sure the user inputs an integer by setting the "Variable" property of the Input to an Integer variable.

If you want to customize the validators provided by OutSystems, you can add some JavaScript code to the page to override the default validation. Per example, assume you want to add a validator to check if the input named "EmailField" contains an @.

Start by adding an "onLoad" event to the page Extend Properties. This onLoad event should be set to "setCustomValidator();". Then add the following code to the Web Screen JavaScript:


// This is the function that will be called when the page is loaded
function setCustomValidator() {
// Set the validator to myCustomValidator. This function will be defined later.
document.all["wtEmailFieldValidatorType"].clientvalidationfunction = "myCustomValidator";
// Change the text message that is displayed when the input is wrong.
document.all["wtEmailFieldValidatorType"].innerText="Text must contain a @";
}

// This is the function that implements the custom validator
function myCustomValidator (source, arguments) {
// Get the field object
var objField = document.all[source.controltovalidate];
// Check if the object value contains an @
arguments.IsValid = objField.value.indexOf('@') >= 0;
}


Best of luck,
Rodrigo
I just can't seem to stop the form to go to the next step, altough the validation is messaging an error in the input.
Hello,
This is nice,
Can I use it for all my fields?
In your example I have a field call EMailField

If I have a field called FooField, I would use

document.all["wtFooFieldValidatorType"].clientvalidationfunction = "myCustomValidator";???

Thanks,
RC
Hello João,

To make sure the form is not submitted when there are invalid fields, you must set the property "Validate Inputs" to "True" on the button or link that submits the form. By default buttons validate inputs, but links don't. Also note that links with method "Link" generate a warning when "Validate Inputs" is set to true.

Best of luck,
Rodrigo
Is it possible to post, or email a .oml simple example of a CustomValidation? I just can´t seem to stop the page from submiting.

Thanks.
Hello Rodrigo,

Yes, you can use this technique for any input or input password on your eSpace. Like you said, the name of the validator you must edit is "wt" + FieldName + "ValidatorType".

Best of luck,
Rodrigo
Hello João,

Rodrigo is away from the office today so I took this over from him.

Please find attached a small OML that demonstrates the javascript validation. The sample includes an integer input (that uses the default platform validation to only allow digits) and a email input (that is nothing more than a text input, but with Rodrigo's suggested custom validation). This should show what you require.

Incidentally, are you using the FireFox browser rather than Internet Explorer? We have detected that FireFox seems not to handle the javascripts quite the same way IE does, so validations sometimes misbehave. Our R&D team is presently investigating how we can work around this browser limitation.

Please let me know if this helped.

Regards,


Miguel
Hi there,

doing this on my form doesnt work....

on my form, the validators are working, i get the messages of required and custom validators properly,i have the property on the submit button with "Validate Inputs" = On and the form always submits with incorrect data :S !!!

in the example you attached it works and i simply can't find the diference with my own... :(
Javascript validations changed in version 4.0 of the OutSystems Platform. This means that the above explanations and samples will not work from version 4.0 onward.

Below you can find the new way to make the Javascript validations work in version 4.0. But before you do it, please consider using Server Side validations. Server Side Validations are more secure, are a better alternative as far as usability is concerned and allow you to do develop the business logic validations in Service Studio instead of developing them in JavaScript. Here's a 10 minute video explaining the new server side validation capabilities of version 4.0: http://www.outsystems.com/NetworkForums/ViewPost.aspx?PostId=6815

Still, if you really need to have JavaScript validations, here's how. Suppose you want to validate an email field, just like it was done in the previous example.

Start by adding an "onLoad" event to the page Extend Properties. This onLoad event should be set to "setEmailValidator('" + EmailField.Id + "');" where "EmailField" is the name of the input widget you want to validate. Then add the following code to the Web Screen JavaScript:

// This is the function that will be called when the page is loaded
function setEmailValidator(controlId) {
OsPage_Validators.push ({controltovalidate: controlId,
evaluationfunction: "OsCustomValidatorEvaluateIsValid",
errormessage: "Invalid email address!",
clientvalidationfunction: "myEmailValidator"});
}

// This is the function that implements the custom validator
function myEmailValidator (source, arguments) {
// Get the field object
var objField = document.all[source.controltovalidate];
// Check if the object value contains an @
arguments.IsValid = objField.value.indexOf('@') >= 0;
}


The "myEmailValidator" code will be invoked when you click the "Submit" button. If the field does not contain an @ symbol an "Invalid email address!" message will appear.

In attach you can find an updated version of the sample OML Miguel Melo posted earlier.

Best of luck,
Rodrigo
Hello, all! I know this thread is very old, but I'm using custom validators and I would like to know how can I add arguments for my custom validator. I'm using the following: onload: SetCustomValidators('" + txtMSISDN.Id + "', 'ValidatorMaxLength', 'Número incorrecto'); function SetCustomValidators(field, func, text) { OsPage_Validators.push ({controltovalidate: field, evaluationfunction: "OsCustomValidatorEvaluateIsValid", errormessage: text, clientvalidationfunction: func}); } function ValidatorMaxLength(source, argz) { var objField = document.getElementById(source.controltovalidate); argz.IsValid = (objField.value.length == objField.maxLength); } And I would like to add other custom validator but with arguments. My goal is to validate if the number starts with a specific digit, but this digit can be different in some inputs... Any thoughts on this?
will this content hold true in version 9.0.0 as well?
Hi Thirupathi,

Yes it is still possible to do client-side custom validations. Check this component to see how to do it.

Hi,

I have a use-case that is, I believe, a variation on this theme and I'd like to know how to solve the problem.

I have an eSpace which consists of a WebBlock that has as its input an aggregate's output which represents a collection of objects.  The object represented by each row of this aggregate may be thought of as a derived class of a base object.  Within the WebBlock, there are a series of what may be thought of as "child" WebBlocks, each of which presents the user with the editing mechanisms for one of the child class objects.  For any given object, the widget used for setting the object's value may be a textbox, a combobox, or other type of input mechanism.

We need to do client-side validation of the data the user enters for values associated with each of these objects.  For that purpose, I have JavaScript validation routines, currently implemented at the eSpace level.  At the moment, I invoke the validation when the "onblur" Extended Property of the input widget is fired for a given WebBlock's input mechanism.  The intention is immediately save the data if the validation succeeds; otherwise, we present the user with the appropriate error message.  

What I don't yet understand is how to have those custom JavaScript validations be presented to the user with the typical OutSystems look.  (I have a work-around, but it's somewhat awkward and doesn't give that "OutSystems look"  That is, how do I get OutSystems to invoke my custom client-side validations when the "onblur" fires (or possibly, the OnChange event) for each of these input fields?  I'll try to clarify my "disconnect" a bit.

I see in the example that the process is initiated by adding an "onLoad" event to the page Extended Properties.  The example goes on to say, "This onLoad event should be set to "setEmailValidator('" + EmailField.Id + "');" where "EmailField" is the name of the input widget you want to validate."  However, my "page" consists of that top-level WebBlock and all its "child" WebBlocks and there doesn't appear to be Extended Properties associated with WebBlocks.

So how do I hook the custom, client-side validations to those various input fields in the child WebBlocks?


Follow-on issue:  I can add an "onLoad" event to the page, but within the code for that event (in the Expression Editor) I cannot access the field(s) in question.  The fields in question are encapsulated within WebBlocks and when I try defining the value of the onLoad event as...

SyntaxEditor Code Snippet

"customValidator('" + myWidget.Id + "');"

...the environment shows an error.  I also tried:

SyntaxEditor Code Snippet

"customValidator('" + MyWebBlock.myWidget.Id + "');"

...with equally unsuccessful results.  How can I access those widgets/fields?