now here of course the problem is
whenever you type some gibberish you
click reset there’s no visual
representation as to why this is not
updating so I’m typing something and
clicking on the submit button but it
doesn’t actually submit anything like it
doesn’t change anything and this is the
next thing we’re gonna fix so let’s
actually go back to forms and let’s go
to some examples here so the very first
example you see whenever something is
invalid you could also add a special
class that’s known as is danger and
that’s going to basically create a sort
of like an outline and rather outline
around the input and this sort of like
being a visual indication to the user as
to what’s going on and why the input is
not being accepted by the application
right so this is the next thing we’re
gonna do we’re actually going to need to
access the valid property off the state
game and this is going to present
another problem for us for now let’s
just go into it so my idea here for
example if we are valid if the form is
valid we want to basically add a class
to the list of classes on the input so
this is an example of how to use
conditional classes and react also so
I’m going to extract those classes on
the input to a separate constant
actually it can’t be a constant because
the constant cannot we’re not we you
know we can’t reassign value on the
constant the value of constant cannot
change so we need to use the led keyword
and I think in this case I’m just gonna
use a locking set of Const for the state
properties okay and we’re just gonna
have this variable initialization on the
same line basically instead of having
like to let keywords just gonna have one
we’re gonna clear a second variable here
let’s go ahead classes this would be
input classes so if the form is valid
what we want to do is we want to add a
class to that classes string and the
class would be is success okay whenever
you add the S success class as you can
see here from this example
he’s going to add a green outline to the
input so let’s save that and let’s say
instead of a string for class name let’s
actually put an object this is going to
be the classes object let’s save it you
see the green outline there okay the
other thing we want to do is let’s also
add his danger class and of course this
is going to be added if the form is not
valid okay if it’s valid it’s going to
be green a success if it’s not valid you
need to is do that it is denture class
and it’s going to add a red outline okay
of course the fact that gibberish is
going to be red but the thing is as you
can see here when you upload the form
it’s already green okay and it’s green
because valid by default is true now
this is actually a problem because the
empty string is not a date it cannot be
converted to an actual date but we also
need to check whether whether the user
actually edited the input whether you
actually typed something to the input by
default it’s true the the valid property
is true we don’t want to have any
offline so we need to add another
property and we’re gonna call that
property let’s say dirty okay
by default it’s false so like I said the
dirty property basically refers to
whether the user typed something to the
floor and by default it’s false because
we didn’t actually type anything right –
it’s false once we have that property
this is going to fix the problem
with the outline you have the dirty
property and it’s false by default so I
want to add a class if the form is valid
but also if it’s dirty I only want to
add the class if the form is actually
dirty if the form is not dirty
meaning the user did not actually input
anything to the Judaica box did not
actually type anything the form is not
dirty by itself so you didn’t type
anything so that’s why we don’t want to
add the class but if you did actually
make it dirty of you I did actually type
something if you touch the input in any
way then we want to add the class and
the same condition will also be true for
is danger class so I’m going to add that
into it as well now next what we want to
do is whenever we type something to the
input we want to update your
property to true because you typed
something so we need to update that
value and once it becomes true you will
actually be able to see classes on the
input so if it’s invalid it’s going to
be red and that basically indicates that
there’s some kind of a problem on the
input so there’s an error but if let’s
say you type something that’s a valid
but say 20th of January next year okay
we we said we get the green outline
because the the input the value of the
day that we provided or typed is
actually valid now another thing that we
could also do with validations we could
also provide a custom you know error
message as well so in this example here
for instance they have a paragraph they
basically has a class of help and it
basically provides some kind of a
message so in this case it mixes for an
error and let’s use that example also so
if I were to put that in of course we
need to update the class name I think
it’s going to complain because we have a
paragraph nested instead of another
paragraph in fact you go back yep it
doesn’t like it because we have our
girlfriend’s out of a paragraph that’s
in error let’s change it to a spam in
fact let’s change it to an attack and
this is basically going to make the text
italic for us okay
and this should work there should be an
error message but of course you could
make it larger if you use a helper class
for example is size six this is gonna
make it a little bit larger more
readable and also we could have a class
of has text centered this is going to
Center the text of the error message and
the error message itself in this case we
could do something like let’s say please
type a valid and future don’t forget
that it also has to be a date in the
future not in the past date okay
and this is going to be the error
message and by default it’s visible
but we do not want to show it unless the
value of the date is invalid so we could
have again we have an expression here
this is how you would basically render a
block of JSX conditionally so of course
you could use if conditions and you can
move this block outside for example you
could have let’s say constant
let’s do error by default it’s an empty
string but if you know the form is not
valid you want to update the error and
you want to set it to a block of GSX and
then you basically want to output that
value inside of the form but just below
the input right so you might help let
that error as well okay and this is the
approach that actually creates a
variable outside use inside of the
render method and error is right only
how of course I over looked at it
actually needs to be agreeable with the
let declaration because constant cannot
be read clear but you do that and then
you type something if it’s valid you are
not gonna see the error if it’s
something that’s invalid gibberish
you’re gonna see the error but there’s
also another approach for dealing with
that instead of actually creating the
variable outside we can have a condition
inside the expression and then we just
have the gsx block just next to it okay
so we don’t need to create any variables
outside outside the we’re trying block
okay so this block is only going to be
visible on the page as long as the valid
property that we got from the state is
true if this is false like I said before
because of how comparisons working in
JavaScript it’s the job is actually not
going to look at the second part of the
condition it’s just going to see okay
because the first one is false I don’t
need to look at the second one we’re not
going to display anything too
the to the dot this element is not
actually going to be perfect at all but
if the shoe that we’re going to display
the second operand of the logical
comparison right and it’s actually going
to return that and it’s going to you
know put it into the Dom in this case of
course I forgot the negation the
exclamation point because we need to
negate tolerate we want to have say if
it’s not valid then you want to display
the block of code in there right so you
save that by default there’s no error if
I tend to brush shows the error but if I
type an actual valid date so even 2020
is a valid date and I could reset it
updates the timer okay and you don’t see
the error because it’s validate and this
is basically a validation and nutshell
now to wrap up the forms one thing I’d
like to do is I would probably like to
simplify this just a bit what I want to
do is I want to make this form more
reactive so the next if we could
actually type to a input and it would
actually show us the updated value
already you know in the application so
that we don’t have to click the reset
button ourselves it’s gonna make the
application more reactive and more you
know faster more responsive so for that
we’re not gonna deal with form submit
events so we’re actually going to listen
to changes on the input we’re going to
check if the value that was provided if
the actual date on the state is valid
now if it’s valid we’re gonna call a
date reset method on the parent it’s
gonna update the state it’s gonna update
the timer but if the value is not valid
is we’re just gonna you know show an
error or change the colors you know to
red and show the error but we’re not
gonna update the state of the parent
okay so in this case I’m going to remove
the form because we no longer need the
form here like I said we’re gonna make
it more reactive let’s remove the
closing tag of the form let’s indent it
and here’s what we’re gonna do so here
there’s no there’s gonna be no form
submit like I said it’s just gonna be
events as to when the value of the input
changes in fact we don’t need the second
paragraph anymore because we don’t need
to be button any longer
and once that save if you go back to the
browser we just have the input now
whenever the value of the input changes
let’s also add another variables here so
I’m going to have another one is going
to be let’s see if valid it’s just
basically going to be that condition no
and again we do a before happens index
moon naturally need to good call and
ballot you can just put valid for
readability I’m just gonna move it to
the top okay the next thing I’ll do I
remove I’m gonna remove this statement
and I’ll put it to a handle date changed
and we’re also going to need to get the
date from the state now in this case
this date would actually be a moment
object but we already calculated with
the date in there so I’m just gonna put
it like this date we already have the
date object and we don’t need the second
handle date submit method now once again
we’re basically calling the moment
function we’re passing the value from
whatever you typed into the input box
and once we wrap it into the moment
function that’s going to give us the
moment instance that’s gonna be a new
date mostly calculating whether the data
is valid so we calling the is valid
method we’re also checking if the date
is a date in the future so in other
words if the date is after now okay then
we set the state then we update the
state and we also call on date reset
given that the day is actually valid so
nuts now let’s save it and let’s say I
type gibberish no errors in the console
we just get a warning but you can just
ignore it for now but if I type an
actual date 2020 it’s going to update
let’s do 2021 say oh 125 let’s go update
the state so you can see that it’s
actually
even more reactive than it was before
and that’s because of the or factoring
they would did so now we actually up to
the state on the parent when you type
something down and if it’s a valid so
you click on resume that’s gonna reason
the timer of course and because of
styling you of course could keep the
error message if you’d like to but I
think just can we move it for now like
so and again if you type gibberish it’s
just gonna be rad it’s gonna indicate
that there’s a problem with the input
and again for example if I type let’s
say the data of tomorrow this would be
21st let me see that the value updates
we get a new title and the time are also
updates we get you 11 hours left until
that date and for example if we wanted
to put a specific time this is going to
accept an international format four
times so this is basically 5:00 p.m. of
course you don’t need to put 17 you can
just do five but then you need to be
specific about the the second part you
need to put p.m. otherwise it’s gonna
default to a.m. okay so that’s basically
it for forms and validation thanks for
watching and I hope to see you in the next video
whenever you type some gibberish you
click reset there’s no visual
representation as to why this is not
updating so I’m typing something and
clicking on the submit button but it
doesn’t actually submit anything like it
doesn’t change anything and this is the
next thing we’re gonna fix so let’s
actually go back to forms and let’s go
to some examples here so the very first
example you see whenever something is
invalid you could also add a special
class that’s known as is danger and
that’s going to basically create a sort
of like an outline and rather outline
around the input and this sort of like
being a visual indication to the user as
to what’s going on and why the input is
not being accepted by the application
right so this is the next thing we’re
gonna do we’re actually going to need to
access the valid property off the state
game and this is going to present
another problem for us for now let’s
just go into it so my idea here for
example if we are valid if the form is
valid we want to basically add a class
to the list of classes on the input so
this is an example of how to use
conditional classes and react also so
I’m going to extract those classes on
the input to a separate constant
actually it can’t be a constant because
the constant cannot we’re not we you
know we can’t reassign value on the
constant the value of constant cannot
change so we need to use the led keyword
and I think in this case I’m just gonna
use a locking set of Const for the state
properties okay and we’re just gonna
have this variable initialization on the
same line basically instead of having
like to let keywords just gonna have one
we’re gonna clear a second variable here
let’s go ahead classes this would be
input classes so if the form is valid
what we want to do is we want to add a
class to that classes string and the
class would be is success okay whenever
you add the S success class as you can
see here from this example
he’s going to add a green outline to the
input so let’s save that and let’s say
instead of a string for class name let’s
actually put an object this is going to
be the classes object let’s save it you
see the green outline there okay the
other thing we want to do is let’s also
add his danger class and of course this
is going to be added if the form is not
valid okay if it’s valid it’s going to
be green a success if it’s not valid you
need to is do that it is denture class
and it’s going to add a red outline okay
of course the fact that gibberish is
going to be red but the thing is as you
can see here when you upload the form
it’s already green okay and it’s green
because valid by default is true now
this is actually a problem because the
empty string is not a date it cannot be
converted to an actual date but we also
need to check whether whether the user
actually edited the input whether you
actually typed something to the input by
default it’s true the the valid property
is true we don’t want to have any
offline so we need to add another
property and we’re gonna call that
property let’s say dirty okay
by default it’s false so like I said the
dirty property basically refers to
whether the user typed something to the
floor and by default it’s false because
we didn’t actually type anything right –
it’s false once we have that property
this is going to fix the problem
with the outline you have the dirty
property and it’s false by default so I
want to add a class if the form is valid
but also if it’s dirty I only want to
add the class if the form is actually
dirty if the form is not dirty
meaning the user did not actually input
anything to the Judaica box did not
actually type anything the form is not
dirty by itself so you didn’t type
anything so that’s why we don’t want to
add the class but if you did actually
make it dirty of you I did actually type
something if you touch the input in any
way then we want to add the class and
the same condition will also be true for
is danger class so I’m going to add that
into it as well now next what we want to
do is whenever we type something to the
input we want to update your
property to true because you typed
something so we need to update that
value and once it becomes true you will
actually be able to see classes on the
input so if it’s invalid it’s going to
be red and that basically indicates that
there’s some kind of a problem on the
input so there’s an error but if let’s
say you type something that’s a valid
but say 20th of January next year okay
we we said we get the green outline
because the the input the value of the
day that we provided or typed is
actually valid now another thing that we
could also do with validations we could
also provide a custom you know error
message as well so in this example here
for instance they have a paragraph they
basically has a class of help and it
basically provides some kind of a
message so in this case it mixes for an
error and let’s use that example also so
if I were to put that in of course we
need to update the class name I think
it’s going to complain because we have a
paragraph nested instead of another
paragraph in fact you go back yep it
doesn’t like it because we have our
girlfriend’s out of a paragraph that’s
in error let’s change it to a spam in
fact let’s change it to an attack and
this is basically going to make the text
italic for us okay
and this should work there should be an
error message but of course you could
make it larger if you use a helper class
for example is size six this is gonna
make it a little bit larger more
readable and also we could have a class
of has text centered this is going to
Center the text of the error message and
the error message itself in this case we
could do something like let’s say please
type a valid and future don’t forget
that it also has to be a date in the
future not in the past date okay
and this is going to be the error
message and by default it’s visible
but we do not want to show it unless the
value of the date is invalid so we could
have again we have an expression here
this is how you would basically render a
block of JSX conditionally so of course
you could use if conditions and you can
move this block outside for example you
could have let’s say constant
let’s do error by default it’s an empty
string but if you know the form is not
valid you want to update the error and
you want to set it to a block of GSX and
then you basically want to output that
value inside of the form but just below
the input right so you might help let
that error as well okay and this is the
approach that actually creates a
variable outside use inside of the
render method and error is right only
how of course I over looked at it
actually needs to be agreeable with the
let declaration because constant cannot
be read clear but you do that and then
you type something if it’s valid you are
not gonna see the error if it’s
something that’s invalid gibberish
you’re gonna see the error but there’s
also another approach for dealing with
that instead of actually creating the
variable outside we can have a condition
inside the expression and then we just
have the gsx block just next to it okay
so we don’t need to create any variables
outside outside the we’re trying block
okay so this block is only going to be
visible on the page as long as the valid
property that we got from the state is
true if this is false like I said before
because of how comparisons working in
JavaScript it’s the job is actually not
going to look at the second part of the
condition it’s just going to see okay
because the first one is false I don’t
need to look at the second one we’re not
going to display anything too
the to the dot this element is not
actually going to be perfect at all but
if the shoe that we’re going to display
the second operand of the logical
comparison right and it’s actually going
to return that and it’s going to you
know put it into the Dom in this case of
course I forgot the negation the
exclamation point because we need to
negate tolerate we want to have say if
it’s not valid then you want to display
the block of code in there right so you
save that by default there’s no error if
I tend to brush shows the error but if I
type an actual valid date so even 2020
is a valid date and I could reset it
updates the timer okay and you don’t see
the error because it’s validate and this
is basically a validation and nutshell
now to wrap up the forms one thing I’d
like to do is I would probably like to
simplify this just a bit what I want to
do is I want to make this form more
reactive so the next if we could
actually type to a input and it would
actually show us the updated value
already you know in the application so
that we don’t have to click the reset
button ourselves it’s gonna make the
application more reactive and more you
know faster more responsive so for that
we’re not gonna deal with form submit
events so we’re actually going to listen
to changes on the input we’re going to
check if the value that was provided if
the actual date on the state is valid
now if it’s valid we’re gonna call a
date reset method on the parent it’s
gonna update the state it’s gonna update
the timer but if the value is not valid
is we’re just gonna you know show an
error or change the colors you know to
red and show the error but we’re not
gonna update the state of the parent
okay so in this case I’m going to remove
the form because we no longer need the
form here like I said we’re gonna make
it more reactive let’s remove the
closing tag of the form let’s indent it
and here’s what we’re gonna do so here
there’s no there’s gonna be no form
submit like I said it’s just gonna be
events as to when the value of the input
changes in fact we don’t need the second
paragraph anymore because we don’t need
to be button any longer
and once that save if you go back to the
browser we just have the input now
whenever the value of the input changes
let’s also add another variables here so
I’m going to have another one is going
to be let’s see if valid it’s just
basically going to be that condition no
and again we do a before happens index
moon naturally need to good call and
ballot you can just put valid for
readability I’m just gonna move it to
the top okay the next thing I’ll do I
remove I’m gonna remove this statement
and I’ll put it to a handle date changed
and we’re also going to need to get the
date from the state now in this case
this date would actually be a moment
object but we already calculated with
the date in there so I’m just gonna put
it like this date we already have the
date object and we don’t need the second
handle date submit method now once again
we’re basically calling the moment
function we’re passing the value from
whatever you typed into the input box
and once we wrap it into the moment
function that’s going to give us the
moment instance that’s gonna be a new
date mostly calculating whether the data
is valid so we calling the is valid
method we’re also checking if the date
is a date in the future so in other
words if the date is after now okay then
we set the state then we update the
state and we also call on date reset
given that the day is actually valid so
nuts now let’s save it and let’s say I
type gibberish no errors in the console
we just get a warning but you can just
ignore it for now but if I type an
actual date 2020 it’s going to update
let’s do 2021 say oh 125 let’s go update
the state so you can see that it’s
actually
even more reactive than it was before
and that’s because of the or factoring
they would did so now we actually up to
the state on the parent when you type
something down and if it’s a valid so
you click on resume that’s gonna reason
the timer of course and because of
styling you of course could keep the
error message if you’d like to but I
think just can we move it for now like
so and again if you type gibberish it’s
just gonna be rad it’s gonna indicate
that there’s a problem with the input
and again for example if I type let’s
say the data of tomorrow this would be
21st let me see that the value updates
we get a new title and the time are also
updates we get you 11 hours left until
that date and for example if we wanted
to put a specific time this is going to
accept an international format four
times so this is basically 5:00 p.m. of
course you don’t need to put 17 you can
just do five but then you need to be
specific about the the second part you
need to put p.m. otherwise it’s gonna
default to a.m. okay so that’s basically
it for forms and validation thanks for
watching and I hope to see you in the next video
Please follow and like us: