Guided Practice with HTML Form Validation, Part 2

Loading...

En provenance du cours de University of California, Davis

Introduction to Web Development

273 notes

University of California, Davis

Introduction to Web Development

273 notes

This course is designed to start you on a path toward future studies in web development and design, no matter how little experience or technical knowledge you currently have. The web is a very big place, and if you are the typical internet user, you probably visit several websites every day, whether for business, entertainment or education. But have you ever wondered how these websites actually work? How are they built? How do browsers, computers, and mobile devices interact with the web? What skills are necessary to build a website? With almost 1 billion websites now on the internet, the answers to these questions could be your first step toward a better understanding of the internet and developing a new set of internet skills. By the end of this course you’ll be able to describe the structure and functionality of the world wide web, create dynamic web pages using a combination of HTML, CSS, and JavaScript, apply essential programming language concepts when creating HTML forms, select an appropriate web hosting service, and publish your webpages for the world to see. Finally, you’ll be able to develop a working model for creating your own personal or business websites in the future and be fully prepared to take the next step in a more advanced web development or design course or specialization.

À partir de la leçon

Creating Web Applications

In our final module, we're going to explore the basics of designing web applications - programming useful and dynamic webpages that allow our users to interact with them. By the end of this lesson you'll be able to: distinguish between client and server-side development; apply advanced JavaScript programming skills to create logic with selection and iteration; create new features for applications; create more advanced HTML forms; and practice and learn additional troubleshooting and problem-solving techniques. The module wraps with a final peer review activity that will draw upon all of the skills you've learned in this course.

Module 6 Introduction1:42

Client-side versus Server-side Application Development4:28

Features in Web Applications: The While Loop5:16

Features in Web Applications: The For Loop5:02

Creating New Features in Web Applications3:37

Guided Practice with HTML Form Validation, Part 15:42

Guided Practice with HTML Form Validation, Part 27:44

Rencontrer les enseignants

Daniel Randall
Senior Architect at Composer Solutions and Instructor
UC Davis Division of Continuing and Professional Education

[MUSIC]

Hi, and welcome back.

This is our final guided practice lesson in preparation for

the course final project.

So in our last lesson, we looked at a version of this file,

called formsInput2, and here we have a renamed version called formsInput3,

that I've made a few changes to.

First, I've added the action attribute to the form.

We've talked about this in previous lessons.

The action attribute normally contains the name of a program on the server

that will process our form and return a result.

In our case, we're doing client side development only, so

we don't have a server side or a server side program to submit to.

You may study that in future courses.

In this case, I've created a so called dummy HTML page

that I've named mysubmitpage.html, and that page is right here.

I created it using a version of our standard template for HTML, and

I've given it an H1 tag, some text, submitted.

We'll see how it works in a moment.

So this file is here with the rest of our files.

Here's our formsInput3, and here is our mySubmitPage.

And so, if we make sure we're saved.

This file is saved, and this file is also saved.

We can go to our browser right here.

We'll refresh.

And if we try to submit, we're going to get the HTML5

error feature that we talked about previously, saying that we need some text.

And so, I'll add some.

And then, when we submit, we get the submitted.

So that it gives us a more sort of realistic

way to practice with our submit button.

And that submit button is right here.

On line 50 is input type submit, and value submit.

But notice, on 53, I've included a button that doesn't do anything, called click me.

If we didn't want to use a submit, if we weren't using an action with a dummy page,

we could instead use a button outside of the form like this called Click Me.

And in its on-click event, we could do all of the validation we wanted to do so

it would act similar to a submit button.

And that's up to you, which one you'd prefer to use.

This sort of kind of disabled submit, or a regular button, and

work with the on-click.

And, of course, you can also work with the on-blur events

of all the various elements of your form, on-blur or on-click.

So, we've seen how we can use it for submission.

But you may have noticed here also on line 25, I have a new event.

And this is called the onsubmit, it's associated with a form.

And here we have a tiny bit of JavaScript where we have return and validate form.

This is a function which we have up here, but notice that it's empty.

And we'll make our validate form function return either true or false.

And if it returns true, that means the form is valid.

If it returns false, that means that we've decided the form is not valid, and

we don't want it to submit.

So, let's try this.

We'll try alert, and just to have some text, we'll say, no way!

Don't forget our semicolons, and then return false.

Now, by saying return false, we're saying that it is not valid.

And so, notice that before we saw it go to our submit page,

here, we'll put in some text.

Then we'll click Submit, we'll a No way!

And notice, now it doesn't go to our Submit page.

But if we were to change our text, and keep in mind

the text here is not really important, we can have it say whatever text we want.

What's important is this return false, which means it's not valid,

or return true, which means it is valid.

Now that we're returning true for our validateForm, and

that's onsubmit return, and then this validateForm will return true or false.

We will return here, and fresh, and some text.

We said yes.

And we submit.

So this gives us an opportunity to do validation and return true or false.

And I've prepared some additional code on a separate page that

I'm going to now go copy.

And we can see how that'll work in our function.

Now I don't need this code anymore.

I'm going to keep the name of the function, but

I'm doing this cut and paste just to save time.

So now,

we have our same validateForm function, except it has new code inside of it.

And here, notice that, you may have noticed,

actually here, that we have user password in two fields.

A better way to do this would be this is a password, and

this field that would have a bit of text saying please retype your password.

Please confirm your password.

Something of that nature.

And here we have, on lines 45 and 46, two inputs.

One is password1, one is password2.

And here, we're using our ever present document.getElementById,

password1, and also password2.

And putting these values into two variables, pass1 and pass2.

You might prefer to name these more descriptively, rather than one and

two, like password and confirm, password.

Now we'll test them to see if they're equal.

We'll use the equality operator to do that.

And if they are equal, we're going to alert passwords match.

We might not want to give this to a real user of our site because, if it matches,

they'd rather probably that we just not mention it.

We would mostly just mention if they were not matching.

But if they match, we'll return true.

And if they don't match, we'll return false.

Now, we could do as much validation as we wanted here.

In this example, we're only validating the password.

We could validate any other fields we chose to validate on validateForm.

So, let's save this.

And go here, type in a bit of text there.

And then, I'm going to type in AAA.

And here, AAA, submit.

And we're getting passwords match, which is probably unnecessary as a message.

But notice it submits.

Now, if I return, and this time I'm going to type AAA.

But in the next field I'm going to type something different, SSS.

And notice password do not match, and it did not submit.

So this gives us another way of looking at submitting and validating our forms.

And I want to wish you all the best of luck on your final projects.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play