Now to validate what the user entered,
I of course want to do something on every keystroke.
Now we already got onChangeText here as a listener on the title for example
and what we do right now is we set the title in our state.
Now the next step is to not just do that,
so to not just save the input but to also validate it and also kind of manage the validity of this input
in a state.
So therefore, I'll add a new function here, title change handler for example which gets the entered text
and then can do something and I'll just outsource this into a separate named function to have a bit of
a cleaner, easier to follow along code because now I will bind this listener here to my onChangeText
event, so that this function fires for every keystroke and there of course, I will still set my title
with the text
but now in addition as I said, I also want to manage the validity
and for that we can add another state which we want to manage.
So maybe here after managing the title value, we can also have the title is valid state or whatever
you want to call it and add set title is valid here as a setter function
and then this state here initially could be false
so that we initially treat this as not valid. Now for every keystroke here in the title change handler,
before we may be store this and update our title state, we can validate this of course
and now it's totally up to you how you want to validate this.
Now for example, you could say this is only valid if you have a text which is not empty, so if text length
with greater than zero. Text is a string of course,
so if the length is zero, then this means that it's an empty string.
We can also call text.trim to trim excess whitespace so that just a bunch of whitespace also isn't
treated as valid.
Of course, you could also add min or max length validation by checking the length here,
you could add regular expression validation to check the text for certain patterns and
it's actually something we'll do later as well
but to get started, I'll just check it like this
and now here if we're greater than zero, we're fine
but actually if we are having a length of zero, we're not fine.
So here I want to set
title is valid to false, else
we set set
title is valid to true of course,
so if we do have a valid input and we'll always set the title itself, we always need to store that,
we must never lose that user input
otherwise we break the app.
And now with the title validity stored in the state, we can use it of course here in our jsx code to
check if the title is not valid for example and if that's the case, we can dynamically output a text
here where we for example say please enter a valid title to show a little error message here which you of
course also could assign some styling to.
Now with that you see that if we go to our input here, we see that the error message right from the start
because we start in invalid state and if we start typing, this disappears
but if I remove all input, it reappears and this is some basic validation you could add to show a little
error message or a little hint to your user, to make sure that users get at least an idea of which
kind of input you want.
Now of course, you can then not just use this validity to output error messages but also to avoid that
your form gets submitted if it's invalid.
So here in the submit handler, where I do always submit my data and create or update a product no matter
if the input is valid, there we can use the validity data we gathered
and for example check if title is valid and if it is not valid,
hence the exclamation mark,
then we just return
which means we cancel the function execution and the code thereafter won't run
and in addition we might not just want to return,
of course we can also import alert from React Native and throw a nice native alert here. So we can simply
show alert with a message of wrong input or a title of that and a message of please check the errors
in the form and then simply add one button there where we say okay because there's nothing else to do
then to confirm,
well with that we have a nice flow here where we warn the user that the input is invalid.
So for example now if I try to submit this input with my invalid title, I get this error
and only if I enter a valid title, I can submit it because I haven't added validation for the other inputs
yet which we of course should.
So this is how easy you can get started with validation.
Now since we used Javascript here, you can of course also bring in other third-party validation libraries,
like for example ValidateJS which is a package you can install into your project and start using
it to then easily validate strings for certain patterns if you wanted to do that. In this module,
I'll write
the basic patterns we use manually so that you get a clear understanding of what's really happening there
but you can absolutely bring in such third-party libraries as well.
Well and now with that basic understanding about validation and so on,
let's make sure that we now actually also move towards a form and input management that is more scalable
and doesn't involve tons of states which we have to manage manually.