Our form is certainly working great
but of course there's one important thing missing, validation.
We can always submit the form,
we don't get any validation errors,
we don't see if the form is valid or not.
Now whilst a framework like Angular has a built-in validation package basically, react hasn't,
you have to do validation on your own.
There are some third party packages you might want to check out but in general, you can also build validation
on your own
and I want to build it on my own.
Now the goal is that when ever we change the values, so here in the inputChangedHandler, we also check
if it's valid or not
and of course, the validity of element should be defined by some rules which we set up in the order form.
So here for a given input where we also define the type and the config, so basically the html attributes
and the value,
we also might have some validation key where we set up rules we want to have respected.
This could be a rule like required should be set to true so that this is a field which is absolutely
required, that it must not be empty,
this is a very often used rule, of course.
So let's use this, let's add thisValidation field with just required to all our elements right after
the value,
so on the top element level therefore, so that it must not be empty
and I don't need it for the dropdown because I have to select the value there anyways. So now I added validation
to most of my elements except for the dropdown for the reason I just mentioned,
now how do we check this? For this,
I'll create another new method which I'll name check validation or validity maybe, validity,
where I get the value and then the rules
and then this should return true or false determining whether this is valid or not. This also means that
I have to have some valid property on each element in my state which I can manage, so that I have
like valid which is false
initially, let's say. So
also add this to all elements which should have validation
and of course you could also kind of add this as a sub key of validation or something like that.
So I'll add valid here,
set it to false initially maybe and now in checkValidity,
I want to return true or false to then in inputChangedHandler, adjust this valid property too.
Now here of course, it depends on which rules we have,
I will simply check if rules has a required rule,
so if that is true-ish then I want to adjust some isValid variable which initially is false as a default
maybe, I want to set isValid equal to the value comparison, so isValid
should be equal if it's not equal to an empty string,
however I want to use value trim here to remove any whitespaces at the beginning or end.
So now isValid is updated to True or false depending on the check if the trimmed value is unequal
to an empty string,
if it is not equal, isValid will be true and at the end of checkValidity, I will return isValid,
so true or false. In the inputChangedHandler,
I can then of course also update my valid value of the updatedFormElement, here
I want to set updatedFormElement.valid equal to this.checkValidity and pass the updatedFormElement
value which we already adjusted to the value passed by the event, and of course I want to pass
my updatedFormElement validation object which is just my rules.
So validation here has for example a required property and that is what I check for in checkValidity,
I see if my rules object has a required property and if the value of that property is true-ish or is
treated as true. So now with that set up, we should be able to check for that and set valid to true or
false because keep in mind that this.checkValidity returns true or false so we store the result of this
check in the valid property.
Now to see if this really works,
I'll simply console log my updatedFormElement here for now, so that we can see on every keystroke
if this changes.
So if I enter something into my name, this is the object and you see valid is true,
if I remove the T, you'll see valid is false because now it's empty.
If I enter a couple of whitespaces here, then you see valid still is false because we're trimming the
value. So our custom required to check is working fine here and now of course we could use
or we could add more rules.
We could add another check here where we say if rules.minLength,
if we have something like this, then we can set isValid equal to value.length greater equal rules.minLength
.
So now minLength of course would be expected to be like a value like one or two or three which also will
resolve to true so which will activate this rule. And you can of course be creative and even
create more complex rules which might have objects as a value where you can access rules.minLength
and then something like absolute minimum or something like that, so you can really be creative and create
your own rules dynamically.
I'll use the minLength rule here for the zipcode, let's say the zipcode should receive a minLength of
five
and let's say also a maxLength of five
and now, that means I will also add a check for the maxLength here, if rules.maxLength and here this should
be then smaller or equal to maxLength, and our current validation logic here has a crucial flaw by the way,
I'll come back to that in a second.
So to see if this length validation now also works by just adding checks here and adding it in
our setup here for the zipcode, to see if that works let's go back to the application, let's enter something
into the zip code like 555,
let's expand this and you'll see valid is true,
so it's not working here unfortunately.
The reason for this is our flaw,
if we have a look at our validation method, we check one rule after the other,
that means that of course only the last rule has to be satisfied to turn isValid to true, even if minLength
sets isValid to false,
if maxLength is met thereafter, which it currently is, this will be set to true again. That has the
result that if I add six digits here which would be too long, that now it is indeed not valid anymore
because the last check maxLength resolves to false for this long of an input.
So this is the issue,
the flaw we have right now, we are checking the rules one after another.
Let's fix this flaw in the next lecture.