1
00:00:02,380 --> 00:00:04,460
Now to validate what the user entered,

2
00:00:04,480 --> 00:00:07,680
I of course want to do something on every keystroke.

3
00:00:07,690 --> 00:00:11,740
Now we already got onChangeText here as a listener on the title for example

4
00:00:11,740 --> 00:00:15,700
and what we do right now is we set the title in our state.

5
00:00:15,790 --> 00:00:18,700
Now the next step is to not just do that,

6
00:00:18,700 --> 00:00:25,270
so to not just save the input but to also validate it and also kind of manage the validity of this input

7
00:00:25,510 --> 00:00:26,780
in a state.

8
00:00:26,860 --> 00:00:36,620
So therefore, I'll add a new function here, title change handler for example which gets the entered text

9
00:00:36,620 --> 00:00:41,870
and then can do something and I'll just outsource this into a separate named function to have a bit of

10
00:00:41,870 --> 00:00:48,830
a cleaner, easier to follow along code because now I will bind this listener here to my onChangeText

11
00:00:48,830 --> 00:00:55,610
event, so that this function fires for every keystroke and there of course, I will still set my title

12
00:00:55,610 --> 00:00:56,290
with the text

13
00:00:56,300 --> 00:01:00,220
but now in addition as I said, I also want to manage the validity

14
00:01:00,230 --> 00:01:03,590
and for that we can add another state which we want to manage.

15
00:01:03,590 --> 00:01:10,580
So maybe here after managing the title value, we can also have the title is valid state or whatever

16
00:01:10,580 --> 00:01:16,100
you want to call it and add set title is valid here as a setter function

17
00:01:16,280 --> 00:01:18,780
and then this state here initially could be false

18
00:01:18,800 --> 00:01:27,000
so that we initially treat this as not valid. Now for every keystroke here in the title change handler,

19
00:01:27,630 --> 00:01:33,180
before we may be store this and update our title state, we can validate this of course

20
00:01:33,210 --> 00:01:36,320
and now it's totally up to you how you want to validate this.

21
00:01:36,390 --> 00:01:45,130
Now for example, you could say this is only valid if you have a text which is not empty, so if text length

22
00:01:45,130 --> 00:01:47,990
with greater than zero. Text is a string of course,

23
00:01:48,000 --> 00:01:51,650
so if the length is zero, then this means that it's an empty string.

24
00:01:51,660 --> 00:01:58,920
We can also call text.trim to trim excess whitespace so that just a bunch of whitespace also isn't

25
00:01:58,920 --> 00:02:00,630
treated as valid.

26
00:02:00,660 --> 00:02:05,760
Of course, you could also add min or max length validation by checking the length here,

27
00:02:05,790 --> 00:02:10,420
you could add regular expression validation to check the text for certain patterns and

28
00:02:10,440 --> 00:02:12,820
it's actually something we'll do later as well

29
00:02:13,170 --> 00:02:15,620
but to get started, I'll just check it like this

30
00:02:16,110 --> 00:02:19,490
and now here if we're greater than zero, we're fine

31
00:02:19,500 --> 00:02:23,550
but actually if we are having a length of zero, we're not fine.

32
00:02:23,550 --> 00:02:25,100
So here I want to set

33
00:02:25,320 --> 00:02:30,870
title is valid to false, else

34
00:02:30,880 --> 00:02:31,810
we set set

35
00:02:31,810 --> 00:02:34,810
title is valid to true of course,

36
00:02:34,810 --> 00:02:40,420
so if we do have a valid input and we'll always set the title itself, we always need to store that,

37
00:02:40,420 --> 00:02:42,580
we must never lose that user input

38
00:02:42,580 --> 00:02:44,410
otherwise we break the app.

39
00:02:44,410 --> 00:02:50,890
And now with the title validity stored in the state, we can use it of course here in our jsx code to

40
00:02:50,890 --> 00:02:56,980
check if the title is not valid for example and if that's the case, we can dynamically output a text

41
00:02:56,980 --> 00:03:04,000
here where we for example say please enter a valid title to show a little error message here which you of

42
00:03:04,000 --> 00:03:06,670
course also could assign some styling to.

43
00:03:06,700 --> 00:03:11,530
Now with that you see that if we go to our input here, we see that the error message right from the start

44
00:03:11,560 --> 00:03:15,900
because we start in invalid state and if we start typing, this disappears

45
00:03:15,910 --> 00:03:22,330
but if I remove all input, it reappears and this is some basic validation you could add to show a little

46
00:03:22,390 --> 00:03:27,910
error message or a little hint to your user, to make sure that users get at least an idea of which

47
00:03:27,910 --> 00:03:29,790
kind of input you want.

48
00:03:29,800 --> 00:03:36,700
Now of course, you can then not just use this validity to output error messages but also to avoid that

49
00:03:36,700 --> 00:03:39,780
your form gets submitted if it's invalid.

50
00:03:39,820 --> 00:03:47,230
So here in the submit handler, where I do always submit my data and create or update a product no matter

51
00:03:47,230 --> 00:03:51,190
if the input is valid, there we can use the validity data we gathered

52
00:03:51,190 --> 00:03:56,530
and for example check if title is valid and if it is not valid,

53
00:03:56,550 --> 00:03:58,000
hence the exclamation mark,

54
00:03:58,060 --> 00:03:59,500
then we just return

55
00:03:59,500 --> 00:04:04,770
which means we cancel the function execution and the code thereafter won't run

56
00:04:04,850 --> 00:04:07,490
and in addition we might not just want to return,

57
00:04:07,510 --> 00:04:13,630
of course we can also import alert from React Native and throw a nice native alert here. So we can simply

58
00:04:13,630 --> 00:04:24,520
show alert with a message of wrong input or a title of that and a message of please check the errors

59
00:04:25,090 --> 00:04:32,620
in the form and then simply add one button there where we say okay because there's nothing else to do

60
00:04:32,620 --> 00:04:33,870
then to confirm,

61
00:04:34,180 --> 00:04:39,760
well with that we have a nice flow here where we warn the user that the input is invalid.

62
00:04:39,760 --> 00:04:45,570
So for example now if I try to submit this input with my invalid title, I get this error

63
00:04:45,580 --> 00:04:51,250
and only if I enter a valid title, I can submit it because I haven't added validation for the other inputs

64
00:04:51,250 --> 00:04:53,140
yet which we of course should.

65
00:04:53,140 --> 00:04:56,410
So this is how easy you can get started with validation.

66
00:04:56,440 --> 00:05:02,260
Now since we used Javascript here, you can of course also bring in other third-party validation libraries, 

67
00:05:02,950 --> 00:05:09,250
like for example ValidateJS which is a package you can install into your project and start using

68
00:05:09,250 --> 00:05:15,310
it to then easily validate strings for certain patterns if you wanted to do that. In this module,

69
00:05:15,310 --> 00:05:15,900
I'll write

70
00:05:15,910 --> 00:05:21,760
the basic patterns we use manually so that you get a clear understanding of what's really happening there

71
00:05:21,790 --> 00:05:26,370
but you can absolutely bring in such third-party libraries as well.

72
00:05:26,380 --> 00:05:31,850
Well and now with that basic understanding about validation and so on,

73
00:05:31,990 --> 00:05:38,530
let's make sure that we now actually also move towards a form and input management that is more scalable

74
00:05:38,620 --> 00:05:42,550
and doesn't involve tons of states which we have to manage manually.