https://github.com/dhairyash-1/signup-form-with-complete-validation
This SignUp Form is the challange by Frontend mentor and I bulild this Form using Tailwind CSS and with the help of Pure JavaScript I added complete client side form validation.
https://github.com/dhairyash-1/signup-form-with-complete-validation
challenge formvalidation front-end-development frontendmentor frontendmentorchallenge javascript learning-by-doing signup-form tailwind-css tailwindcss
Last synced: 3 months ago
JSON representation
This SignUp Form is the challange by Frontend mentor and I bulild this Form using Tailwind CSS and with the help of Pure JavaScript I added complete client side form validation.
- Host: GitHub
- URL: https://github.com/dhairyash-1/signup-form-with-complete-validation
- Owner: Dhairyash-1
- Created: 2023-01-26T09:44:55.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-28T07:49:30.000Z (over 2 years ago)
- Last Synced: 2025-01-04T16:51:44.439Z (4 months ago)
- Topics: challenge, formvalidation, front-end-development, frontendmentor, frontendmentorchallenge, javascript, learning-by-doing, signup-form, tailwind-css, tailwindcss
- Language: HTML
- Homepage:
- Size: 491 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Intro component with sign up form solution
This is a solution to the [Intro component with sign up form challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/intro-component-with-signup-form-5cf91bd49edda32581d28fd1). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Tech Stacks](#tech-stacks)
- [What I learned](#what-i-learned)
- [Continued development](#continued-development)
- [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Receive an error message when the `form` is submitted if:
- Any `input` field is empty. The message for this error should say _"[Field Name] cannot be empty"_
- The email address is not formatted correctly (i.e. a correct email address should have this structure: `[email protected]`). The message for this error should say _"Looks like this is not an email"_
### Screenshot of Output
### Links
- Solution URL: [solution URL here](https://www.frontendmentor.io/solutions/tailwind-css-signup-form-with-client-side-validation-_-COtiI-7A)
- Live Site URL: [live site here](https://signup-form-with-validations.netlify.app/)
## My process
### Built with
- Mobile-first workflow
- Tailwind CSS - For styles
- JavaScript- For Form Validation
- Semantic HTML5 markup
- Flexbox
### Tech Stacks
### What I learned
- During working on this project I learn Tailwind CSS
- I learn how to do complete form validation with javascript
- I learn how to use vite for production build
- I learn how to build complete responsive SignUp Form
### Continued development
- In the future When I will learn Backend development then I will also add database to this form.
### Useful resources
- [JavaScript Client-side Form Validation](https://www.youtube.com/watch?v=rsd4FNGTRBw&list=WL&index=1) - This great video by Florin Pop helped me to write proper form validation in javaScript.
## Connect With Me
- Twitter - [@dhairyashgupta](https://www.twitter.com/dhairyashgupta)
- Linkedin - [Dhairyash Gupta](https://www.linkedin.com/in/dhairyashgupta/)
## Author
- Website - [Dhairyash Gupta](https://www.your-site.com)
- Frontend Mentor - [@Dhairyash-1](https://www.frontendmentor.io/profile/Dhairyash-1)