// 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;
}

// 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;

}

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?

Hello Steve, 

I believe my answer came a little late but here it goes for version 10: 

Use a JS widgit in the web block with 

SyntaxEditor Code Snippet

"setTimeout(customValidator, 1000,'" +  myWidget.Id +"' );"

Enjoy OutSystems

Graça

Hi,

I have a use-case, wherein i am using a WebBlock, Within the WebBlock,for any given object, the widget used for setting the object's value may be a radiobutton, a combobox, upload and other mechanisms.

We need to do client-side validation  wherein each of the objects in the webblock is mandatory. I find Outsystems inbuilt validation for combobox and textbox, but how do i implement for making a radio button selection and upload selection to be mandatory.? 

In my use case what if the radiobuttons are left untouched, what can be don to make this mandatory?

I can implement this by checking the value of the variable to which the radio buttons are associated.If null throw an alert (given below)

function validateRadioButton() {
    if (FormData.EmploymentStatus=0) {
        alert("Please Select atleast one field");
         }
 
}

but the problem here is the button on which the validateRadioButton() is called is on the webscreen and is not able to fetch the variable "FormData.EmploymentStatus" as it is on the webblock.(Plz note: Webscreen has many child webblocks)

So how do I implement, client-side validations to input fields- like radiobtns and upload in the child WebBlocks?

Hello, 

I came across this post recently and wanted to share the solution I have implemented.

we can call oninput event on an input field and then do a custom validation with Javascript.

declare an output variable and set it true or false according to condition. Then use that output variable in if condition. assign the Valid and ValidationMessage properties of the widget.

This way we do not to wait to click submit button for validation.

For example: If we want an input field with letters and numbers allowed. Users will not be able to even type other characters and an input error message will be shown.

The steps are as follows:

1. add a from to screen and then add input of type text. assign it to a local variable of type text.

2. Add oninput event handler with a client action.

3. Add JS node and apply validation logic. Use a boolean output parameter to handle validation.

here, aplhaNum is the widget Id of input.

4. Now, check the value of the output parameter and according set the Valid property of the input widget.

The JS logic is just what I used. You can apply your own logic for different types of input conditions.

Thankyou.