Do not start with an all red form here, we have to track whatever a user already touched an input or
not.
So back in contact data here,
I want to also add a new property to each form element in my orderForm object here, I'll set it to touched
and I'll set this to false initially and now I'll copy that to all the elements here where I have validation
in place,
like that and I can then make sure that I only check the validity if the element was touched,
otherwise I don't want to check the validity,
I don't want to return errors.
So now to update the touched value, I'll go to my inputChangedHandler where we of course know that the user
typed something or changed something
so at this point of time something has been changed. And now in there, I went to update
touched, so on the updatedFormElement, I'll now set touched here to true.
Now I only want to add this class, this invalid class if the element has been touched,
so I'll pass this touched information on our touch property let's say, to my input component form element
and there I have config
and now this new touched value. And in the input element, in this first check where we attached the invalid
class,
I only want to attach it if the input is invalid and should validate and if props.touched is true, so
that we don't set this or mark this as invalid if it hasn't been touched yet.
So now you see it's not red by default,
if I start entering something invalid here though, now it is invalid until well it is valid again.
So this is now a simple way of creating a form which is more user friendly,
let's now also make sure that we can submit it, that the order button is disabled whilst the whole form
is invalid.
Let's fix this in the next lecture.