Dreamweaver CS4 Tutorial - 27 - Form Validation and CSS Video Lecture | How to create Responsive Websites with DreamWeaver - IT & Software

hopefully you guys just watched my last
tutorial and you decided that you're
excited about form validation you guys
are ready to learn about it you're ready
to figure out what it's about and
luckily for you dreamweaver has made it
so easy so before we we start diving
into it each individual spry validation
technique we are going to take a look at
the CSS behind all of the the pieces
that are involved in formatting in this
case a text field this is a the exact
same example from the last tutorial I
just wanted to show you guys how all the
CSS powers the the coloring of the text
and size of the text and the borders and
everything is involved in the validation
itself I want to do this before I go
into all the other all the other
techniques because basically the CSS is
going to remain the same throughout
throughout each individual technique so
if you guys can get this in the
beginning then down the road whenever
I'm introducing you to the validation of
the check boxes in the text area then
you will already have an understanding
for how the CSS works and why all this
stuff works the way it does so let's go
ahead and let's go ahead and leave one
thing before we do this in the last
tutorial you saw messages um for example
whenever you enter the text box didn't
feel anything out and then left the text
box by leaving the text box I mean you
clicked outside the text box there was a
message that popped it to the right that
says a value is required and right here
in the code is where you change that so
I'm going to change this to required and
the other text that showed up for us was
since this is an email and it has to be
formatted in this specific email format
if you type something in that wasn't an
F format then you would get a message to
the right the said invalid format so
here is where we change that there we go
so let's just run that so you guys can
see that it works i'm going to click
inside changes the color required ok so
i'm going to do a fail ok there we go so
let's run back through that i want to
make a few notes for you guys to check
out so we can we can move on and you
guys can understand what I'm changing
here we see when we clicked inside it
changed to the yellow and when we click
outside and don't have it again that's
required to change to the red and
there's also this red color here and the
other color that we see is green
whenever everything is good to go so
there we go so that was three four
different colors so now let's go look at
the CSS or where that is i'm going to
click through each individual rule over
here you can see that the spry
validation text field uh CSS has been
linked in from an external file that was
created in our last tutorial so i'm
going to run through each of these and
you can see see there's this color red
with the one pixel border that's the
bestest CSS rule that controls the the
color of the text that comes out to the
right when it's invalid and when text is
required and wasn't filled in and this
is the background color i'm going to
change this i'm going to change this to
a gray color and keep on going and this
is the color that is in the back of or
that the text field changes to when
there is an error so right now i'm not
going to change i'm not going to change
these
I'm going to change these background
colors though so I'm going to save that
just so we can see that happen there we
go now we see me click inside of it
turns grey so now hopefully you
understand where these colors are coming
from and you understand what's going on
in the CSS if you if you do not then I
strongly recommend that you go back in
time to the tutorials that went over CSS
and then you will have a greater
understanding for what's going on now
with that all the way we can move on to
spry validation of text fields and after
that we will continue on down the list
and I will show you how to work with
validation for each one of these form
items so now you know how to change the
color so now to change the all of the
styles with CSS the there are so many
options that you'll probably have a good
time just making this look however you
want to make it look so hopefully
hopefully enjoy this tutorial enough to
keep watching and don't forget to
subscribe and I will see you in the next
tutorial