chore(curriculum): rm vids from JS form validation lectures (#61620)

This commit is contained in:
hbar1st
2025-07-30 20:38:27 -04:00
committed by GitHub
parent 97f2788dad
commit f29ba10dc6
3 changed files with 7 additions and 28 deletions
@@ -1,19 +1,12 @@
---
id: 6733aae9d25004f60d1e86f2
title: What Are Some Ways to Validate Forms Using JavaScript?
challengeType: 11
videoId: azh-Mh6dxyo
challengeType: 19
dashedName: what-are-some-ways-to-validate-forms-using-javascript
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What are some ways to validate forms using JavaScript?
Let's learn about how to use JavaScript to validate your forms.
In a previous lecture, you've learned how to use HTML to restrict the values your users can submit in your form. But sometimes that's not enough. If you want to get more complex, such as displaying your own error messages to the user, you will need to use JavaScript.
@@ -134,7 +127,7 @@ There are several helpful properties which all hold the value of a boolean of `t
Some of these helpful properties that you can explore more on your own would be the `valueMissing` property which is `true` when a required input field is left empty. Or the `patternMismatch` which is `true` if the value doesn't match the specified regular expression pattern.
After this lecture video, I encourage you to play around with the examples shown in this video and explore more about the different validity properties.
After this lecture, I encourage you to play around with the examples given in this lecture and explore more about the different validity properties.
# --questions--
@@ -1,19 +1,12 @@
---
id: 6733d3a33abdd27cd562bdf2
title: What Is the Purpose of e.preventDefault?
challengeType: 11
videoId: gBUdCKcBJSg
challengeType: 19
dashedName: what-is-the-purpose-of-e-preventdefault
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
What is the purpose of the `preventDefault()` method?
Let's learn about the purpose of the `preventDefault()` method on events.
Every event that triggers in the DOM has some sort of default behavior. The `click` event on a checkbox toggles the state of that checkbox, by default. Pressing the space bar on a focused button activates the button. The `preventDefault()` method on these event objects stops that behavior from happening.
@@ -1,19 +1,12 @@
---
id: 6733d3ab69e94b7df7ee91b0
title: How Does the Submit Event Work with Forms?
challengeType: 11
videoId: ht7Eg6GX6tE
challengeType: 19
dashedName: how-does-the-submit-event-work-with-forms
---
# --description--
Watch the video or read the transcript and answer the questions below.
# --transcript--
How does the `submit` event work with forms?
Let's learn about how the `submit` event works with HTML forms. First, we need to understand how to submit a form. There are three ways a form can be submitted.
The first is when the user clicks a button in the form which has the `type` attribute set to `submit`.
@@ -50,7 +43,7 @@ The second attribute to control how a submission behaves is the `method` attribu
HTTP stands for Hypertext Transfer Protocol and it is used to transfer data over the web.
HTTP methods are used to define the actions that can be performed on resources, such as `GET`, `POST`, `PUT`, `DELETE`, and so on. You will more about these methods in future lecture videos.
HTTP methods are used to define the actions that can be performed on resources, such as `GET`, `POST`, `PUT`, `DELETE`, and so on. You will more about these methods in future lectures.
When a method is not set, the form will default to a `GET` request. A `GET` request is used to retrieve data from a specified resource without making any changes to it, and the parameters are typically appended to the URL in the form of a query string.
@@ -69,7 +62,7 @@ Let's set the `method` attribute to the value of `POST`:
When you send a `POST` request, a body can be included which contains the data for your request. So unlike a `GET`, the data are not appended to the URL, and our form sends the `POST` request to `http://127.0.0.1:5500/data`. The data, instead, can be found in the body of the request, still as URL-encoded form data.
URL-encoded form data is when form data is converted into a string of key-value pairs, like `name=John+Doe&email=john%40example.com`, where special characters are replaced with encoded versions to safely send the data over the web. You will learn more about this in future lecture videos.
URL-encoded form data is when form data is converted into a string of key-value pairs, like `name=John+Doe&email=john%40example.com`, where special characters are replaced with encoded versions to safely send the data over the web. You will learn more about this in future lectures.
But maybe you don't want to send the data as a URL-encoded form payload?
@@ -77,7 +70,7 @@ The `form` element accepts an `enctype` attribute, which represents the encoding
This attribute only accepts three values: `application/x-www-form-urlencoded` (which is the default, sending the data as a URL-encoded form body), `text/plain` (which sends the data in plaintext form, in `name=value` pairs separated by new lines), or `multipart/form-data`, which is specifically for handling forms with a file upload.
In this video, you've learned the basics of form submissions. In future videos, we'll dive deeper into working with forms and how they interact with the server.
In this lecture, you've learned the basics of form submissions. In future lectures, we'll dive deeper into working with forms and how they interact with the server.
# --questions--