Validate Form Inputs
Client-side Validation of Inputs
This lesson is part of the Developer Online Class for OutSystems 9 course.
LEARN MORE

Transcript
In this session we will see how to validate user inputs in the client side
and avoid a request being made to the server with invalid information
And, as you'd expect to have client side validation we will need to change here the Save button
and we will change the Validation property to 'Client & Server'
The input validation is performed in the client side.
If the validation fails, a message is displayed and no request is made to the server
If the typed values are valid, then a request is made to the server
The screen action of this button is executed
And the validations are run again on the server side
The client side validations that the platform does are to test if mandatory inputs are filled in
and, if the values in these inputs are compatible with the data types of the variables used to store their value
So, again, let's let's set a breakpoint here in the debugger
we will make sure that the client side validations avoid that a request is made to the server
Let me just start here the debugger
and, let's publish the changes so that we can test this in the browser
okay. let's go into the products again. And, let's edit our 'USB Camera'
and, let's remove here the name of the product and hit Save.
Notice that we have immediate feedback that the field is a required field
and we need to fill in this data. And, if we go back here into the development environment, you'll notice that
the breakpoint was not hit. The debugger did not stop here in the breakpoint and that's because
the request was not made to the server.
Now. Let's go back here. If we try to save this product with no name and a negative price
You will see that this validation is performed, this is a client side validation.
it is a mandatory field
but the validation that we added in the server side is not executed. It is not a client side validation.
But if we set here the price to be a data type not compatible with that variable
and we try to save it again. You'll notice that now we will have here an error for this input
it is mandatory and it's not filled in. And, this other one has an invalid data type
Now. Let's make sure that the validations on the server side are still working
Let's change here the name again 'USB Camera'.
and let's add a valid price.
And, a valid price according to the data type but not according to the logic we added in the server side
so let' say here that this is minus ten. Save.
And notice that this is going to the server now. this is going to the server. see the browser loading the page
This is going to the server, we're stopped at the breakpoint. So this means that
the client side validations were performed and were ok. And, now.
the quantity in stock is ok but the product price is not valid
and we're going to invalidate that input and let's continue the request
and you'll notice here that the server side validation was performed as well
And that's it.