Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,530 --> 00:00:06,380
In this lecture, we're going to continue working with the name field, the goal is to add additional
2
00:00:06,380 --> 00:00:06,960
rules.
3
00:00:07,240 --> 00:00:14,060
First, I want to introduce alternative syntax for adding rules quickly will continue working on the
4
00:00:14,060 --> 00:00:15,550
authentication component.
5
00:00:15,800 --> 00:00:21,590
We learned that we could apply rules by adding the rules property on the field component for the name
6
00:00:21,590 --> 00:00:22,100
input.
7
00:00:22,520 --> 00:00:28,490
The format for adding a rule is to pass in the name of the rule as the value the names should correspond
8
00:00:28,490 --> 00:00:34,850
to the name you assigned the rule in the first argument of the defined rule function, we have the option
9
00:00:34,850 --> 00:00:37,490
of using objects for more complex rules.
10
00:00:38,000 --> 00:00:41,300
We can use objects by binding the rules property.
11
00:00:42,930 --> 00:00:49,590
This binding will allow us to pass on an object and replace the current value with an object, every
12
00:00:49,590 --> 00:00:52,370
property in the object will represent a rule.
13
00:00:52,770 --> 00:00:56,070
The queen name should be the name of the rule you'd like to add.
14
00:00:56,340 --> 00:01:00,060
For this example, let's add the required rule back in.
15
00:01:02,720 --> 00:01:07,910
Some rules allow you to configure how they get enforced, it varies from rule to rule.
16
00:01:08,150 --> 00:01:14,030
If you'd like to set a rule, you can use the property's value to do so in the case of the required
17
00:01:14,030 --> 00:01:14,450
rule.
18
00:01:14,600 --> 00:01:16,580
It doesn't have additional options.
19
00:01:16,760 --> 00:01:21,650
If a rule doesn't have additional options, we're required to set it to true.
20
00:01:21,650 --> 00:01:26,530
If we're using the object syntax, this will result in the same thing as before.
21
00:01:27,110 --> 00:01:32,370
This alternative syntax can be handy if you prefer object syntax instead of strings.
22
00:01:32,750 --> 00:01:38,030
The benefit of using an object is it allows you to outsource the rules as a data property.
23
00:01:38,390 --> 00:01:43,840
If you have too many rules, then converting it into an object may be beneficial for readability.
24
00:01:44,510 --> 00:01:48,220
We won't be using the rules object on the field component.
25
00:01:48,500 --> 00:01:54,050
We already have the validation schema properties set to an object for outsourcing our rules.
26
00:01:54,410 --> 00:01:59,750
I prefer to use the schema because we can centralize our inputs rules in one object.
27
00:02:00,320 --> 00:02:02,300
Let's work on adding some more rules.
28
00:02:02,540 --> 00:02:04,250
Open the validation file.
29
00:02:06,440 --> 00:02:13,790
We're going to add three rules called minimum, maximum and alpha spaces will update the import statement
30
00:02:13,790 --> 00:02:15,200
to include these rules.
31
00:02:17,820 --> 00:02:23,170
The minimum rule will check if the input is not less than a specific length of characters.
32
00:02:23,550 --> 00:02:28,430
This rule is to prevent users from entering one character in an input and moving on.
33
00:02:28,980 --> 00:02:34,640
The maximum rule will check if the input is not greater than a specific length of characters.
34
00:02:34,920 --> 00:02:40,320
In some cases, you may have a database where there's a character limit that you can't exceed.
35
00:02:40,590 --> 00:02:46,310
You don't want to allow users to insert large strings because that will take up unnecessary space.
36
00:02:46,620 --> 00:02:49,290
It's always a good idea to set a maximum limit.
37
00:02:49,860 --> 00:02:55,350
The Alpha Spaces rule will allow the input to contain alphabetic characters or spaces.
38
00:02:55,710 --> 00:03:00,960
People don't typically have names with numbers or other characters will want to limit the character
39
00:03:00,960 --> 00:03:03,570
set to alphabetic characters and spaces.
40
00:03:04,140 --> 00:03:08,890
In the import statement, we were assigning the Alpha Spaces Rule and Alias.
41
00:03:09,240 --> 00:03:15,110
This is because we have an S linch rule that does not allow underscore characters for important names.
42
00:03:15,450 --> 00:03:17,130
We have to use camel casing.
43
00:03:17,550 --> 00:03:23,850
The Alpha Spaces Object uses an underscore character to prevent s lint from throwing an error.
44
00:03:23,940 --> 00:03:28,910
We're using an alias to convert it into camel casing, a minor inconvenience.
45
00:03:29,250 --> 00:03:33,180
We're still going to use the underscore for its name when we register it.
46
00:03:33,750 --> 00:03:39,000
After importing the rule objects, we're going to register them with the define rule function.
47
00:03:49,640 --> 00:03:54,780
The next step is to use the rules, switch over to the authentication component file.
48
00:03:55,130 --> 00:03:58,430
Scroll down to the schema object in the data function.
49
00:04:00,960 --> 00:04:07,440
If we want to add additional rules, we can separate each rule with a pipe character lets and the three
50
00:04:07,440 --> 00:04:12,790
rules we registered will start with the minimum rule, unlike the required rule.
51
00:04:12,900 --> 00:04:16,740
The minimum rule has an option for setting the minimum character length.
52
00:04:17,160 --> 00:04:23,310
To set the option, we need to add a colon after the rule followed by the value will set the minimum
53
00:04:23,310 --> 00:04:24,990
character length to three.
54
00:04:27,730 --> 00:04:31,960
Afterward, we'll add the maximum role, we'll set it to one hundred.
55
00:04:34,470 --> 00:04:38,250
This rule will limit the field from having more than one hundred characters.
56
00:04:38,490 --> 00:04:41,370
The last rule will add is alpha spaces.
57
00:04:41,640 --> 00:04:43,500
There are no options for this rule.
58
00:04:46,040 --> 00:04:47,920
We have a total of four rules.
59
00:04:48,020 --> 00:04:53,870
Let's test if they work back on the browser, try inputting a single character into the input.
60
00:04:56,430 --> 00:04:59,620
Will receive an error, telling us that the field is invalid.
61
00:04:59,910 --> 00:05:02,560
It would be better if the year were more descriptive.
62
00:05:02,820 --> 00:05:06,310
We'll look at customizing the error message in a future lecture.
63
00:05:06,750 --> 00:05:09,230
I'm going to type some additional characters.
64
00:05:09,540 --> 00:05:10,930
The error will go away.
65
00:05:11,280 --> 00:05:13,910
I should be allowed to input spaces if I want.
66
00:05:14,220 --> 00:05:18,630
If I were to input a number, then the Alpha Spaces rule will get broken.
67
00:05:18,960 --> 00:05:22,830
It'll only allow us to input alphabetic characters or spaces.
68
00:05:23,400 --> 00:05:24,220
This is great.
69
00:05:24,270 --> 00:05:26,910
The rules are being enforced like we want them to.
70
00:05:27,270 --> 00:05:30,640
There are two things I want to talk about before ending this lecture.
71
00:05:31,200 --> 00:05:35,040
Firstly, we validate follows a fast exit strategy.
72
00:05:35,400 --> 00:05:40,170
By default, it'll stop validating the input field upon encountering an error.
73
00:05:40,470 --> 00:05:42,320
In a way, this makes sense.
74
00:05:42,630 --> 00:05:46,950
There's no use in checking the rest of the rules if one rule has already been broken.
75
00:05:47,310 --> 00:05:52,800
This results in better performance and even provides a better user experience because the user will
76
00:05:52,800 --> 00:05:54,410
receive feedback faster.
77
00:05:54,750 --> 00:05:57,300
There is a way to output multiple errors.
78
00:05:57,450 --> 00:06:00,020
We'll look at an example in a future lecture.
79
00:06:00,630 --> 00:06:06,970
Secondly, validation will not be performed on an empty field until the initial value has been changed.
80
00:06:07,320 --> 00:06:11,460
You'll notice that we don't receive an error when the form first appears on the page.
81
00:06:11,870 --> 00:06:16,620
Validate will not enforce the rules until the input has changed its value.
82
00:06:17,040 --> 00:06:19,100
This behavior is beneficial to us.
83
00:06:19,410 --> 00:06:24,840
We don't want to start displaying errors to users when they haven't even had the chance to fill it out.
84
00:06:25,080 --> 00:06:26,750
Otherwise it would be annoying.
85
00:06:27,090 --> 00:06:30,390
That wraps it up for this lecture will continue in the next one.
8897
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.