https://github.com/thomasscheuring/odin-validation

Validating forms using JavaScript
https://github.com/thomasscheuring/odin-validation

javascript theodinproject theodinproject-js validation

Last synced: 9 days ago
JSON representation

Validating forms using JavaScript

• Host: GitHub
• URL: https://github.com/thomasscheuring/odin-validation
• Owner: thomasscheuring
• Created: 2024-09-23T09:40:02.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-09-23T09:49:20.000Z (3 months ago)
• Last Synced: 2024-10-31T11:06:05.166Z (2 months ago)
• Topics: javascript, theodinproject, theodinproject-js, validation
• Language: JavaScript
• Homepage: https://www.theodinproject.com/lessons/node-path-javascript-form-validation-with-javascript#a-little-more-practice
• Size: 20.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# The Odin Project - Form Validation with JavaScript

Build a browser form which collects Email, Country, Zip Code, Password and Password Confirmation fields. It should use live inline validation to inform the user whether a field is properly filled in or not. That means highlighting a field red and providing a helpful error message until it has been filled in properly.

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 the  element has the novalidate attribute which will allow you to do all of your validation in your JavaScript files. You can still use different  types, but you will need to use JavaScript to check and report their validity. If all is well and the form is “submitted”, give the user a high five.

1. Set up a blank HTML document

2. Think about how you would set up the different form elements and their accompanying validators. What objects and functions will you need? A few minutes of thought can save you from wasting an hour of coding. The best thing you can do is whiteboard the entire solution before even touching the computer.

3. Write the form elements.

4. Add the JavaScript code that checks validation as the user progresses through the form. When a user leaves a form field, it should automatically validate that field.

5. Test out all possible cases.

6. Don’t forget to style validations with CSS by using the :valid and :invalid pseudo-classes!

## Screenshots