HTML Form Validation: JavaScript

Loading...

University of California, Davis의 강좌에서

Introduction to Web Development

416개의 평가

University of California, Davis

Introduction to Web Development

416개의 평가

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.

수업에서

Creating HTML Forms

In this lesson, we're going to learn to apply all of the skills we've acquired so far to make a very common, and very useful type of webpage - an HTML form. HTML forms are seen everywhere on the internet and are used to capture particular information from users in a variety of ways. By the end of this module you'll be able to: create basic HTML forms; identify and appropriately use different types of HTML input; validate user input; submit HTML forms; and test how your forms are working and troubleshoot errors.

Module 5 Introduction1:56

HTML Forms User Input7:09

HTML Form Elements7:14

HTML Form Validation: JavaScript6:24

HTML Form Validation: Complex Form Example5:21

HTML Form Validation: Additional Features7:35

HTML Form Validation: Processing5:50

강사 만나기

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

[MUSIC]

Hi and welcome to the lesson.

Last time we discussed HTML form input in all its many forms.

This time we're going to talk a little bit about Form validation.

Which will be the main topic for our course final project.

So here we have a file that we've looked at before.

We used it when we were setting the on blur events for JavaScript.

And we have a few form elements.

We have three text fields, and, actually, I've just added four.

And the first two do validation

with JavaScript functions called checkField1 and checkField2.

And now we've got checkField3, and,

on the fourth input, the one that starts on line 53.

We are using HTML5 to validate the input.

Now HTML5 does some input validation without explicitly using JavaScript.

And because the form element here is longer I've wrapped it a bit.

So here is where it begins to wrap,

and I can do this to have it all on the same line if I like.

But because it's long and I want to be able to see it, I'm going to wrap it

below, and HMTL doesn't mind if we use white space that way.

So, Let's look a little bit at how the HTML5 version works.

Notice here we have the attribute pattern which we haven't seen before.

And in this pattern,

we have a value of Capital A-Za-z {3}.

This is the regular expression which is a string that matches a certain pattern.

In this case the pattern means any uppercase letter.

Or any lower case letter and that we need to have three of them.

And if we use this kind of pattern when the form is submitted

HTML5 will check to see if the input matches the pattern.

If it does it will allow it to go.

If it doesn't match the pattern we'll get a message.

So let's look at that.

So, here's that form.

I'll refresh to make sure I have the most recent version.

And here, I'm going to type, 4.

Just to make sure that I'm not using three letters as required.

Now when I click submit, notice here I get a please match the requested format three

letter country code.

If I go back to the code itself,

notice here there's a title attribute that says three letter country code.

So this is the error message the user gets if they fail to match the pattern.

The problem with this approach in HTML5 is not supported in all browsers, so

at some point in the future you may be able to do some validation like this,

by using a regular expression.

Another challenge with regular expressions is not everyone knows or understands them.

So rather than writing your own regular expressions, unless you

really enjoy doing that, you can look them up in a book or on a website and

use the regular expressions other people have already written.

Make sure when you're doing this, especially if you're not sure how

the expression works, that you test it to make sure you get the results you want.

So let's look at an alternative that's probably a better choice at this point,

on line 52.

We have a version of this same thing

in this JavaScript function that starts on line 28, and it's called checkField3, and

you may recall that here on line 52.

And lines 50 and 51 as well we have you on blur.

And each are set equal to the value of a JavaScript function.

So here in checkField3, we're getting the value.

From the input as we've done many times using document.getElementById for

field three.

And on line 30 we have something new a variable called regex and its said equal

to the same regular expression we saw in the HTML5 input below.

Now we can use regex dot test, it's this variable's name in here.

Regex.test and then, the field.

So this field is the field we're getting from the user input and

regex.test will execute this pattern on the input.

And if it matches we'll get input accepted.

If it doesn't match we'll get a message saying we should use a three letter code.

So lets give that a try.

Again, I will refresh the page to make sure I have the most recent.

And here, I'll type, say just a d and then by moving out of

the field I'll execute the on border and notice, please use a three letter code,

and if I do use a three letter code like that, then I get Input accepted.

On the other hand, if I use a number, I'll get the error message again.

Now the advantage of using JavaScript to validate this input is that it will work

in all browsers.

Now keep in mind, input validation is important for

our applications because our users will not always type what we want in fact

frequently they will type something other than what we had in mind so

we need to do the validation to make sure we're guiding them.

Here, just by saying we want a three letter code.

For instance, when we mouse over this, we can see three letter code.

That doesn't mean the user will actually type it.

So we have to take extra steps

to make sure that their input is what we need and expect.

Well, that's all for this lesson.

And in the next lesson,

we'll continue looking at validating HTML forms with JavaScript.

Coursera 카탈로그 살펴보기

무료로 참여해 맞춤화된 추천, 업데이트 및 제안을 받아보세요.

Coursera는 세계 최고의 교육에 대한 보편적인 접근 기회를 제공하며, 최고의 대학 및 기관들과 제휴하여 온라인 강좌를 제공합니다.

© 2019 Coursera Inc. All rights reserved.

앱스토어에서 다운로드하기

구글 플레이에서 받기