Coding

JavaScript Tutorial | Form Validation | Part 3

  • 00:00:01 welcome to this video this time we will
  • 00:00:04 talk about form validation with
  • 00:00:06 JavaScript for that we will work on this
  • 00:00:09 form right here at the moment we don't
  • 00:00:12 have any inputs and we have this grayed
  • 00:00:14 out button down here and if I click on
  • 00:00:17 to it well nothing is happening but we
  • 00:00:19 want to add code javascript code which
  • 00:00:22 allows us to achieve the following if I
  • 00:00:25 enter a value any kind of value into
  • 00:00:28 this name field could be a single letter
  • 00:00:30 or my name manual for example and an
  • 00:00:34 email a valid email we will talk about
  • 00:00:36 what is valid throughout this video so
  • 00:00:39 let's say test at tesco maybe and then a
  • 00:00:42 message so again just a single letter or
  • 00:00:45 word so if I enter an age for hello for
  • 00:00:48 example then you can see that the submit
  • 00:00:51 button down here immediately changes its
  • 00:00:53 color if I was for example delete the
  • 00:00:56 name right here it would be gray again
  • 00:00:58 so let's add another letter and if I
  • 00:01:01 would delete D add for example from the
  • 00:01:03 email it would also be gray and the same
  • 00:01:06 thing would be true if I delete the dot
  • 00:01:08 for example now that's the one thing we
  • 00:01:11 want to make sure that the button
  • 00:01:12 changes the color once we have valid
  • 00:01:14 inputs for our fields but in addition to
  • 00:01:17 that if we then click this activated
  • 00:01:21 button then I want to log out submitted
  • 00:01:24 right here to our console this means we
  • 00:01:27 will prevent the default behavior the
  • 00:01:30 default behavior of a form would be to
  • 00:01:33 send a request a get or post request to
  • 00:01:36 a server so we also want to prevent this
  • 00:01:39 default behavior and console lock
  • 00:01:41 submitted right here
  • 00:01:42 that's it let's see how we can do this
  • 00:01:44 now
  • 00:01:48 now this video is about the form
  • 00:01:51 validation in JavaScript but what if you
  • 00:01:54 never heard about forms before
  • 00:01:56 well a form generally is something like
  • 00:01:59 that
  • 00:01:59 it's a page that allows a user to enter
  • 00:02:02 information but to also submit this
  • 00:02:05 information to a server this works with
  • 00:02:07 a request a get or post request by the
  • 00:02:09 way now in case you never heard about
  • 00:02:11 these concepts before make sure to have
  • 00:02:14 a look at two articles you can find a
  • 00:02:16 link to the articles in the video
  • 00:02:18 description by the way the first article
  • 00:02:20 is this one right here it's this your
  • 00:02:23 first HTML form article on the MDM if
  • 00:02:27 you have a look at this article you will
  • 00:02:29 find out all the core concepts we have
  • 00:02:32 when it comes to creating forms in HTML
  • 00:02:35 also very important you will also find
  • 00:02:37 out more about the form element right
  • 00:02:40 here this special element we use to
  • 00:02:42 create such a form and about the
  • 00:02:44 elements inside this form D so called
  • 00:02:47 widgets for example this input or this
  • 00:02:50 text area element but here so definitely
  • 00:02:53 make sure to check out that to
  • 00:02:55 understand the general concept of a form
  • 00:02:57 in addition to that also make sure to
  • 00:03:00 read through this article sending from
  • 00:03:03 data as I said this will talk about the
  • 00:03:05 submit event so this event that happens
  • 00:03:08 once we click on to this button and also
  • 00:03:10 about this get and post requests because
  • 00:03:13 the information will be sent to a server
  • 00:03:15 now if these things clarified let's now
  • 00:03:18 think about form validation in
  • 00:03:20 JavaScript now if these things clarified
  • 00:03:23 let's now go back to our page and add
  • 00:03:26 the form validation with JavaScript for
  • 00:03:29 that we have two goals the first goal is
  • 00:03:31 as we saw it in the intro to make sure
  • 00:03:33 that the button changes the color once
  • 00:03:36 all our inputs are valid and the second
  • 00:03:39 goal is to make sure that this button is
  • 00:03:41 clickable and that we also output this
  • 00:03:44 submitted text to our console let's
  • 00:03:47 focus on to this changing background
  • 00:03:49 color thing first because for that we
  • 00:03:51 need access to these two fields this
  • 00:03:55 text area and the button and then we
  • 00:03:57 have to tell our code basically when the
  • 00:04:01 puts into these fields are valid and
  • 00:04:03 that the button should change the
  • 00:04:05 background-color so basically our button
  • 00:04:07 needs to be able to understand what
  • 00:04:09 happens to our fields right here for
  • 00:04:11 that let's go back to our code and let's
  • 00:04:14 have a quick look at the HTML code this
  • 00:04:16 is our form right here and as we can see
  • 00:04:19 the first input right here has the ID
  • 00:04:22 input name then we have the second input
  • 00:04:25 this male input with the ID input male
  • 00:04:28 the third one our message has the input
  • 00:04:31 message ID and then we have our button
  • 00:04:33 with the submit button class right here
  • 00:04:35 so let's first get access to all these
  • 00:04:39 elements for that we go to the main
  • 00:04:42 choice file and now we simply apply
  • 00:04:44 concepts we know from the previous
  • 00:04:46 videos in this series so we declare a
  • 00:04:48 variable which we could call input name
  • 00:04:51 for example and let's now add document
  • 00:04:54 get element by ID so we will use the ID
  • 00:04:57 selector this time and I forgot the ID
  • 00:05:00 to be honest its input name so let's add
  • 00:05:03 input name right here and now we can
  • 00:05:06 simply copy this two times actually
  • 00:05:11 three times and now change name to male
  • 00:05:17 like that and also input male right
  • 00:05:21 because that's what we want to access
  • 00:05:23 right here and then we have the third
  • 00:05:26 one which is message it should also be
  • 00:05:29 input message right here and for the
  • 00:05:34 last variable we want to access our
  • 00:05:36 button so let's maybe name the variable
  • 00:05:39 button and I will use the fury selector
  • 00:05:42 right here like that and now we will
  • 00:05:45 access the submit button class right
  • 00:05:48 here this one so let's add it right
  • 00:05:51 there and don't forget to add dot to
  • 00:05:53 make sure the class is selected
  • 00:05:55 correctly so now we can select all these
  • 00:05:57 elements and now we have to define a
  • 00:06:00 function and in this function we simply
  • 00:06:03 want to check if our fields have a value
  • 00:06:06 as an input and if the fields have a
  • 00:06:09 value then the background color of our
  • 00:06:12 button should change now let's do this
  • 00:06:14 step
  • 00:06:15 step and let's start by creating our
  • 00:06:17 function and this function could be
  • 00:06:20 called check input maybe as you prefer
  • 00:06:23 and inside this function we now need to
  • 00:06:28 check if the inputs are valid as I said
  • 00:06:31 for that a so called if statement
  • 00:06:33 definitely is not the worst idea so
  • 00:06:36 let's add it let's say if and now we
  • 00:06:38 need to specify a condition so what
  • 00:06:41 should happen to our inputs to make sure
  • 00:06:43 that this if condition is true well
  • 00:06:46 actually it's quite easy we simply have
  • 00:06:49 to say that our input name this object
  • 00:06:51 right here so basically our field
  • 00:06:54 well this fields input name this fields
  • 00:07:00 now we need to access a specific
  • 00:07:01 property because this fields value right
  • 00:07:05 because that's what's interesting if
  • 00:07:07 this field contains a special value then
  • 00:07:10 this if condition is true and actually
  • 00:07:13 we do not have to specify a special
  • 00:07:16 value because we could just think about
  • 00:07:18 it the other way around because we could
  • 00:07:21 either check if this field contains any
  • 00:07:24 value or any specific value or we could
  • 00:07:27 just say that if the value of this field
  • 00:07:30 is not equal so this right here this
  • 00:07:34 comparison operator
  • 00:07:35 exactly checks that so is not equal to
  • 00:07:39 what – empty because if it would be
  • 00:07:42 empty then it would not be true but as
  • 00:07:44 soon as we enter any value into this
  • 00:07:47 field this should become true that's
  • 00:07:50 maybe not the perfect solution for that
  • 00:07:52 but I think it's a really nice approach
  • 00:07:54 to understand the basic concept behind
  • 00:07:57 this validation logic right here so with
  • 00:08:00 that we said that if our input value is
  • 00:08:03 not equal to Mt then this is true that's
  • 00:08:07 the first case so what should happen if
  • 00:08:10 this is true well then we want to access
  • 00:08:13 our button and what do we want to access
  • 00:08:16 we also learned that for this series we
  • 00:08:18 want to access the style property
  • 00:08:21 specifically this time we want to access
  • 00:08:23 the background color and whenever this
  • 00:08:27 condition is true
  • 00:08:29 then the background color of our button
  • 00:08:31 should change to let's say F a 9 to 3 F
  • 00:08:35 like that so that's the first condition
  • 00:08:39 so if this condition is true then this
  • 00:08:42 should happen but what if this is not
  • 00:08:44 true so if we don't have any value in
  • 00:08:47 our field well then we have to say else
  • 00:08:51 well else it's pretty easy right we
  • 00:08:54 simply have to add button style
  • 00:08:56 background color once again and now we
  • 00:09:00 could set it equal to the default color
  • 00:09:02 so to this gray right here and this can
  • 00:09:05 be found in this style CSS sheet right
  • 00:09:07 here in the submit button selector so
  • 00:09:10 this code right here including the hash
  • 00:09:13 and we can simply paste it right here
  • 00:09:15 don't forget to add the semicolon and
  • 00:09:17 with that we actually defined that
  • 00:09:20 function already we only defined it for
  • 00:09:23 the first input field input name though
  • 00:09:26 but the general concept is finished the
  • 00:09:30 only problem we have though is that well
  • 00:09:32 this function doesn't get called at the
  • 00:09:35 moment so we didn't tell our code when
  • 00:09:38 it should execute this function the good
  • 00:09:40 thing is that we have a really nice
  • 00:09:42 approach that we can use right here
  • 00:09:44 which allows us to execute or access
  • 00:09:48 this function whenever we add any kind
  • 00:09:50 of input into our name field this can be
  • 00:09:55 added by simply going to the HTML file
  • 00:09:58 and now we go to our input right here
  • 00:10:02 the second one with the ID input name
  • 00:10:04 and now we simply add the on input
  • 00:10:08 attribute right here this attribute well
  • 00:10:11 as the name actually indicates simply
  • 00:10:14 reacts to any kind of input that we have
  • 00:10:17 for our input field right here so in
  • 00:10:20 easy words whenever we type anything
  • 00:10:22 into this field so this on input can
  • 00:10:26 react to these values we enter and how
  • 00:10:30 does it react well it reacts by calling
  • 00:10:33 a specific function and as we already
  • 00:10:36 defined a function this one right here
  • 00:10:38 our check input function I think it
  • 00:10:41 might be good idea to simply add
  • 00:10:43 this check input function right now for
  • 00:10:47 this on input attribute so check input
  • 00:10:50 important also add the parentheses
  • 00:10:53 because you really want to call this
  • 00:10:56 function we don't want to point to this
  • 00:10:58 function we want to call and therefore
  • 00:11:00 execute it really important to add this
  • 00:11:02 right here but with that we actually
  • 00:11:04 have a nice structure right we made sure
  • 00:11:07 that we have a way to kind of listen to
  • 00:11:09 events so to this input event right here
  • 00:11:11 whenever we type anything and once we
  • 00:11:14 enter a value we will execute this
  • 00:11:17 function right here which hopefully then
  • 00:11:19 changes the background color of our
  • 00:11:21 button let's see if we reload the page
  • 00:11:24 if this works so if I enter a for
  • 00:11:26 example right here yeah as you can see
  • 00:11:29 once I enter a value the background
  • 00:11:32 color of the button immediately changes
  • 00:11:33 this also works if I enter multiple
  • 00:11:36 values of course it stays orange but
  • 00:11:38 once I delete the values the button gets
  • 00:11:40 grey again we do have one issue though
  • 00:11:43 because if I just enter a space now the
  • 00:11:47 button color also changes that's
  • 00:11:49 probably not what we want at the moment
  • 00:11:51 because we only want to change our
  • 00:11:53 buttons color if we enter any value but
  • 00:11:56 not a space so any value different from
  • 00:11:59 a space a white space basically the good
  • 00:12:02 thing is that we can easily trim our
  • 00:12:04 function with a method that's well
  • 00:12:06 actually called like that the trim
  • 00:12:09 method so if we go back to the code and
  • 00:12:11 now simply add after the value property
  • 00:12:15 this trim method like that including the
  • 00:12:19 parentheses again like that well then
  • 00:12:22 the value will be trimmed this means any
  • 00:12:27 white space to the left or to the right
  • 00:12:29 of our string will be deleted basically
  • 00:12:32 now what does this mean if we save that
  • 00:12:35 and go back then if I would add a space
  • 00:12:38 now the button color doesn't change but
  • 00:12:41 if I type space hello it will change
  • 00:12:44 again so that's basically how you can
  • 00:12:47 easily get rid of such white spaces to
  • 00:12:49 the left and to the right of your
  • 00:12:52 strings so that was the first step we
  • 00:12:55 made sure that the
  • 00:12:56 name field now is I feel that our button
  • 00:12:59 recognizes and that he can react you but
  • 00:13:02 we also have the mail and the message
  • 00:13:04 field let's quickly add the message
  • 00:13:07 field first because the logic is exactly
  • 00:13:09 the same and then have a look at the
  • 00:13:11 mail because for the mail I want to make
  • 00:13:14 a more specific a more tailored check to
  • 00:13:18 see if the mail is really valid now
  • 00:13:21 let's work on the message and as I said
  • 00:13:23 this is quite simple actually because
  • 00:13:26 it's basically the same code right here
  • 00:13:28 the only thing we have to changes we
  • 00:13:30 have to change input name to input
  • 00:13:32 message so we can simply take this part
  • 00:13:36 right here like that and now in a space
  • 00:13:39 and copy it right here now we change
  • 00:13:42 name to message right because this is
  • 00:13:47 the variable name we have right here and
  • 00:13:49 now this won't work because we have to
  • 00:13:52 add a specific operator a so-called
  • 00:13:54 logical operator to our code because
  • 00:13:57 what we want to tell our if statement
  • 00:13:59 right here is that it should check if
  • 00:14:01 this condition right here is true the
  • 00:14:03 first one and that's important thing and
  • 00:14:07 the second condition should also be
  • 00:14:10 checked and we should see if this is
  • 00:14:12 true or not and as I said the logical
  • 00:14:15 operator we need for that is the end
  • 00:14:18 logical operator and we simply added by
  • 00:14:21 typing and this end symbol two times and
  • 00:14:25 now the if statement will check if the
  • 00:14:27 first condition right here and this
  • 00:14:30 second condition if both are true and if
  • 00:14:33 that's the case then this code right
  • 00:14:35 here will be executed
  • 00:14:37 however we can save this but we also
  • 00:14:41 have to add our own input attribute to D
  • 00:14:45 message of course because otherwise the
  • 00:14:47 event that we type a value into our
  • 00:14:50 message field cannot be recognized by
  • 00:14:52 our JavaScript code so let's simply copy
  • 00:14:57 this code right here and edit down here
  • 00:15:00 after our input message ID right there
  • 00:15:04 for example with that if we go back load
  • 00:15:07 the page and type a right here we
  • 00:15:10 get an error cannot read property let's
  • 00:15:13 see yeah I got a typo right here this
  • 00:15:17 should of course be written with a small
  • 00:15:19 M not a capital M sorry for that
  • 00:15:21 but we're saving that and we loading the
  • 00:15:24 page this should work perfectly now so
  • 00:15:26 let's see if I type a right here and
  • 00:15:28 also any kind of value for the message
  • 00:15:31 then you see that our submit button
  • 00:15:33 changes its color if I delete this right
  • 00:15:36 here it turns grey again if I at this
  • 00:15:39 one it gets orange and if I delete this
  • 00:15:41 one it also turns back to gray so this
  • 00:15:44 validation is also working now so we
  • 00:15:46 have the name and the message validated
  • 00:15:49 the only problem now is the mail because
  • 00:15:52 as I said I want to make sure that we
  • 00:15:54 have a better a more specific validation
  • 00:15:58 method for that and I will use reg X for
  • 00:16:01 this purpose reg X stands for regular
  • 00:16:04 expressions and these rhetorics simply
  • 00:16:07 allow us to check if our code meets
  • 00:16:10 certain or specific patterns in case you
  • 00:16:14 never heard about these make sure to
  • 00:16:16 have a look at this serious right here
  • 00:16:19 because in there max gives you a really
  • 00:16:21 cool introduction into reg X so
  • 00:16:23 therefore make sure to check this out in
  • 00:16:26 case you're not sure about how read
  • 00:16:28 checks generally work however we want to
  • 00:16:31 add a reg X now for our mail validation
  • 00:16:34 this means we first have to add another
  • 00:16:37 variable up here I will call this
  • 00:16:40 variable
  • 00:16:40 well maybe reg X and now we will simply
  • 00:16:44 add two slashes like that and in between
  • 00:16:47 these slashes I will now paste a regular
  • 00:16:52 expression you can find the irregular
  • 00:16:54 expression in the video description by
  • 00:16:55 the way so let me paste that right here
  • 00:16:57 and at the semicolon and without diving
  • 00:17:01 into the details behind this rather
  • 00:17:03 simple regular expression this simply
  • 00:17:05 checks if we have a value different from
  • 00:17:09 a white space right here then an @
  • 00:17:11 symbol which makes sense for an email I
  • 00:17:13 guess then it checks again if we have a
  • 00:17:16 value different from a white space then
  • 00:17:18 if we have a dot and then it checks for
  • 00:17:20 another value different from a white
  • 00:17:22 space of
  • 00:17:24 course this will not check for any kind
  • 00:17:26 of email combination that we can imagine
  • 00:17:28 but that's not the idea of this video
  • 00:17:30 you can of course add any regular
  • 00:17:32 expression of your choice right here
  • 00:17:34 the important thing is that you
  • 00:17:36 understand the logic how you can do this
  • 00:17:38 so we have our rhetorics up here but now
  • 00:17:40 we need to include it as a condition in
  • 00:17:43 our if statement how can we do this well
  • 00:17:46 first we will add another logical
  • 00:17:48 operator the end operator because I want
  • 00:17:51 to have the check for the email as the
  • 00:17:54 second condition just to follow along
  • 00:17:55 the flow in our form right here and now
  • 00:17:59 we can use a special read checks syntax
  • 00:18:02 which simply works like that we add read
  • 00:18:04 checks so our variable right here that
  • 00:18:07 we defined and now we add the test
  • 00:18:09 method right here don't forget to add
  • 00:18:12 the parentheses right here because
  • 00:18:15 inside the parentheses we now simply
  • 00:18:18 have to specify what should be tested
  • 00:18:20 against this rhetorics right here well
  • 00:18:23 and in our case this is of course our
  • 00:18:25 input mail because if we paste it right
  • 00:18:29 here and now specified that for input
  • 00:18:32 mail a specific property should be
  • 00:18:34 tested against this parentheses and
  • 00:18:37 which property could that be well D
  • 00:18:39 value property once again that's
  • 00:18:42 actually exactly the same logic we had
  • 00:18:45 for our input name and for our input
  • 00:18:47 message but now we're just testing this
  • 00:18:49 value against this regular expression
  • 00:18:52 with that we cannot make sure that we
  • 00:18:55 have a better email validation
  • 00:18:57 implemented but we also have to make
  • 00:18:59 sure that we add our own input attribute
  • 00:19:03 right here also to our second input this
  • 00:19:07 one right here for our email so let's
  • 00:19:09 add this quickly right here like that
  • 00:19:12 well and if we now did a good job then
  • 00:19:16 if we reload the page and enter a value
  • 00:19:19 right here a valid email which could be
  • 00:19:22 something like test at test.com and
  • 00:19:26 another value for the message then our
  • 00:19:29 submit button changed its color that's
  • 00:19:31 pretty good
  • 00:19:32 if I get rid of that right here it turns
  • 00:19:34 gray again that's what we saw already
  • 00:19:36 but
  • 00:19:37 now delete the dot for example you can
  • 00:19:40 see that the button turns back to gray
  • 00:19:43 so it's invalid again and if I get rid
  • 00:19:46 of the ad for example same thing happens
  • 00:19:48 and the same thing should be true if I
  • 00:19:51 delete the values in front of the ad
  • 00:19:55 symbol for example so this works quite
  • 00:19:58 nice actually by the way in case you
  • 00:20:01 wonder why we didn't have something like
  • 00:20:03 equals true or something like that
  • 00:20:06 right here to our regex test well this
  • 00:20:09 is simply due to the fact that if we
  • 00:20:11 write the code like this inside our if
  • 00:20:13 statement the result will automatically
  • 00:20:15 be true or false and if the result of
  • 00:20:18 this test is true then our if condition
  • 00:20:20 will be met that's just a side note
  • 00:20:23 however we have this nice color for the
  • 00:20:26 button and now it's orange but if I
  • 00:20:28 click on to it well still nothing is
  • 00:20:30 happening and this is due to the fact
  • 00:20:33 that at the moment we have here for our
  • 00:20:37 button now there the disabled attribute
  • 00:20:40 added and because of that the button is
  • 00:20:44 well as the name indicates disabled
  • 00:20:46 therefore we cannot click it now in the
  • 00:20:49 first step I want to make this button
  • 00:20:51 clickable again for that we can use the
  • 00:20:54 JavaScript logic we added so far and
  • 00:20:57 simply add the button with the disabled
  • 00:21:03 attribute now now at the moment the
  • 00:21:06 disabled attribute is true it is
  • 00:21:09 activated you could say and therefore we
  • 00:21:11 cannot click the button but if I now
  • 00:21:13 change this abled to false right here
  • 00:21:17 like that without any quotation marks
  • 00:21:19 because we don't want to have a string
  • 00:21:21 right here this should be a boolean a
  • 00:21:23 so-called boolean so we could have true
  • 00:21:25 or false in that case here we need false
  • 00:21:28 because if the condition is met so if
  • 00:21:31 the button changes our background color
  • 00:21:33 it should also be clickable therefore
  • 00:21:36 disabled should be set to false now we
  • 00:21:40 should also add the button right here
  • 00:21:43 for our else case so if the conditions
  • 00:21:46 are not met then our button should of
  • 00:21:48 course be disabled therefore
  • 00:21:51 we said it right here too true so if we
  • 00:21:54 now go back reload the page add some
  • 00:21:57 valid values right here like that and
  • 00:22:02 now well before I submit the button let
  • 00:22:06 me show you right here my address bar
  • 00:22:09 appear and please note that right now
  • 00:22:12 the URL ends with HTML that's important
  • 00:22:16 because if we now click on to submit
  • 00:22:19 this hopefully changes let's see you
  • 00:22:22 well first we saw that the zoom changed
  • 00:22:25 let's make it like that again well now
  • 00:22:28 you can see some interesting things the
  • 00:22:30 first thing is that the form was cleared
  • 00:22:33 again because the form was now submitted
  • 00:22:35 but more interestingly we can also see
  • 00:22:38 that now after HTML right here we have
  • 00:22:42 the actual content of our form added to
  • 00:22:46 our URL here we have the name which was
  • 00:22:49 equal to a we have our email with test
  • 00:22:52 at test comm and we have the message
  • 00:22:55 which was equal to a not the most
  • 00:22:57 creative content though but still we can
  • 00:22:59 see that this was added to our URL now I
  • 00:23:03 won't dive into the details behind what
  • 00:23:05 was happening right here now as I said
  • 00:23:07 make sure to check out the mdn article
  • 00:23:10 this one right here sending form data in
  • 00:23:13 case this is totally new for you the
  • 00:23:16 only important thing I want to focus on
  • 00:23:18 right now is that with the button being
  • 00:23:21 enabled again we are able to fire a
  • 00:23:24 submit event and as I didn't add any
  • 00:23:28 kind of attributes right here to our
  • 00:23:31 form normally you would add two
  • 00:23:33 attributes at least you would add the
  • 00:23:36 action attribute which would define
  • 00:23:38 where this form should be submitted to
  • 00:23:40 and you would also define a method I get
  • 00:23:43 or post would be the values for that and
  • 00:23:45 in my case right here I didn't specify
  • 00:23:49 any of these attributes therefore the
  • 00:23:52 method is get and the action so where
  • 00:23:56 this form of be submitted to is the
  • 00:23:58 current page in our browser
  • 00:24:00 therefore it's this page right here and
  • 00:24:03 we add the content
  • 00:24:05 here because well it's a get request as
  • 00:24:07 I said I won't dive too deep into this
  • 00:24:10 right now the important thing is that
  • 00:24:12 basically our submit button is working
  • 00:24:14 now but there might be cases but you
  • 00:24:16 might say well I don't want this request
  • 00:24:19 this get requests in our case to happen
  • 00:24:21 immediately this means I want to prevent
  • 00:24:24 the default behavior after the submit
  • 00:24:27 event right here was fired now the good
  • 00:24:30 thing is that with JavaScript we can
  • 00:24:32 also easily do that the only thing we
  • 00:24:35 need for that is access to the actual
  • 00:24:37 form element now let's quickly get this
  • 00:24:40 access by going back to the code right
  • 00:24:43 here and now adding a variable named
  • 00:24:46 form and this should simply give us the
  • 00:24:49 access as I said to our form we will
  • 00:24:54 access the form of a class selector and
  • 00:24:57 the class is well form so it's quite
  • 00:25:00 easy so let's select the form class
  • 00:25:02 right here and now maybe down here we
  • 00:25:05 can add an event listener to this class
  • 00:25:08 so we will simply type form add event
  • 00:25:11 listener also something we learned about
  • 00:25:14 in the previous parts of the series by
  • 00:25:16 the way and now we will add submit as
  • 00:25:19 the event this event listener should
  • 00:25:21 listen to because that's what happens if
  • 00:25:24 we click onto the submit button a submit
  • 00:25:27 event will occur now with this event we
  • 00:25:30 also have to define a function and we
  • 00:25:34 will define a special function for that
  • 00:25:36 because whenever an event occurs in
  • 00:25:40 JavaScript a default event object is
  • 00:25:43 generated now again I won't dive into
  • 00:25:46 the details behind that but the
  • 00:25:48 important thing is that we can listen to
  • 00:25:51 this event and we can actually access
  • 00:25:53 this event now how can we do this well
  • 00:25:56 we first have to add a parameter to this
  • 00:25:58 event this parameter could have any name
  • 00:26:01 you want I will just name it event right
  • 00:26:04 now and now I want to do two things
  • 00:26:08 first I want to make sure that this
  • 00:26:11 default event that happens after
  • 00:26:14 clicking onto the submit button is
  • 00:26:17 prevented
  • 00:26:18 and what is this event while they click
  • 00:26:20 onto the submit button and with that the
  • 00:26:22 request will be sent to a server and I
  • 00:26:25 want to prevent this request I don't
  • 00:26:27 want this to happen for that I simply
  • 00:26:30 type event now like that because that's
  • 00:26:33 right here our default event object
  • 00:26:35 basically and now we type prevent
  • 00:26:39 default including the parentheses right
  • 00:26:42 here in addition to that I will add a
  • 00:26:46 console log like that and log well the
  • 00:26:49 event to see what's actually happening
  • 00:26:51 right here if I now go back and reload
  • 00:26:54 our page or maybe even quickly jump to
  • 00:26:57 the home page and go back to the contact
  • 00:27:00 page to make sure that the URL doesn't
  • 00:27:02 include our content of the forum that we
  • 00:27:05 added right here and if I now add name
  • 00:27:08 valid email and a message well if I now
  • 00:27:14 hit submit once again then you can see
  • 00:27:17 two interesting things you can see that
  • 00:27:20 the URL ends still with HTML so we
  • 00:27:23 didn't add the actual content of our
  • 00:27:26 form right here as we did it before and
  • 00:27:29 therefore the get request wasn't sent to
  • 00:27:32 the server because well we prevent this
  • 00:27:35 default behavior with this method right
  • 00:27:37 here and we also locked the actual event
  • 00:27:41 and if we click right here you can for
  • 00:27:43 example see that the default behavior
  • 00:27:46 indeed was prevented so let me quickly
  • 00:27:49 summarize that we made sure that once we
  • 00:27:51 click onto the submit button the submit
  • 00:27:54 event is fired but the default event
  • 00:27:57 which would send a request to a server
  • 00:27:59 is not occurring
  • 00:28:01 right now but we could do right now is
  • 00:28:04 we could also add something like
  • 00:28:06 console.log may be submitted like that
  • 00:28:09 to kind of display our own message right
  • 00:28:12 here so if we reload ad test add test
  • 00:28:18 com
  • 00:28:19 [Music]
  • 00:28:21 like that and now press submit now you
  • 00:28:24 can see that we print submit it to our
  • 00:28:27 console another question is why would I
  • 00:28:30 want to prevent this default event from
  • 00:28:33 happening well that could be various
  • 00:28:35 reasons one reason could be for example
  • 00:28:37 that you want to further process the
  • 00:28:40 information your user would send you
  • 00:28:42 through this form you could add some
  • 00:28:44 additional information to it for example
  • 00:28:46 and by controlling the actual requests
  • 00:28:50 by controlling the fact when it should
  • 00:28:52 be submitted you can easily do that and
  • 00:28:54 by that gain additional well form
  • 00:28:57 control and that's it actually that was
  • 00:29:00 a very basic example how you could
  • 00:29:03 implement form validation with
  • 00:29:05 JavaScript now of course there are
  • 00:29:07 multiple ways how to implement form
  • 00:29:09 validation in your code you could also
  • 00:29:12 do it on the server side for example but
  • 00:29:14 the purpose of this video really was to
  • 00:29:16 get you started with JavaScript to let
  • 00:29:19 you dive deeper a bit and to get an
  • 00:29:21 understanding how you can apply all
  • 00:29:23 these different theoretical concepts
  • 00:29:25 like D if condition we had like event
  • 00:29:28 listeners or also like the prevent
  • 00:29:30 default method to trim method and more
  • 00:29:33 and with that I can only say well thanks
  • 00:29:36 a lot for watching and I hope to see you
  • 00:29:37 in one of the next videos of this series
  • 00:29:40 bye