feat(curriculum): add interactive examples to javascript forms validation (#65369)

Co-authored-by: Jeevankumar-S <jeevenkumar2003@email.com>
Co-authored-by: zaira <zairahira@gmail.com>

curriculum/challenges/english/blocks/review-form-validation-with-javascript/6723ce555ff2dfc0cc04b69a.md

@@ -5,71 +5,138 @@ challengeType: 31
 dashedName: review-form-validation-with-javascript
 ---
 
-# --description--
+# --interactive--
 
 ## Validating Forms with JavaScript
 
 - **Constraint Validation API**: Certain HTML elements, such as the `textarea` and `input` elements, expose a constraint validation API. This API allows you to assert that the user's provided value for that element passes any HTML-level validation you have written, such as minimum length or pattern matching.
 - **`checkValidity()` method**: This method returns `true` if the element matches all HTML validation (based on its attributes), and `false` if it fails.
 
-```js
-const input = document.querySelector("input");
+:::interactive_editor
 
-input.addEventListener("input", (e) => {
-  if (!e.target.checkValidity()) {
-    e.target.setCustomValidity("You must use a .com email.")
-  }
-})
+```html
+<form>
+  <label>
+    Email:
+    <input
+      id="email"
+      type="email"
+      required
+      pattern=".+\.com$"
+      placeholder="example@site.com"
+    />
+  </label>
+</form>
+
+<script>
+  const input = document.getElementById("email");
+
+  input.addEventListener("input", (e) => {
+    if (!e.target.checkValidity()) {
+      e.target.setCustomValidity("You must use a .com email.");
+    } else {
+      e.target.setCustomValidity("");
+    }
+  });
+</script>
 ```
 
+:::
+
 - **`reportValidity()` Method**: This method tells the browser that the `input` is invalid.
 
-```js
-const input = document.querySelector("input");
+:::interactive_editor
 
-input.addEventListener("input", (e) => {
-  if (!e.target.checkValidity()) {
-    e.target.reportValidity();
-  }
-})
+```html
+<form>
+  <label>
+    Email:
+    <input
+      id="email2"
+      type="email"
+      required
+      pattern=".+\.com$"
+      placeholder="example@site.com"
+    />
+  </label>
+</form>
+
+<script>
+  const input = document.getElementById("email2");
+
+  input.addEventListener("input", (e) => {
+    if (!e.target.checkValidity()) {
+      e.target.reportValidity();
+    }
+  });
+</script>
 ```
 
+:::
+
 - **`validity` Property**: This property is used to get or set the validity state of form controls (like `<input>`, `<select>`, etc.) and provides information about whether the user input meets the constraints defined for that element (e.g., `required` fields, pattern constraints, maximum length, etc.).
 
-```js
-const input = document.querySelector("input");
+:::interactive_editor
 
-input.addEventListener("input", (e) => {
-  console.log(e.target.validity);
-})
+```html
+<input
+  id="age"
+  type="number"
+  min="18"
+  placeholder="Enter age (18+)"
+/>
+
+<script>
+  const input = document.getElementById("age");
+
+  input.addEventListener("input", (e) => {
+    console.log(e.target.validity);
+  });
+</script>
 ```
 
+:::
+
 - **`patternMismatch` Property**: This will be `true` if the value doesn't match the specified regular expression pattern.
 
 ## `preventDefault()` Method
 
 - **Definition**: 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.
 
-```js
-button.addEventListener('click', (event) => {
-  // Prevent the default button click behavior  
-  event.preventDefault(); 
-  alert('Button click prevented!');
-});
+:::interactive_editor
+
+```html
+<form id="form">
+  <input type="text" placeholder="Try to submit" />
+  <button type="submit">Submit</button>
+</form>
+
+<p id="status"></p>
+
+<script>
+  const form = document.getElementById("form");
+  const status = document.getElementById("status");
+
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    status.textContent = "Form submission prevented.";
+  });
+</script>
 ```
 
+:::
+
 ## Submitting Forms
 
 - **Definition**: 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`. The second is when the user presses the `Enter` key on any editable `input` field in the form. The third is through a JavaScript call to the `requestSubmit()` or `submit()` methods of the `form` element.
 - **`action` Attribute**: The `action` attribute should contain either a URL or a relative path for the current domain. This value determines where the form attempts to send data - if you do not set an `action` attribute, the form will send data to the current page's URL. 
 
 ```html
-<form action="https://freecodecamp.org">
+<form action="https://freecodecamp.org" method="GET">
   <input
     type="number"
-    id="input"
-    placeholder="Enter a number"
     name="number"
+    placeholder="Enter a number"
   />
   <button type="submit">Submit</button>
 </form>