Explore
For Enterprise
Join for Free
Log In

예술 & 인문학
비즈니스
컴퓨터 공학
데이터 과학
정보 기술
건강
수학 및 논리
자기개발
물리 과학 및 공학
사회 과학
언어 학습
학위
수료증

Explore all of Coursera

검색
포 엔터프라이즈 (For Enterprise)
로그인
무료 회원 가입

HTML Form Validation: JavaScript

Loading...

Introduction to Web Development

캘리포니아 대학교 데이비스 캠퍼스

4.6(465개의 평가) | 46K명의 학생이 등록함

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.

강의 계획서 보기

배우게 될 기술

Css Code, Html, JavaScript, Cascading Style Sheets (CCS)

검토

4.6(465개의 평가)

5 stars
340 ratings
4 stars
94 ratings
3 stars
22 ratings
2 stars
3 ratings
1 star
6 ratings

RS

Jun 12, 2018

I am not new in coding, but in here I found something useful. I really recommend this course for new people, because it is very easy steps of how to make some coding or personal web page.

SY

Jun 11, 2019

A great course for beginners. Easily taught. Practice exercises are very engaging. Overall , the course is good enough for you to create a basic website with lots of validations and CSS.

수업에서

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

스크립트

[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.

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

구글 플레이에서 받기

Coursera
소개
리더십
직업
카탈로그
수료증
MasterTrack™ 수료증
학위
포 엔터프라이즈 (For Enterprise)
정부용

커뮤니티
Learners
Partners
Developers
Beta Testers
Translators

연결
블로그
Facebook
Linkedin
Twitter
Instagram
YouTube
기술 블로그

이상
조건
개인정보 보호
도움말
접근성
보도 자료
문의하기
디렉토리
계열사