Best Practice On Form Validation?


#1

What is a good practice for form validation to make the field / input turn RED, or otherwise display some sort of alert?

How have people done this in the past?

Thanks!


#2

Great Question, @justincrabbe! “Best Practice” is a little more contextual in design and the idea to think about here is “app-wide consistency”. Whatever you pick, try to stick with it where field validation applies. There’s not really a wrong answer is what you go with but help the user by keeping it consistent so they intuitively know what to expect after they encounter it the 1st time.

Textfield’s have all sorts of events you can drop logic for this.

Focusing is when the user taps and the keyboard comes up. The element is focused on.
UnFocused is well… the opposite, when it’s no longer being focused on after it was focused on
Value Changed is when they type in a new character delete a character.
Returned is when the user taps return on the keyboard

Experiment with all of them until you find what you like… then keep it consistent where you need to apply validation.


#3

This is very helpful @wade thanks.

So, if a field is submitted or a button is tapped that runs an action or an api that needs one of the fields filled, is there an action that turns on one of these below states so that the field missing the information can be highlighted RED or something?

image


#4

No, that’s not how it’s going to work but great follow up. If you want a button to trigger some validation of the fields, you’ll perform that in the button’s own tap event and place the validating logic in that spot. You’ll also change the UI accordingly if a field’s info isn’t to your liking in that same spot. The button’s tap event is managing the UI if you go this direction. Totally do-able but that’s what’s happening.

These textfield events are triggered by the textfield itself and you can’t trigger them from outside that. It’s a code design concept called “Delegation” and it’s a best practice to not give access to delegate functionality outside of the the delegate itself. That’s a little more advanced in definition there but the rule of thumb for you here is wherever you need some validation to occur put it in the event spot where you expect it to occur. So if you tap a button to run an API call BUT you want to make sure all the info is correct before doing so, add the logic to validate the data and only if all is well, run the API request.

This is 1 way to do it. There’s no “right/wrong” way to do it but those textviews are there to help trigger events while the user is actively using the textfields.

For added info of seeing another way to do it… if you require the user to manually input info in each textview each time prior to hitting that Button that triggers an API request, you could build the validation for each textview in those textview events. Then on that page, you could have some Boolean page variables sitting there that you’ll switch from false to true when the info in the textview passes validation… THEN in the Button performing an API request, you could add logic there that says if these 4 booleans are all true, then do the request and if not, don’t run the API request.

Again, there’s many ways to complete the same thing and there’s no best practice really for this. Choose a path and go forth. If it fails, you always have other strategies to employ.