yashikabhargava / WebX

WebX is a platform which focuses on providing various free frontend web development tools and inspiration all at one place.
https://yashikabhargava.github.io/WebX/
MIT License
25 stars 47 forks source link

Implementing input validation for contact form #117

Closed centurion6x closed 2 years ago

centurion6x commented 2 years ago

Related Issue

Input validation on the contact form

Closes: #102

Are you creating this PR under Hacktoberfest

Yes, I'm opening this PR under hacktoberfest.

Describe the changes you've made

contact.html

Added the necessary elements to display error messages and hidden label elements to carry the names of the fields.

style.css

Added some styling to display the new elements conditionally(position, color, visibility etc.)

validator.js

The validation logic is implemented inside the validator class. This allows for easier implementation of more forms and any input field in the future.

Describe if there is any unusual behaviour of your code(Write NA if there isn't)

NA

Checklist:

Screenshots

Screenshot 2022-10-14 at 09-35-36 WebX

Screenshot 2022-10-14 at 09-35-23 WebX

Screenshot 2022-10-14 at 09-35-03 WebX

Screenshot 2022-10-14 at 09-34-44 WebX

Screenshot 2022-10-14 at 09-34-26 WebX

yashikabhargava commented 2 years ago

@centurion6x Great work, Thank you for contributing :)

centurion6x commented 2 years ago

Thank you for being an awesome maintainer! love contributing to this project :heart:

yashikabhargava commented 2 years ago

@centurion6x Thank you, it means a lot : )