js-form-validation

The Odin Project: Form Validation with JavaScript

This browser-based form was developed to demonstrate understanding of form validation using JavaScript. For more details on this project, please refer to the lesson "Form Validation with JavaScript" on The Odin Project.

Key Project Instructions

• Form Fields:
  The form should include the following input fields:

  • Email
  • Country
  • Zip Code
  • Password
  • Password Confirmation

• Inline Validation: Implement live inline validation and style the fields to indicate validation status.

• JavaScript Validation: Use JavaScript exclusively for validating all input fields.

• Submit Action: The submit button should demonstrate functionality but does not need to perform actual form submission.

• Error Messages: Display error messages upon submission if there are any empty fields or invalid entries.

• Success Message: Congratulate the user upon successful form validation.

Built With

• HTML - Structure of the web form.
• CSS - Styling of the web form.
• JavaScript - Functionality for form validation.
• ESLint - Linting JavaScript code to improve quality and consistency.
• Prettier - Code formatter to maintain consistent style.

---

Resources Used

Brainstorming Tool by Miro

List of all countries with their 2 digit codes(ISO 3166-1) by Data Hub

HTML Country Select Dropdown List by Dan Rovito

Success and Error Flash Message by Natasha Girish on Dribble

HTML Color Names by W3Schools

Material Design Icons by Pictogrammers

Searching Tool by ChatGPT4

Referenced Tutorials

JavaScript Related:

• The Complete Guide to HTML Forms and Constraint Validation by sitepoint

• ValidityState: valueMissing property by MDN Web Docs

• oninput Event by W3Schools

• onblur Event by W3Schools

• Sending form data by MDN Web Docs

HTML Related:

• <input type="password"> by MDN Web Docs

• Email Validation Rules: Mastering Email Address Syntax by EmailListValidation

• What is the ultimate postal code and zip regex? by stack overflow

CSS Related:

• A good reset by Trys Mudford

• Update 2023-09-22: Using :user-invalid in Form Validation: You want :not(:focus):not(:placeholder-shown):invalid, not :invalid by Bram.us