Form Validation

Welcome to the Form Validation project! This project focuses on creating a robust and user-friendly form validation mechanism to ensure that user input meets specified criteria. By leveraging HTML, CSS (with Tailwind CSS), and JavaScript, this project delivers an interactive and responsive form validation experience.

Key Features

1. Input Validation

• The form validates multiple input fields, including:
  • Username: Must not be empty.
  • Email: Must be in a valid email format.
  • Password: Must be at least 8 characters long.
  • Confirm Password: Must match the entered password.

2. Real-time Feedback

• Users receive immediate feedback as they interact with the form. Error messages dynamically appear below each input field when the input is invalid, aiding users in identifying and rectifying errors promptly.

3. Visual Indicators

• Valid and invalid inputs are visually distinguished to provide clear cues to users. Valid inputs are highlighted with a green border, while invalid inputs are highlighted with a red border, facilitating easy identification of input status.

4. Interactive Experience

• The form offers an engaging and interactive experience, allowing users to witness real-time feedback as they type. This dynamic feedback loop enhances user engagement and streamlines the form-filling process.

Live Demo

You can try out the live demo of the app here.

Screenshots

GIF's

Technologies Used

• HTML: Defines the structure and content of the form, including input fields and error messages.
• CSS (with Tailwind CSS): Provides styling for the form elements, such as layout, colors, and typography. Tailwind CSS simplifies styling and ensures a consistent design system.
• JavaScript: Implements the logic for validating user inputs and updating the form's visual feedback based on validation results. JavaScript enhances interactivity and enriches the user experience.

How to Use

Using the Form Validation is straightforward:

1. Fill out the Form: Enter your information into the provided input fields.
2. Validation: As you type, the form dynamically validates each input field.
3. Feedback: Receive immediate feedback on input validity through error or success messages and color highlighting.
4. Submission: Once all inputs are valid, you can submit the form successfully.

Development

If you want to contribute to the development of this project, feel free to fork the repository and make your changes. You can submit pull requests with your improvements, bug fixes, or new features.

Prerequisites

No special prerequisites are needed to contribute to this project. Basic knowledge of HTML, CSS, and JavaScript would be helpful.

Setup

1. Clone the repository to your local machine.
2. Open the project directory in your preferred code editor.
3. Make your desired changes or additions to the code.
4. Test your changes by opening the index.html file in a web browser.
5. Once you're satisfied with your changes, commit them to your forked repository and submit a pull request.

Contributing

Contributions to this project are highly appreciated! Whether you discover bugs, have feature requests, or wish to contribute improvements, your input is valuable. Here's how you can contribute:

• Report Issues: If you encounter any bugs or issues while using MyCalculatorApp, please open an issue on the GitHub repository. Be sure to provide detailed information about the problem and steps to reproduce it.

• Submit Pull Requests: If you have enhancements or fixes to propose, feel free to submit a pull request. Contributions that improve the functionality, usability, or performance of MyCalculatorApp are welcomed and encouraged.

Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

1. Fork the Repository.
2. Create a New Branch (git checkout -b feature/your-feature-name).
3. Make Your Changes.
4. Commit Your Changes (git commit -am 'Add some feature').
5. Push to the Branch (git push origin feature/your-feature-name).
6. Create a New Pull Request.

License

This project is licensed under the The 3-Clause BSD License.Feel free to explore, modify, and contribute to this project as you see fit. Your feedback and contributions are greatly appreciated! 🚀✨

Acknowledgments

MyFormValidation project is made possible by the contributions and support of various individuals and communities. Special thanks to:

• Tailwind CSS Team: For developing Tailwind CSS, a versatile CSS framework that simplifies web development and enhances user interfaces.

• Open Source Community: For fostering collaboration, innovation, and the sharing of knowledge, which enriches projects like My Form Validation and makes them accessible to all.

Credits

This project wouldn't be possible without the contributions of the following:

• Tailwind CSS: Tailwind CSS empowers developers to build custom designs rapidly, enabling the creation of a visually appealing and cohesive user interface. Visit Tailwind CSS for more information.

Author

• Nishkarsh Gupta
  • GitHub: nishkarsh25
  • Email: bm21btech11016@gmail.com