feat(curriculum): Add interactive examples to form validation lesson (#62711)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

curriculum/challenges/english/blocks/lecture-working-with-forms/672a4ce6dab9eb735828b48b.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-is-client-side-form-validation-in-html-forms
 ---
 
-# --description--
+# --interactive--
 
 When a user fills out a form on your website, it is important that they fill out all of the necessary information in the correct format. HTML form controls, like inputs, have a lot of built-in validation that you can use to check for invalid data. This will help ensure that the user fixes these mistakes before the information is submitted and processed by the server.
 
@@ -15,7 +15,11 @@ The term "server-side" refers to everything that happens on the server, the comp
 
 While client-side validation is important, you also need server-side validation for added security. Malicious users can bypass client-side checks, so robust server-side measures are essential. You'll learn more about this in a later module. For now, let's take a look at some examples of client-side form validation.
 
-One common example of built-in form validation is to use the `required` attribute in inputs. The `required` attribute specifies that the user needs to fill out that portion of the form before it gets submitted. Here is an example of using the `required` attribute in an email input:
+One common example of built-in form validation is to use the `required` attribute in inputs. The `required` attribute specifies that the user needs to fill out that portion of the form before it gets submitted. Here is an example of using the `required` attribute in an email input.
+
+Click on the `Submit Form` button without providing an email address and you will see a message pop up telling you to fill out the field.
+
+:::interactive_editor
 
 ```html
 <form action="">
@@ -25,11 +29,33 @@ One common example of built-in form validation is to use the `required` attribut
 </form>
 ```
 
-When the user clicks on the `Submit Form` button without supplying an email address, they will be alerted that the field is required and the form will not be submitted. Each browser will have its own set of styles for showing this alert message.
+:::
 
-Another advantage of using the email input, is that email inputs have some basic validation to ensure correctly formatted email addresses. For example, if you type in random words and click submit, then the browser will show an alert that an `@` sign is missing. It is important to note that browsers only check for basic validation for standard email addresses. It is up to you to add additional layers of validation, which you will learn about in later modules.
+Each browser will have its own set of styles for showing this alert message.
 
-Other forms of validation for email inputs are to use the `minlength` and `maxlength` attributes. Here is an example using the extra validation:
+Another advantage of using the email input is that email inputs have some basic validation to ensure correctly formatted email addresses. For example, if you type in random words and click submit, then the browser will show an alert that an `@` sign is missing. 
+
+Type `abc` into the email field and click on the submit button. You should see a message pop up because it is not a valid email address.
+
+:::interactive_editor
+
+```html
+<form action="">
+  <label for="email">Email Address (Required field):</label>
+  <input required type="email" name="email" id="email" />
+  <button type="submit">Submit Form</button>
+</form>
+```
+
+:::
+
+It is important to note that browsers only check for basic validation for standard email addresses. It is up to you to add additional layers of validation, which you will learn about in later modules.
+
+Other forms of validation for email inputs are to use the `minlength` and `maxlength` attributes. Here is an example using the extra validation.
+
+Type `b@m` in the field and click on the submit button. You will see a message pop up because it doesn't meet the minimum required length.
+
+:::interactive_editor
 
 ```html
 <form action="">
@@ -46,6 +72,8 @@ Other forms of validation for email inputs are to use the `minlength` and `maxle
 </form>
 ```
 
+:::
+
 The `minlength` and `maxlength` attributes are used to set the minimum and maximum length in characters for the email input. If you don't include the minimum length or exceed the max length of characters, the browser will show an alert message.
 
 # --questions--