Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

JS Form Validation: Clarify form validation requirements #27576

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

MaoShizhong
Copy link
Contributor

Because

A surprisingly common occurrence I've seen in the community is confusion as to what the Form Validation with JS lesson's instruction to do "all" validation in JS actually means.

Some have interpreted this to mean that you cannot even use different input types with the form having the novalidate attribute. Meaning they use only text inputs and manually validate every small detail inc. input format.

Instead, I believe the intent is to disable automatic HTML validation and to handle it via JS instead, where the learner can still use different input types (just needing to use the constraint validation API to check and report validity).

This PR

  • Adds a instruction to set novalidate on the <form> element, and use JS to check and report validity via the constraint validation API as was taught in the lesson.
  • Fixes linting errors.
  • Combined the ### Practice block into the ### Assignment block.

Issue

Closes #27316

Additional Information

The decision to combine ### Practice and ### Assignment came from mdlint not liking Practice being a ### instead of ####. However, setting it as a #### looks odd given it's a block heading where the block already has #### subheadings.

The Practice material is also essentially an assignment anyway, so I felt it might as well be combined with the Assignment section as well.

I did this combination in its own commit - so if this would preferably be done in a separate PR, I can always revert it to make the main change for novalidate and open a new PR for the section combination. Equally, if it would be preferable to just keep the section structure separated as is and ignore the ### Practice lint error via a comment, a revert could easily handle that as well.

Pull Request Requirements

  • I have thoroughly read and understand The Odin Project Contributing Guide
  • The title of this PR follows the location of change: brief description of change format, e.g. Intro to HTML and CSS lesson: Fix link text
  • The Because section summarizes the reason for this PR
  • The This PR section has a bullet point list describing the changes in this PR
  • If this PR addresses an open issue, it is linked in the Issue section
  • If any lesson files are included in this PR, they have been previewed with the Markdown preview tool to ensure it is formatted correctly
  • If any lesson files are included in this PR, they follow the Layout Style Guide

Provides more clarity for what 'JS-only' validation means.
Resolves lint issue with '### Practice', and the Practice section is
assignment material anyway.
@github-actions github-actions bot added the Content: JavaScript Involves the JavaScript course label Mar 7, 2024
@CouchofTomato CouchofTomato requested review from a team and bycdiaz and removed request for a team March 14, 2024 15:46
@MaoShizhong MaoShizhong mentioned this pull request Mar 24, 2024
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content: JavaScript Involves the JavaScript course
Projects
None yet
Development

Successfully merging this pull request may close these issues.

JS Form Validation: Clarify intended approach with JS-only validation
2 participants