Web Forms 2021 - Part 9: How to perform client-side validation (built-in, and with JavaScript) | Clyde Matthew | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Web Forms 2021 - Part 9: How to perform client-side validation (built-in, and with JavaScript)

teacher avatar Clyde Matthew, !false | funny, because its true

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (56m)
    • 1. Class Introduction - Form Validation

      1:40
    • 2. Two types of client side validation

      3:42
    • 3. Built in validation

      4:55
    • 4. Quick example - valid, invalid and required pseudo classes

      4:41
    • 5. The pattern attribute

      6:08
    • 6. JavaScript validation

      9:07
    • 7. JavaScript validation - objects

      2:50
    • 8. setCustomValidity method - example

      7:45
    • 9. Challenge intro - setCustomValidity

      3:33
    • 10. Challenge solution - setCustomValidity

      10:13
    • 11. Class Outro

      0:56
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

6

Students

--

Projects

About This Class

WELCOME TO THIS SKILLSHARE SERIES ON HOW TO BUILD AND UNDERSTAND WEB FORMS. THIS IS THE NINTH CLASS ON WEB FORMS --> VALIDATION. 

What we cover in this particular Class?

We will cover of ton of information in this entire series, but for Part 9 I'm going to teach you about validating form data. 

Form validation is required to prevent online form abuse by malicious users. Improper validation of form data is one of the main causes of security vulnerabilities. It exposes your website to attacks such as header injections, cross-site scripting, and SQL injections.

  • header injection attacks can be used to send email spam from your web server
  • cross-site scripting may allow an attacker to post any data to your site
  • SQL injection may corrupt your database backend

That's why I wanted to dedicated an entire class to form validation. 

Form validation is a technical process where a the web form is checked if the information provided by a user is correct.

The form will either alert the user that they messed up and need to fix something to proceed, or the form will be validated and the user will be able to continue with their registration process.

I'm sure I don't need to tell you how important this class is. 

SO, LET'S BEGIN

--- in case you're wondering, this entire series is about web forms. 

THE NITTY GRITTY OF WEB FORMS?

A web form is also known as an HTML form. It’s a place where users can enter data that’s then sent to a server for processing. Web forms allow users to place orders on your site, to provide their name and email address to sign up for a newsletter, or to sign up as a member to your site and so forth.

What’s really great about web forms is that there is no “one size fits all”. You can use your artistic flare, and personal business acumen to create web forms with a particular length, format, content type and appearance.

By doing this course, you’ll be able to improve your web form usability, which will ultimately enhance user experience and get website visitors excited about completing your form and converting.

Why is this course so important?

  • Forms which are on point present an opportunity for a company to grow and capture loyalty.

  • A form can often be both a marketing tool and a necessity. A form that puts the user at ease, that evokes feelings of trust, will get filled out far more often than a form which looks (or is) complicated and confusing.

  • After completing this entire Skillshare series, you will be knowledgeable, confident and the “go-to” person for forms.

Let me share my form building skills with you

Understanding how forms work will equip you to become an awesome front-end programmer. Learn how to implement your creative, different and dynamic ideas into your website. Master forms and you’re half way to becoming a full stack web developer. Take control through understanding. Delivering a perfect, interactive and functional form is challenging. In this series, I take a deep-dive into explaining web forms and how they work. Why do we need to wrap our form within <form> tags? How can you include a progress bar in a form? How can you customize a toggle or checkbox? Where does the data go once a user clicks on the submit button? How can you perform validation on your form? How can a user upload a file? What happens once the data arrives at the server? What are the different types of events we can listen to on forms? By understanding these questions, and many more in the course, you will be able to build advanced forms and better yet, understand the full stack process! In other words, you will be able to create dynamic forms that improve user engagement and experience.

WHAT THIS SERIES COVERS

This series is huge and comprehensive, from basics to advanced

This entire series (which I've split into multiple classes) will give you solid fundamentals and practicals regarding forms. It can be taken alone (you don’t need to do any other course) to achieve your goals. You will emerge from this course with an advanced understanding and practical experience with building forms. It will take you to the point where you will understand what method (GET or POST) to use when sending form data, how to define where the data goes, how to perform advanced client-side validation (checking errors on the form before it is sent to the server), how to write custom pattern validation rules (using regular expressions), how to run servers and how to view all HTTP request information. This is awesome knowledge. This series will captivate you and catapult you to the next level and set you well on your way to becoming a true Grandmaster in front-end form web development.

By the end of this series, you'll be able to “speak” and “walk” FORMS by gaining an understanding of how you can build it, manipulate it and style it in meaningful and practical ways. 

Why should you learn so much about forms?

A web form is one of the best ways to get input from prospective clients and indirectly establish a relationship with them. The time you spend in bringing the user to your website should be matched with the time spent in perfecting the user experience with your web forms. It is surprising to see so many sites these days contain complex and frustrating web forms that cause a negative experience.

Ultimately, a web form allows your visitors to get in contact with you and to send information, such as an order, a catalogue request, or even a query, which is passed on to your database.

Can you begin to see how important forms are and how their use can be escalated?

*** The most important course on FORMS on Skillshare***

Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how HTML code works behind the scenes. This is particularly true when it comes to building forms. If you’re wanting to become a full stack developer, you need to know, really know, how forms work. You need to understand how the browser URL encodes form data, how the browser sends data to a URL that you specify, and how to perform validation to ensure the user does not submit invalid data.

A unique approach

You will learn "why" things work and not just "how". Understanding advanced topics about forms (URL encoding, accept-charset, multipart/form-data, regex, etc) is important as it will give you infinite possibilities and upskill you. Armed with this knowledge, you’ll be able to create forms that are tailored to your needs, and allow the form data to get submitted to a server via AJAX. You will be able to create forms that are customizable by the user (for example, if the user wants to change the color of the form theme). You can create a control on a form that displays the progress completion of the form and displays messages to the user along the way.

Can you begin to see how pivotal forms are and how important having knowledge about forms is?

How is this Skillshare course different?

There are lots of courses on Skillshare that focus on web development. Many never get into the detail about how HTML forms work behind the scenes – a skill that every full-stack developer needs to master in order to utilize potential.

In this series, I focus on the more advanced topics of true web development when it comes to forms. This includes understanding what all of the attributes on the <form> element mean, understanding the different <input> types in detail, what URL encoding is, and how data is sent over the wire to a server.

Practice makes perfect

Theory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this entire series.

Is this course for you?

Absolutely. If you fit in any of these categories then this course is perfect for you:

Student #1: You want to advance in the world of programming.

Student #2: You want to know how successful developers build dynamic forms that engage with the user, have high conversions that put them ahead of the competition.

Student #3: You want to gain a solid understanding of how forms really work

Student #4: You want to start using backend technologies like Node or PHP with forms

WHY START NOW?

Right this second, your competitors are learning how to become better web developers.

Web development is a blazing hot topic at the moment, and in the foreseeable future. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.

Lets get started.

See you in the lectures.

Meet Your Teacher

Teacher Profile Image

Clyde Matthew

!false | funny, because its true

Teacher

Ideas are a dime a dozen. The hard part is execution. Unfortunately, most people never carry tasks to completion.

 

I've worn many hats in my career …  As a result, I have an ability to view all sides of a coin, something that is becoming crucial in our tech-savvy world.  

 

My experience and a few words:

 

·        I’ve had to learn things the hard way (aka: hard slog)

·        I want to teach people what I’ve learnt, with the hope of making a meaningful impact (cliché, but true)

·        No one is a master of everything. But at the same time... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class Introduction - Form Validation: Welcome, welcome, welcome to yet another class. I am super, super excited. My name is Clyde. I am going to be your instructor and this is part of an entire series around forms. We've come a very long way, but this is super interesting because we going to be talking about the client side validation and just take a step back and think about why validation is important. If you don't have validation on a form, what's going to happen? That's right. The user's going to fill out a form. The user's going to hit the submit button, the form daughter's going the server. And on the server you're going to have some validation we needed from assume that the server vein finds an error that's going to have to issue a response back to the browser telling the user isn't era and the whole process has to repeat. That is very inefficient. And that is exactly why we have client side validation. But what you may not know is that there are two types of client-side validation. We've got bolt invalidation and by Bolton not just mean both in by the browser. For example, an input of type of email has certain hex and requirements that need to be met in order for the browser to allow the user to submit before. So that's built-in validation. The second type of client side validation is JavaScript validation. Yes, we have to code up some JavaScript, but don't worry, I'll show you how to do that. And we're going to be using the constraint validation API. It's going to be fascinating. So this class really is for all levels of you experienced that you're just starting out. Don't worry, it's for you. You'll be able to follow along and you will learn something new. So enough blubber, blubber. Let's get into it. See you in the very first lecture. 2. Two types of client side validation: Super, super exciting, isn't it? Because now we're going to be talking about form, Foundation. And it's not going to be that complicated of a section. I mean, you know a lot of it already we've covered many, many incidences of us performing front end validation, but I just want to talk a little bit more about it in more detail. So as you know, before submitting data to the server, you should ensure that all required form controls or full-out in the correct format. And this is called what, 100 percent. That's called client side validation. And client side validation helps ensure that the data submitted matches the requirements set forth in the various form controls. And during this entire course, we've discussed the basic concepts and used many examples of performing client side form validation. We had pettiness attributes. We put the required attribute on various form controls. On some of the numerical form controls we had the Min attributes, max attributes, et cetera, et cetera. We really have done plenty, plenty of examples in this course. Something you must remember though, as a client side, validation is only an initial check and it's an important feature for good user experience. Why? Well, think about it. If you can catch invalid data on the client side, then the user can fix it straight away. What I mean by this is if you don't have any client-side validation, what's going to happen? That's right. The daughter's going to get seemed to the server, then the server is going to perform its checks and it will only Dane get rejected, then it has to come all the way back through the wire to the client and only then can the client fix it. In other words, you would be causing unnecessary delay by having a round trip to the server and then back to the client side to tell the user to fix the daughter. So client-side validation is an initial check and it improves user experience that donkey too confident client-side validation should not be considered an exhaustive security measure. Your app should always perform security checks on any form, some metadata on the server side as well as the client side. Because the client side validation is too easy to turn off, too easy to bypass by hackers. Malicious users can still easily seen the bad data through to your server. You should always have client-side validation, but you can't exhaustively rely on it. Does it make sense? Okay. Okay. Well, the other thing I want to mention is we've got client-side validation, and they are two different types of client side validation. What are these different types? Well, we've got native validation, right? Also known as built-in form validation. And then we've also got that right, JavaScript validation. What are the differences later validation is provided by the browser, that's provided by the HTML specification. And native validation doesn't require much, if any, JavaScript, because you're not having to write custom JavaScript or custom code. Bolt in form validation usually has better performance than JavaScript. But of course, the downside is that it's not as customizable as JavaScript, which brings me onto JavaScript validation. What is that? That's just validation that you have to write in JavaScript. The main benefit is it is completely customizable, but of course you need to create it all. You need to know how to write JavaScript or you need to use a library. So there we go. There's just the high-level summary of form validation. And specifically looking at the two different types of client side validation. 3. Built in validation: Welcome back, Welcome back. I'm super, super excited, as you will recall in the previous lecture, we discussed that there are two types of client side validation. You remember what they were? The first was built-in form validation and the second type of JavaScript validation we are going to be looking at JavaScript shortly. But before we do, I just want to discuss bolt in form validation in a little bit more detail. So let's get into it. One of the most important or the most significant features of HTML5 Form Controls is the ability to validate, use a daughter without relying on JavaScript. And how is this done? Well, it's done by using validation attributes on various form elements. We've seen a lot of examples of this in the course. But to recap, some of the required attribute specifies with a full field needs to be filled in before the form can be submitted to the server. We've also got MAN link. And next thing, quite intuitively day specify the minimum and maximum length of textual data strings. We've got minimax. What's that about? Doing? Intuitively, it specifies the minimum and maximum values of numerical input types, like the type of number, for example. And then we've got this type attribute. This type attribute was amazing, wasn't it? Because that specifies whether the daughter needs to be a number, email address, or some other specific type. And we can get more complex with built-in client-side validation. We can use the patent attributes. You're going to see an example shortly, but this specifies a regular expression that defines a pattern. The inter daughter needs to follow. A nice only a few of them that we've looked at. We have looked at more of these attributes are important because if the daughter entered in a form field follows all of the rules specified by these attributes going to be considered valid and the browser will allow the user to submit the form to the server. It's making saints. So when an element is valid, the following things are going to happen. Firstly, the element is going to match the vetted CSAs pseudo-class, which lets you apply a specific style to valid elements. We've seen many examples of us using this in the course. And the second thing that's going to happen when an element is valid is that the browser will submit the form when the user tries to send the daughter. Of course, provided there's nothing stopping them from doing so. Like when you used, for example, when an element is valid. All Clyde, what happens when an element is invalid? And notice my side, obvious, but a lot to recap. It's going to solidify everything with learned. Similarly to the valid state, when an element is invalid, two things are going to happen. Firstly, the element is going to match the invalid CSS pseudo class. And sometimes it's going to match other UI pseudo-classes as well. For example, out of range. And this all depends on the type of IRA, the beauty of having this invalid pseudo-class, of course, is that you can apply specific style, two elements that are in the fed into. The second thing that's going to happen is that if the user tries to daughter, the browser is going to block the form from submitting and the browser will display a native error message. Very, very useful. Before I move on, I just want you to know that they are several eras that will prevent the form from being submitted. And we're going to be looking at some of these shorter, especially when we look at using JavaScript. But anyway, we put different types of ER is like a bad input to short type mismatch value, missing steep mismatch range, underflow, et cetera, et cetera. There are whole lot of different areas associated with different types of inputs. And when those errors occur, the browser will not submit the form or not. So that's what happens when an element matches the invalid state. But one of the most common. And we've seen this in the courses. What? That's right, It's the required attribute. And when we have this required attribute on the form element, it's going to match the required pseudo-class. What does this mean? Well, it means is that form control as a value that's empty and inner message is going to be displayed when the user tries to submit the form. And of course we know that the invalid pseudo-class is also going to match. That's enough speaking, I want to jump over to the text editor. Let's code at an input of tactics to its target. They required pseudo-class, the invalid and the valid pseudo-class. You'll see how easy it is. And we can continue on with this lecture. So let's quickly do that now. 4. Quick example - valid, invalid and required pseudo classes: As always, let's start with an empty file. We're going to have a head section in the style section. But for now, let's just pulled our form very quickly, right? So within the body, let's have a form. We don't need an action attribute. We're not worried about submitting it to a server just yet. Let's have a label attribute here. And just give it a full attribute value of choose. Would you prefer a banana or cheery time? No, I know it's random. I just want to give you an example. And then of course the to have an input with a type attribute is set to text. Got it. And then we can give it a name attribute of our alike. And I'm giving it a name attribute of our like, because if we don't, it won't be submitted to the server. Remember, in order for data to be submitted to the server, we need name value pairs. So the name we're giving the chairs are like, We know the id value has to match the four attributes value of choose. The last thing I wanna do is add a button of type submitted. We can just have it, save it, refresh the browser. And there we go. We've literally got our inputs. As I mentioned in the lecture, one of the most simplest HTML5 validation features is the required attributes. And to make an input mandatory, we just need to add this attribute to the element, right? Because right now the user can submit this form. I like gets appended to the URL, but there is no value. If we want to make it required, all we have to do is add the required attribute to this input element. It's a Boolean attributes. We don't have to assign it a value. It's either there or it's not. Now if the user tries to submit, the browser will prevent the user from doing so. And what's really cool is that when this attribute is set, the element is going to match the required UI pseudo-class and match this whether or not there is a value. And remember the form wine Submit, it's going to display an error message when the value is missing, when the value is empty, and while the values empty, the input is also going to be considered invalid, matching the invalid UI pseudo-class. So right now, when a user tries to submit, notice how the input box kids focus and we get this error message displayed to us by the browser. Let me prove that some of these pseudo classes are working. Firstly, what we can do is we can target the input element where it's state is invalid. And this should be very simple here, two pixels, solid red border, and this is the default starting point. The default when we've got a required attribute on an element is that it's going to match the invalid state because its value attribute is empty, right? But once the user starts typing, say they want a banana, it's not red anymore. Aka it's not invalid and the user cancels with the form. But of course, once it's submitted, it goes back to that invalid state. What are some other things I can show you? Well, why don't we target the input, right? We, its state is invalid. But remember, I said it's also going to match the required state. So how did we target this? And we can give this a cool background image styling. We can give it a linear gradient. Let's just say pink and light green. Save that. So there we go. We know now that it's matching the required state and its matching the invalid state at the same time. Can you see how the pink is flowing from top to bottom? If you don't want that, for example, with this linear gradient method, we can just say here to right. And of course it's going to go left to right. Now the pink started the lift gradient Julie turning into green from left to right. And it's just a bit of FYI. And then finally, we can also target the input, but this time when it's state is valid and list just give it a border of two pixels, solid green. All right, we save this when the user starts typing Banana. Can we see, or can you see that there is a green border? Of course, it's hard to see because we've also got an outline, that black outline. So why don't we remove the outline, set it to none. User starts typing banana, and there we go. We know now it is valid. You gotta, gotta be enjoying the stuff that is so interesting. And it's so fun once it clicks, like it's just becomes very intuitive, very easy to start styling your forms in a very, very fun way. Bird anyway, these are the simple built-in validation pseudo-classes, but they are more. And in particular this one I want to discuss with you now. So let's jump back to the lecture. 5. The pattern attribute: You go, I told you it wasn't that bad, was it? But now I want to get into a bit more complex built-in validation. I want to now look at the theta1 attributes. And this pattern attribute is another very useful validation feature. And what does it expect? That's right, it expects a regular expression as its value. What is a regular expression? Regular expressions or regex, is just a pattern that can be used to match a character combinations in text strings. What exactly is rigs? Well, it is a very complicated topic and it's beyond the scope of this course for me to get it. Just bear in mind that every browser vendor has their own regex engine, the wiggle expression piece of software that is able to process regular expressions. And all the regular expression is trying to do is it's trying to match a pattern to a given string. So Clyde, what is this regular expression engine pol? Well, it does depend on what browser you're using. So when we're looking at Chrome, Chrome uses the V8 engine when it executes JavaScript. And the developers put so much effort into that, they kind of ignored building their own custom code for regular expressions. Well, that was until a few years ago. So now Google Chrome uses the own regex engine called earrings. Another thing I want to mention to you is that not all input types with certain pattern need to have the patent attributes specified. For example, we've seen the input weights type is set to email. In that case, we don't have to write custom theta1 RegEx. We can if we want to, but we don't have to. Why don't we have to? Because the browser doesn't know Baja when we use input of type e-mail, browser already uses a well-formed e-mail theta1. So anyway, I just wanted to mention that before I move on, let's get back into it. As I mentioned, Rick x's are quite complex, so don't intend to teach them exhaustively in this course. But I just want to give you a few examples. Have a load to give you a basic idea of how they work. Okay, so what are some patterns we can specify? Well, yeah, I'll just three very simple examples. If we just have the character x, Let's go on to match one character. That is x must be not x, x, just x. If we specify pattern x, y, that's going to match x followed by Y. And then of course, regain their own syntax. We can use at line to specify all. So we can say x or y. And that's going to match one character, that is x or y. And they are many, many more possibilities and examples that are con covered yet, but the above are just a few simple examples to get you started. And while we are on this topic, why did we hop back to that example we did earlier? And why don't we put up own pet an attribute in there just to see how it works with our invalid and vetted pseudo-classes. Let's have a look now. We are back at our original example. And here we asking the user if they would prefer a banana or a cheery. So I don't want the user to be able to write nothing and submit that right now. They can submit that. So how can we do that? Well, as soon as you start thinking about a pattern, ding, ding, ding, we can think of regular expressions. So here we went to limit the user writing. Cherry. Orban honor, writers are the only things we want the user to be able to do. So why don't we do that? And let's get rid of the gradient. I just want to remove some noise. Let's just have the invalid and a valid pseudo-class here. How can we do it? Well, firstly, let me just make this a bit bigger. The first thing we can do, of course, is add this patent attributes to our input of type text. It's all a text and we know the value of this pattern attribute is a regular expression. So we could do this. We could say, well, the regular expression has to be banana, cherry. We could do this savored, got our browser. We can type here nothing. And we can see that it's still got the invalid styling applied to it, right? It's removed, the outline. Save it, start typing grass. We've still got the invalid class. Yeah, it's top cheery. We've still got the invalid loss. Why is that? Oh, it's because sorry. I put a space yet. Let's just remove the space. We don't want a space. Save it. If we type cherry, there we go. It's green. If the user types banana, it's green and allowed to submit. But there's a problem with this in the sense that the user could do a capital B, but not in it's not going to work. So what rigs, you've got to be very explicit. And what we could define here at the beginning before just defining a small b is a character set and a character state is just defined in RegEx with the square brackets. It's basically an alternative, that straight line, all right, so we could say, well what characters are allowed, either a small b or a big B. And then of course we don't want another B. And then we can do the same with the C. So we define a character. The user can type either a small c for big C. Now if we save this and the user types cherry with a capital C, it is going to be valid. How awesome is this? It's easy, right? This is not difficult code at all. We've just included the patent attribute. We've now implemented our own client-side built-in validation. Who the stuff is fun, isn't it? So well done? I've had a lot of, lot of fun in this lecture looking at Bolt in validation. Remember the two types of validation in bolt and JavaScript? We've looked at the most common in both annotation types in this lecture. But now, what did we start jumping into a bit of JavaScript one, off-script validation works. See you in the next lecture. 6. JavaScript validation: I'm excited about this lecture because in this lecture we're going to be moving away from HTML5 built-in validation to JavaScript validation. And by JavaScript validation, I just mean using javascript to validate your form. And let me be clear, you must use JavaScript if you want to take control over the look and feel of native error messages or to deal with legacy browsers that do not support HTML's built-in form validation. And if you don't know what JavaScript is or how it works, where it comes from. Then please check out my JavaScript complete grandma circles. But don't worry, it is going to be quite simple in this lecture. So even if you don't know how JavaScript works, you should be able to follow along, okay? Okay, so how does this work? Well with forms, it's common to use JavaScript with the constraint validation API. But don't worry, this is provided to bother browser. Most browsers today support the constraint validation API. You can view it as a seat of methods and properties that are given to us automatically by the browser. And there are many different web APIs available to us by the browser, like the Fetch API when we're dealing with age. What about WebSockets API? What about the DOM? So this constraint validation API is just one of many, or IPO. How can we use this constraint validation API? Will we limited in its use on a form element Dom interfaces. So what I mean by this is that we can only use the constraint API on the following interfaces. And each interface represents a different element. For example, the HTML button element interface, of course represents the patent element and so on and so forth. It's pretty intuitive. So what's really cool, my dear students is that when we're dealing with these elements, with the input element, for example, we have access to the constraint validation API automatically. We don't have to do anything too. Okay, glider case, so we've got access to the constraint validation API. But what does it mean in a practical sense? What does it give us? Well, it gives us certain properties and methods automatically. For example, we can access the validation message property. What does that? Well, it's a read-only property that returns a validity. In other words, it's going to return the error message describing the validation constraints that the control doesn't satisfy. If the element's value does satisfy all of its constraints, okay, it's valid, then this is just going to return an empty string. We've also got this validity object. This is a really useful one. And this returns a validity state object that contains several properties describing the validity state of the actual element. What kind of properties can we access, where we can access the pattern mismatch property that returns true if the value does not match the specified pattern attribute and it's going to match false if it does match. And remember rights as the value doesn't match the pattern attribute, we also going to match the invalid CSS pseudo-class. So a lot of these are going to be working in tandem. So let me say that again, this pattern mismatch will return true if the value does not match the specified pattern attribute, we're gonna get this pattern mismatch era and the form will be prevented from being submitted to the server. But at the same time because the patterns not being matched, we know that the invalid CSS pseudo class is also at play. It's quite interesting. And other property of this validity object is too long. Property that returns true if the value is longer than the maximum length specified by the max length attribute. Again, if it's true, the elements also going to match the invalid CSS pseudo class. Very similarly to too short. That's going to return true if the value is shorter than the minimum length specified by the men length attribute and range overflow, range underflow day. Very similar. They going to return true if the value is greater than the maximum value specified by the max attribute. Or of course, if we're dealing with range and the fluid's going to return true if the value is less than the minimum specified by the men attribute. But what's interesting and how that range overflow and range underflow error messages is that we're going to have a few pseudo-classes that are matched in you guess which ones will use the invalid pseudo-classes going to apply. But now we've also got the out of range pseudo-class that are going to apply. Quite interesting, right? Another property on this validity object is this type mismatch property or error message. This is going to return true if the value is not in the required syntax. For example, if we have an input with a type attribute to sit, to e-mail or URL, and the user doesn't type in the correct format if this is valid, if it returns true, we know that the invalid CSS pseudo class is also going to apply. And then we've got this valid property that returns true if the element meets all of its validation constraints and is therefore considered to be valid. So when those valid is true, we know that the valid CSS pseudo classes. We're going to apply. And last but not least, what happens when we have this required attribute on an element will in that case, we've got this value missing property, and neck is going to return true if the element has a required attribute that no value has been specified. Crew, I know her, I know this is a ton, right? It's very, very useful. But you know me, Actions speak louder than words. So why don't I quickly go to the console. Let's look at a quick example. Let me access this validity state object and show you its properties. Hopefully then it will become more intuitive to you. Let's have a look. So here we are a very, very simple example. I've just wrapped and input weights, type of city takes in a form. And of course we've got a pattern of types of MET, which is the default by the way. So we don't even need that. And of course right now the user can type anything and submit anything. There's no validation constraints. But I want to show you how this constraint validation API works. Remember that it only applies to certain interfaces. And one of those interfaces and applies to was the HTML input element interface, which gives us access to this API on the input element directly. So how does it work? Well, remember the two types of client-side validation. We had the built-in validation, which is just HTML5. But we've also got the second type and that is using JavaScript. And in order to use JavaScript, we need to write everything that script tags. From here. What do we do? Well, we need to grab that input element. Don't want in order to access the constraint validation API. So how do we grab that input? We'll just define it in a variable, all texts. And let's start by accessing our document object. On here, we can get elements by tag name. The tag name we want to get is important, right? And this returns a collection if you've done my DOM core. So we access the first item in the collection, which is that input element itself. And what's really cool. What's really cool is we've pretty much done it. You know what, instead of calling a text, let me call it text input because that's what it is. And what we can do now is we can access this constraint validation API directly. We don't have to do anything else. That's really, really cool. So we can grab our text input. And what are some of the properties I spoke about? Well, the one that is very important to us is the validity objects are important to us. And in order to see it, why don't we just console log the screen. That's all we have to do. Go to the browser spec, this document. Let's go to the console. And here is this validity state objects. How awesome is this Medea students? Yeah, Very, very cool rights. And these are some of the inner messages properties that are shown within this ability state object, right? I spoke about some of these too long, too short type mismatch. It's valid property is set to true now because it doesn't have the required attributes on it. Why did we put the required attribute on it? Let's get into our inputs hosted required attribute on here. Now we've got this multi-state object again, but now it's valid. Property is set to false. It's not true anymore. And of course we've also got this value missing property. And remember that returns true if the element has a required attribute that no value. So much fun, isn't it? And this is all I want to show you for now. I just wanted to show you how to actually physically see this validities. Objects, draw it. Now we still been discussing only the properties of the constraints. In addition, API is just another one I want to mention to you and Lina want to move on to some important make it. So this jump back into the region. 7. JavaScript validation - objects: Okay. I told you it's not that difficult, right? And hope it's becoming more intuitive. Let's move on. Because these aren't the only properties available to us by the constraint validation API. We have others. For example, we've also got this, we'll validate properly. And this will validate property is basically just telling us if the element concerned, if the form control concerned will be validated when the form is submitted. In other words, it's just a property that's telling us whether or not an input can be validated. It's true if it can be validated and false if it's not, When would the supply will one time that the wool validators going to be false as if the input element is disabled. Remember we looked at these before. When it's disabled, it's not going to be validated wind submitted to the server, does it make sense? So we've really largely looked at certain properties on the constraint validation API. And I want to move on now. I want to look at not properties, but I want to look at some methods available to us. Methods, by the way, are like a function. It's something that is done. It's a doing word. It's like a verb, whereas properties are more like an arm. First method I want to discuss is this chicken validity method returns true if the element's value has no validity problems. And of course it's going to return false. Otherwise, if the element is invalid, this method is also going to fire an invalid event on the element itself. We've also got other methods. We've also got this sit custom validity method. And the argument it takes is just the message. It allows you to specify a custom error message to the element. How awesome is this? And because it's so awesome, I want to discuss it just a little bit more on why did discuss it more? Because using this method, the Sixth custom validity method is one of the most common use cases of the constraint validation API. Like I mentioned, it just lets you use JavaScript to define a validation failure and a custom error message. Because let's face it, automated browser error messages have their drawbacks. They're not very easy to understand. Sometimes they don't tell you enough information. It's much nicer to sit our own. And yes, you guessed it. Lets hop over into the text editor and let's look at an example of using the SETT custom validity method. I can't wait to see now. 8. setCustomValidity method - example: All right. All right. All right. Now I want to talk about this sit custom validity method. It is such an important method. Then I want to look at a few examples. And this was the example we looked at previously. We just had a text type of input. It's all we had. And what did we just see how this sit custom validity works on this. So right now let's remove required. So there's no constraint or built-in validation. And now what I wanna do is I want to access this method. So we access our text input on here. We can exit the constraint validation API directly. We don't have to do anything special. But this time I want to access admitted. The method is called sit custom validity. And I want you to notice something when I start doing this, right, I'm going to type our error saying that this is an era that never stops. And if we save this and we got our form, if now the user tries to submit, we are going to get an error. Because this is basically telling the browser that this takes input field is now in error state and net. We want to show an error message and of course it never stops, right? The user is not able to ever submit this form. So this is an important aspect of using this method. When you use it, it's going to make this input or whatever element you're using or putting it on, it's going to make it invalid. And I can prove it to you within here. Why don't we style up the invalid pseudo-class. Let's grab our input. Style up the invalid state and we can just give it a red border, border, one pixel, solid red. And now you can see that the default state is invalid because we've set this custom validity error message, we basically telling the browser this is now invalid. So the client, how do we make it not invalid? Will, if you sit the value to end empty string, it's valid again. So if now we access our text input variable again, which is that input element itself, we can access the city custom validity method again, but this time just set it to an empty string. If we do this, save, it is now valid. We don't have that error anymore. The user cannot type and submit. Okay, Clyde, I get it, I get it. But how do we actually use this in a practical sense? Well, why did we look at an example right now, we'll change this input of type, takes an input of type e-mail. And if there is an era in the format of that email, why don't we display our own custom error message? How awesome this is going to be so much fun. Cp can give it a go. So pause the video, see if you can give it a go, and then let's cut it up together. Did you give it a go? I hope so. But if not, don't worry, let's do it now together. The first thing I wanna do is I want to remove this input of type text, okay? And we want to replace this inputs with input of type e-mail. That's what we wanna do. We can give it a name of male. We can give it an ID of male. And because we're giving it an ID of male while and we specify label here of male. And we can say, please give me a valid email address, right? Very, very simple. So now we've got an e-mail, but if the user tries to submit just random text, we get this error message by the browser, but maybe we want our own custom error message. We don't like the browser's one. How do we do it? Well, let us now code up some JavaScript. It's not a text input anymore is it is just the final variable as an email input. Let's just delete everything else, removal of noise. So here we are. We've got our email input element. What we can do now is we can add an event listener. We can grab our email input. Exist the add event listener method. The event we want to listen for is an input event. So every time the user types of character, when that happens, what do we want to do? Well, we want to execute a callback function. Sorry, I've got one too many brackets. They need a bracket outside here. There we go. And what do we want to happen in our callback function? Well, we want to say if right, on this email input, the type mismatch is set to true, then we know that there's a problem, right? Because in the background when we specify the type of email, we know that there is a regular expression built by the browser in this case. And we know in net not meet that the type mismatch property. And remember with their properties located, That's right. It's located on the validity state object. We never say to true. We know there's an error. And therefore we want to display our own custom error message. If it's false, we can just sit that custom validity method to an empty string and therefore the browser will let it submitted to the server. So if on this email input, we access its validity state object on there. Remember there was a type mismatch property. If debt is set to true, then we want what they track, we want to access that sit custom validity method. Don't worry. Let's exit. We access our email input. And on here we've got the CID Customer validity. And we can just say, I am expecting a real e-mail address, please. Okay, so there we go. We've literally done it. And if you know JavaScript, once that if MIT, we've also got an else statement, right, because if the e-mail validity type mismatch is set to false, then we want this else to be executed. And what do we want to happen here? Will of course, we want to set this set custom validity message to an industry. And that's why I showed you the previous example, right? Where we had to silicon into string for it to be valid. So now if the user types random text, we click Submit, there is our own custom error message. How awesome. But of course, if the user types of valid email address and I'll click Submit, we are all good to go. Does that make sense? I don't want you to get lost in all the detail. All we did was we added our own event listener on that email input. The event we listening for is an input event every time that fires, we execute this if else statement, I can actually prove to you what's happening. Maybe this will help if you put unclear. But what we can do is every time that input event is fired, what did we console log to the console? This email input validity, state object. All right, let's console log that out. Let's go to the browser. Open the console. Right, Let's just type the letter a. Here. We've got the validity state. If we open that up, we've got this type mismatch property. And a type mismatch is currently set to true. And it's set to true because we've given this input type of email and because it's a type of e-mail, there is a regex it has to be in proper format. Once it isn't proper format a at a. If we open this up now, that type mismatch is set to false and because it's it to false, we do want the user to be able to submit the form. There we go. The user can do, sir, How awesome. I hope it's making sense. I hope you've paid attention because in the next lecture, I want to give you a challenge and I want to see if you can figure out how to do it. Super-excited and I'll see you in the next lecture. 9. Challenge intro - setCustomValidity: Welcome to this very cool challenge, where I want you to try and use this constraint validation API or by ISAF. And I'll be honest with you, I don't expect you to get this correct, but just give it a go, try and get as far as you can go. What do I want you to do? What is the challenge? Well, let me just zoom in lightly. I just want to create a text input field with a user has to enter the username, but the username has to have at least one lowercase and uppercase letter. If the user just tries to submit it as is without typing anything, I want a custom error message, silly, believe not tied to anything. If the user starts typing just lowercase letters and tries to submit, we get another custom error message are awesome. But of course, when the user now has a capital letter in there and click Submit, the browser allows us to go through a very simple example. You know what? Let me just give you one hint. And then one hint is going to be the regular expression that are used, aka the value of the patent attribute. Let me show you what it looks like. So there you go. I want you to use that value in the pattern attributes. Let me just quickly explain it to you. Firstly, we've got the brackets, the two brackets, which are two sets of groups. Okay, We start off each group with a question mark, equal sign. This is just known and RegEx as a positive lookahead. All I'm trying to achieve here, as I'm trying to say, we can either type lowercase and uppercase or we can type uppercase and the lowercase, the order doesn't necessarily matter. The next thing you'll notice is we've got this full stop. Full stop matches any single character. Then you put an asterix. The asterisks matches the preceding character 0 or more times. And then we've got the square brackets, which we've already seen in this course many times, with the characters a2. Basically, it's just allowing a range of lowercase characters between a. And said. I'm trying to say in that first group is that the user can type as many characters as they went between a and z and now finish off this entire pattern. By a quantifier. I have those curly braces, which is basically telling the RegEx to match the preceding groups at least one times and at most 50 times. That's all that that means. So that is my RegEx that's apparent. I used feel free to just copy that, paste it, and then try and figure out how I did this solution. I'll give you a hint on that input type. I'm going to be listening for the invalid event. Remember I mentioned that that type of mismatch property will fire an invalid event when whatever is inter does not match the pattern field. So that's why I'm listening for an invalid event. When that a valid event fires, of course, I want to check whether the value is nothing. Because when it's nothing, I just want that error message silly, but you have not typed anything. Marimba, try and submit now, I want that error message. So we've got to check whether the actual value is an empty string. If it isn't an empty string, but we're still getting there then valid era. We know then that there haven't provided at least one uppercase and one lowercase letter. For example, we know that this is going to happen and we need to tell them that they need one uppercase and one who on a lot to take in, give it a go, see how far you can go, and I'll see you in the solution video. 10. Challenge solution - setCustomValidity: Did you give it a go? I hope so. I hope so, but don't worry, he couldn't quite figure it out. It is a bit tricky and there is a very tricky nuance when working with the constraint validation API. So I'm going to show you how we resolve it. Before we do, he has our HTML. We've got a label, which is just asking for the username. And of course we've got our input type of text. We've got our acquired attribute on day. And they is the pattern, the regex that we spoke about in the introduction video. Very, very simple. And if we go to the browser, this is what it looks like. But right now the user can, obviously the US will be prevented from submitting the form. We've got a default error message which we want to change and the using and just type anything. Oh, of course it estimates the rigging. Smaller case, uppercase, then the user can submit. But we want our own custom error messages. How does it work? Well, as you know, we have to wrap everything in script tags. The first thing we wanna do is we want to access this constraint validation API. In order to that we have to work with some interface. The one we're going to work with here is this input element. So let's grab it. Let's define a variable called name inputs. And we can access our documents query selector, and we want to query select our input elements. That really, really is that simple. That's the first step completed. Now, what I wanna do is I want to access this variable, aka the element of input. And we want to add our own event listener. And I gave you a clue to nine. I want to listen for the invalid. And the invalid event is going to be fired every time the value of the input does not meet that patent rights. Also, we're going to get this invalid event when they're required value specified. But of course there is no value associated with that input. So when this event is fired, what do we want to happen? Well, we want to execute, I'll callback function. Let's tackle the first issue. And the first issue is if nothing is entered into the input box, well, in that case, we know that I'll name input is going to have a value. And that value is going to be an empty string, right? Is going to be nothing. And if that occurs, if this is true, then we want to define our own custom error message. We already know how to do this. We can access all elements. And now we using the constraint validation API, because we can access the seat custom validity message directly. We can just say silly Bali. You have not taught anything. Rats and we can save this. Let's go to the browser and tasted the browser transmit. And there we go, we've got our own custom error message. But you'll notice if now the user types characters and tries to submit, we keep getting this error message. Because remember I said once we use the sig custom validity method, we telling the browser that that element is invalid regardless of whether it's actually not invalid anymore. And that's the slight nuance that I was telling you about earlier. But anyway, we're going to solve that shortly. We've dealt with the first issue. We, we get an invalid event and the name input does not have a value. So we've dealt with that scenario. Now we're going to deal with the Knicks scenario. So when we reach this else block, we know that a, we've got an invalid event, and B, we know the user has typed some characters. So again, let's set our own custom error message seat customer validity method. And here we can say usernames need to contain at least one uppercase and one lowercase letter. Try again. So let's save this. Let's go to the browser and test this rotted. The user starts typing clicks, submit, we get our own custom intermediate. Very, very cool. But you'll notice now we have a problem because if the user types a capital letter, so we've got one uppercase and lowercase. If the user submits, we're going to be in this perpetual state way. We are always having an era. Remember, it's because we've used the SEC custom validity method, which tells the browser that this input box is always going to be invalid. How do we stop it? We remember we have to set the custom validity miss. A message to an empty string, and when it's an empty string, it will be valid. Remember that? But we can't see it. You know, if we look at our code, we can't set the set custom validity message to an empty string here because this is when we're dealing with an inner valid era. So what we have to actually do, and this is the slight nuance or stilling about, right? We have to access our name input, add another event listener. And this event listeners just going to be listening for the input, right? Every time a character is typed, I want to listen to the CV and we want to access our name input. And this time I want to sit at the custom validity to an empty string. All I want to do and to prove that this works, let's go to the browser. The user types nothing. It's an error message, starts typing. Let's do a capital D Trustee Summit. We are allowed to do so if the user just types lowercase and click Submit, we get a custom error message. But did you notice there's a problem idea, students? Did you notice it? It was very, very slight, but you may have picked it up and we know the first step works. So Lee believed not typed anything, but if now the user types of character, a look at that we're getting the error message displayed by the browser. We not getting our custom error message. In fact, we only going to get our customer message when the user hits Submit. Because only when submitters issued is this invalid error message emitted and only then does our custom error messages apply. We don't want that to happen. So every time a character is pressed, right? In other words, every time an input event is fired, we want to fire off another method, our constraint validation API, where you want to execute the chick validity minute, because if that is false, the invalid event is going to be fired and our code will execute. So if we do that on every single iteration, that should solve our problem. Let's refresh the browser. Okay, We can submit silly believe not tied to anything, but if now the user types of character, a book, how awesome is that we get our own custom error message. And of course, that's going to happen until we can hit Submit again. It's going to happen until we have a capital. There we go. And if we now submit, we allowed to do so. The user can just do a capital D. Let's just do capitals. It's not working, it's not working. But as soon as the user then goes to lowercase, we can now submit. I know, I know this can be quite confusing, but let's just jump to the code really is quite intuitive once you understand what's going on. If we use the SETT custom validity method and we write our own custom message, we basically in a perpetual state of an era, we're telling the browser that input is invalid state and our custom error message should be shown. That's why we couldn't just rely on our one block of code here by listening for the invalid event, we had to create another type of event we listen for net is every time the user types of character. Let's start there. We know that we do two things when that input event is fired. Let me say it another way. Every time the user types of character, we do two things. One, we start off by saying, Hey, let's seek the custom validity methods value to an empty string. In other words, let's start off by saying that we are in a valid state. I know it sounds strange, but hear me out. The next thing we do is we fire off this chick validity method. And remember in the lecture we discuss this. If everything is fine on that input, true gets returned and nothing else happens. So therefore, the browser will submit the form. But if there's an error, then we know that this check validity method is going to fire an in valid event. And in that case, our next block of entire code will capture the entire process. And that's why it either shows the error message to the user silly, believe not typed anything when it's an empty string. Alternatively, in the else statement, if the user has typed characters, but we're still getting this invalid era. We've got another message. Usernames need to contain at least one uppercase and one lowercase letter. Try again, and then we start again. So say the user types a lowercase and uppercase. In that case, we net user types that uppercase, this first block of code is going to apply because it's an input event, you're going to set it to valid. And then the check validity method is going to return true. And that's why we are allowed to submit the form. I know it can be quite complex, but really go through it again, go through this lecture a few times, make sure you understand that it really will help you down the track. And once you get it at really, really isn't true. So anyway, I hope you had a lot of fun in this lecture. I know I did, but let's continue. See you in the next lecture. 11. Class Outro: This was a fun class, wasn't. We just learned about client-side validation. The two types are built-in validation and JavaScript validation. We used a sit custom validity method in order to write our own error messages. How fun. And you can begin to see how important validation is, right? And it's not that difficult to implement. We just have to give it some thought and you just have to know a bit of HTML and JavaScript and maybe a bit of RIG aches if you want to get a bit more cook together. But anyway, we've come a long way. And remember, I keep saying that client-side validations only one piece to the puzzle. You also have to perform server-side validation. And that brings me onto another whole topic. And that is how do you set up a server? Perseus form daughter. So in the very next class, I want to start talking about service, a call. Wait, and I hope to see you soon. Adios.