Checks

• This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• I have thoroughly read and understand The Odin Project Contributing Guide
• Would you like to work on this issue?

Describe your suggestion

The JS form validation lesson teaches the constraint validation API.
The assignment in the practice section of that lesson indicates

The form doesn’t need to actually submit, but you should give an error message if the button is pushed with any active errors or unfilled required fields. For the sake of this lesson, make sure all of the validation occurs in the JavaScript file. If all is well and the form is “submitted”, give the user a high five.

I have seen some confusion over exactly what this expects of the learner, with the following two interpretations being the most common:

1. Set novalidate on the <form> element, then use the appropriate form inputs in the HTML. Validate via the constraint validation API in the JS file.
2. Use only <input type="text"> i.e. cannot use even stuff like type="number"/type="email" and all validation must be 100% custom in JS. This would mean for something like an email input, instead of using an email input and utilising reportValidity and other features of the constraint validation API, you use a text input and manually parse the input string for whether it conforms to an email pattern, then report the validity on that.

I think the current lesson wording is unclear as to which it expects the learner to do. Personally, I'm inclined to believe it intends the former, where it is fine to use different input types, just novalidate the <form> and use the constraint validation API as taught (so you won't have to manually parse a string to conform to a specific pattern for basic things like number input/email input etc.).

Can this be clarified and whether it is agreed the current wording can be improved to make the intent clearer?

Path

Ruby / Rails, Node / JS

Lesson Url

https://www.theodinproject.com/lessons/node-path-javascript-form-validation-with-javascript#practice

(Optional) Discord Name

No response

(Optional) Additional Comments

No response