To output feedback upon our validation result, I have to go to my input component and therefore each
input element, I in the end want to add a special class to that element
if it is invalid.
So my classes here have to become more dynamic. In the end,
I will add a new constant which I'll name inputClasses which is an array which at the beginning is just
classes.inputElement,
I always want to attach this. Now on the individual elements here, I'll replace classes.inputElement with
my array
So with my input, whoops, inputClasses, this array I just created here and I'll join it with a whitespace,
so to concatenate all my string classes into one long string where the classes are separated. Now inputClasses
also needs to receive the invalid property
if the input is invalid and I'll do this with a if check, that check is independent of the type of the input
so I only need to do it once at the beginning.
I'll check if props.invalid is set to true, if it is then I'll push a new class to my inputClasses,
the
invalid.css class
and of course not like that,
Classes.Invalid,
I need to define that class.
So now, this is pushed to my inputClasses which are then attached in a string way to my elements, for
that I need to receive an invalid prop which is true or false
and I also need to find some styling. So I'll simply go to my input element or to the css file for
the input component and add an invalid class,
that's the class I'm referring to here,
the class I try to push to my array.
Now there you can set up any style you want,
I'll simply set up a border which is 1px solid and red maybe and a background-color of light red,
maybe salmon, let's have a look, you can even choose a little bit of a lighter red, something like that.
Now to see that effect, I have to go back to the contact data and there, I now need to pass that invalid
property to the input I render,
so here I'll add invalid and invalid is some data
I again now have on my form element, on the form element in the config object which just as a reminder
refers to that object here on the right
in our state orderForm property. There we have this valid property, valid of course tracks whether the
form is valid or not,
I want to pass an invalid property, so I will access valid and then reverse it by adding an exclamation
mark at the beginning to turn true to false and false to true because I'm passing the opposite. With
that, let's save this and let's go back to the app and now, everything is invalid at the beginning which
makes sense. As soon as I enter something though, things become valid, the zip code only after five characters
and not with more.
So we can see that now indeed we are correctly returning information about the validity,
we also see though that it's not that friendly to start with a page which, with a form that's just
red, we also see that our dropdown is always red even though we have no validation rules there,
so we definitely need some fine tuning.
Let's start with the dropdown,
we shouldn't always add invalid, props.invalid
true or false,
that's nice to have but we have an issue in cases like our dropdown where we have no rules.
So what I should also check if it's invalid
and if we maybe have like props.shouldValidate property. I now can set up shouldValidate in my contact
data as an additional property I passed to my input and shouldValidate should only be true if my object
in the orderForm has a validation object,
my delivery method which is the dropdown in the end hasn't
so it shouldn't validate at all.
So here I will simply pass form element config validation
and if the validation property isn't set as for my dropdown, this will return true or false and therefore
this if check in my input component here will not run and it will never get the invalid class,
so now we can see the dropdown is not treated as invalid anymore.
We also have to ensure that everything is invalid right from the start,
so we should also track whether an input has been touched by the user or not,
let's do this in the next lecture.