Video 5. JS - HTML Validation - Contenido educativo
Ajuste de pantallaEl ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:
DAM1 - Video 5 - 2022/23
Okay, so, uh, here, um.
00:00:01
For the explanation that I'm going to, uh.
00:00:11
Like that we are going to, uh, and work with today and we are going to need or, uh, or this.
00:00:15
2 weeks we are going to use this.
00:00:25
Um, okay, it's, uh.
00:00:28
It looks very long, but it has lots of styles, but it's not really long.
00:00:35
It only has input type test and input type password and input type email and SLE and also a checkbox.
00:00:40
Okay.
00:00:57
So, you have, I got this example or this HTML from, let me see if we go back.
00:00:57
You have it here in the markup languages course.
00:01:11
And, okay, okay, okay, at the unit four, you have it here.
00:01:18
is this one form html you can download it and add it to the visual added to visual studio and you
00:01:29
can work with it at the same time as i do okay and i got it from this a man here steve griffiths that
00:01:38
has a video about working with forms and javascript okay i'm i have adjusted to what we have seen
00:01:47
okay it's not exactly i'm not going to explain exactly the same as he does but it is very
00:01:59
interesting if you have like a while to to see okay to watch it because like he works with he
00:02:06
he speaks about html and he explains some things that maybe you can use
00:02:14
afterwards okay but let's look well i'm not going to go through the style okay just you can
00:02:23
check it here we have the div we have the level we have the input i i don't know if we saw this part
00:02:31
like tab index one tab index two tab index three okay it's for uh working with the tab
00:02:40
filling the the form with tabs okay you tap and you go to the next field
00:02:47
okay so you can order the fields like the tab index um okay so today we are going to and and
00:02:53
at the very end we have a reset button and a submit button okay so the uh form looks something
00:03:03
like um like execute with chrome it's something like this okay uh first thing today we are going
00:03:12
to work with the reset first thing okay remember what the reset did we had a reset button and when
00:03:27
we wrote something but we didn't like what we had written we could click on cancel and and it's still
00:03:35
wait and this is working this is already taking my javascript but uh if we didn't have a javascript
00:03:47
uh it would do something like uh i write something i write something blah blah i have all my data
00:04:00
introduced and then i i just click on cancel and it cleans everything without asking okay and that's
00:04:10
really annoying sometimes okay i one of the things that you usually have in the forms is that if you
00:04:19
click cancel you get and here you can see what js okay you get a window that says are you sure that
00:04:29
you want to delete okay so something like this because i may have misunderstanding the cancel
00:04:38
button okay so i want something like a this window saying are you sure that you want to reset all the
00:04:50
information okay and if i say cancel it doesn't reset and if i say okay it resets it resets it
00:04:57
okay how can we do this uh we are going to use i'm going to create a new uh what um i don't know
00:05:05
here no we are going to do it from scratch i think i have this form and i'm going to create a
00:05:16
in javascript wait this is examples you know here i'm going to create a new file that is
00:05:24
a form not done dot yes and here i'm going to um i'm going to say form
00:05:33
okay so I have the button here and it's called button council okay so I'm going to get the
00:05:50
listener when the this button concept is clicked and I I'm going to tell the browser what to do
00:06:03
right that's the idea so a I come here I'm going to close others save whatever
00:06:11
and I'm going to open only these two so it's easier and here I'm going to say
00:06:23
document, get element by ID, and here, what was the name of the element, button cancel,
00:06:28
and I'm going to add an event listener that is going to be click, and when click, I'm
00:06:55
to say a reset form i'm going to call the a function okay so now i'm going to define function
00:07:04
function and the name is reset form and here i'm going to say something like
00:07:19
I'm going to open a window remember that we had a window that was alert that but that only showed
00:07:34
a message we have another window that is confirmed okay confirmed is it opens a window with two
00:07:43
bottoms accept and cancel okay so uh are you sure that you want to reset all the data okay and now
00:07:49
i have to say if okay i have to save sorry i have to save this into a variable let answer answer
00:08:10
okay and if answer that means if answer is true okay i'm going to reset okay
00:08:21
and so i'm going to get the element cancel and i'm going to
00:08:36
reset not a the element that you want to format is not the button is the form okay so it is a reset
00:08:50
but form here I have an ID form user and this is the element that I want to reset okay it's
00:09:07
Not the bottom, but the whole form.
00:09:24
I, sorry.
00:09:26
Okay.
00:09:32
Now I hope that it's going to work.
00:09:35
We cancel and nothing happens.
00:09:45
We say accept and it resets.
00:09:47
Okay.
00:09:50
We did it.
00:09:51
Eh, if I take the event, let me see.
00:09:53
If I take the prevent default, then let's see if that, that works.
00:09:59
Because I think I, I think that Chrome is.
00:10:06
Uh, no.
00:10:12
Thank you. Well, even if I say cancel it, it, it.
00:10:19
Uh, okay, so we need this sentence here. We need this code here.
00:10:38
For it not to reset by itself.
00:10:44
Okay, and.
00:10:48
We are going to do the same with the buttons, with the submit button.
00:10:53
Okay.
00:10:59
If we want to check the, if we want to check the form with JavaScript, we first
00:11:00
need to say that we want, we don't want to use the basic formatting that HTML does.
00:11:07
Okay.
00:11:15
So we are going to do something like, we're going to copy this and we are
00:11:16
going to say instead of button cancel we are going to say button submit okay and when we
00:11:25
when the button submit is clicked we are going to call a method that is validate validate
00:11:34
okay and we are going to create a function validate okay i didn't explain this what's this
00:11:41
If it can be, it can be, it was, it can be event. It can be the name that you want. It can be paper if you want. Okay. What's this? This is a, an argument that.
00:11:51
A half all the methods that are called with the event listener.
00:12:07
And it brings the information about the event that has been.
00:12:13
Uh, that about the element that has has called the event.
00:12:18
Okay, or about the event by itself.
00:12:24
Okay, so it has information about.
00:12:28
If, like, the button that has been pressed.
00:12:32
Uh, well, it doesn't it doesn't have much here because, like, the bottom here.
00:12:36
It's not really interesting. Okay, but it has information. For example, if the event is a, an event of the mouse, it has information about, uh, which button has been clicked if the right button or left button or.
00:12:42
Like, uh, information about if it's been a double click or things like that. Okay. So we'll be working with this. Remember that you can add it or not to any methods that you have.
00:12:58
Uh, being, uh, that you have called with an event.
00:13:11
Okay, okay, so we validate.
00:13:15
We are going to say also.
00:13:19
That we want to prevent default. Okay. So it's not going to send.
00:13:24
It's not going to send my form until I send it by with the code.
00:13:30
Okay, um.
00:13:36
So, I think this is enough for today. You can finish.
00:13:43
The example at home.
00:13:47
Okay, you can finish.
00:13:50
- Idioma/s:
- Autor/es:
- Lucia
- Subido por:
- Lucia S.
- Licencia:
- Todos los derechos reservados
- Visualizaciones:
- 61
- Fecha:
- 25 de marzo de 2023 - 21:26
- Visibilidad:
- Clave
- Centro:
- IES FRANCISCO DE QUEVEDO
- Duración:
- 14′ 03″
- Relación de aspecto:
- 1.78:1
- Resolución:
- 1920x1080 píxeles
- Tamaño:
- 89.11 MBytes