https://github.com/porobertdev/form-validation

Form Validation using JavaScript's Constraint Validation API
https://github.com/porobertdev/form-validation

100daysofcode constraint-validation-api css form form-validation forms html js sign-up sign-up-form signup signup-form theodinproject

Last synced: 3 days ago
JSON representation

Form Validation using JavaScript's Constraint Validation API

• Host: GitHub
• URL: https://github.com/porobertdev/form-validation
• Owner: porobertdev
• Created: 2024-03-28T18:26:12.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-04-09T13:47:56.000Z (7 months ago)
• Last Synced: 2024-04-09T21:01:27.077Z (7 months ago)
• Topics: 100daysofcode, constraint-validation-api, css, form, form-validation, forms, html, js, sign-up, sign-up-form, signup, signup-form, theodinproject
• Language: JavaScript
• Homepage: https://porobertdev.github.io/form-validation/
• Size: 27.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# form-validation - [Live Preview](https://porobertdev.github.io/form-validation/)

## About

This is a modern and clean Sign-Up form that validates user's input using the JavaScript's **Constraint Validation API** and is the part of the [assigment](https://www.theodinproject.com/lessons/node-path-javascript-form-validation-with-javascript) from The Odin Project.

It features **live inline-validation** and a **custom dropdown component.**

The design was made in Figma, and you can find the mockup [here](https://www.figma.com/file/KL8kf0JLLnfJ5xGcvw5wRq/Sign-Up-Form?type=design&node-id=0%3A1&mode=design&t=HFU1PuU4Gi3biMaq-1https:/).

## Getting Started

If you are developer:

1. Clone the repository.

2. Run `npm install` to install all the packages and dependencies that the project requires.

3. Run `npm start` to start a local server, which opens the webpage.

_NOTE_: `my-components` is a private repository as of writing this, thus, the `npm install` should fail.

If you are a regular user:

1. Clone the repository.

2. Open `index.html` from the `/dist` directory.

## Tech Stack

-   HTML

-   CSS

-   JavaScript

-   Figma

-   Webpack

-   NPM

-   ESLint

-   Prettier