We would like to implement client-side form / field validation before view gets submitted to backend for data persistence. It should be field by field so that user gets prompt / message for correcting input. What is the best way to implement such validation in AppFarm?
Hi, and welcome to the community!
To make sure that no data is persisted before the form is validated, you can implement disabled rules on your save button. This will make sure that the user can not persist the form until the data meets the requirements. We have a video with a simple example of this in our Docs.
When it comes to prompting the user to correct input, UI components such as Text Edit and Select have a property called “Error”. Here you can set up rules for when the field should indicate that it is in an error state. You can also add informative texts below your input fields with visibility rules that match the error condition of the input field if you want to indicate to the user what is missing/wrong with their current input. A third thing you can do is to set input data type of the text edit field, if you require a specific data type. You can find the documentation here.
Hope that helps!
a) Used “Update On Keypress”
b) Following JavaScript in “Error”
if(registrationNumber.includes(" "))
{
alert(“Avoid Space.”)
return true
}
else
{
return false
}
Now, What you suggest for updating “Text Edit” value corresponding to “registrationNumber” Function Param?
I’m not quite sure if I understood what you were asking here, but here I would recommend that you use the “On Value Change” event handler on the text edit with an action that trims the whitespace from what the user input. You avoid handling errors, it’s less hassle for users and you ensure you get the right data!
1 Like
I meant, how to access “Text Edit” on view from JavaScript shared above so that I can change value from within above function? e.g. User types “Volvo 360” with space and gets alert “Avoid Space.”. Here, i should be able to replace “Volvo 360” with “Volvo360” in “Text Edit”.
To show an error when the user inputs with a space, you can set it up like this:
Where the condition for the error looks like this:
(just hit space once in the right hand side of the condition)
To remove the space on user input, you set up an action on the “On Value Change” event handler that looks like this:
