{"id":25075054,"url":"https://github.com/dentednerd/form-validation-practice","last_synced_at":"2025-06-28T13:33:11.419Z","repository":{"id":95786744,"uuid":"477703101","full_name":"dentednerd/form-validation-practice","owner":"dentednerd","description":null,"archived":false,"fork":false,"pushed_at":"2022-04-05T14:41:43.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-07T00:32:11.374Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dentednerd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-04T13:01:40.000Z","updated_at":"2022-04-04T14:31:25.000Z","dependencies_parsed_at":"2023-04-23T20:27:22.601Z","dependency_job_id":null,"html_url":"https://github.com/dentednerd/form-validation-practice","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dentednerd%2Fform-validation-practice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dentednerd%2Fform-validation-practice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dentednerd%2Fform-validation-practice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dentednerd%2Fform-validation-practice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dentednerd","download_url":"https://codeload.github.com/dentednerd/form-validation-practice/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246542536,"owners_count":20794241,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-07T00:29:52.182Z","updated_at":"2025-03-31T21:26:31.101Z","avatar_url":"https://github.com/dentednerd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FORM VALIDATION\n\nFor this sprint, you are being asked to create a **form** using the DOM which will validate a range of different user inputs.\n\n## Form choices:\n\nBelow are some examples of forms that your users could use to submit information. Choose one of the following options or come up with your own theme if you're feeling creative. Just remember, the point of this is to validate the users inputs and provide appropriate feedback so make sure that you can apply some kind of restriction to the user input.\n\n### Account creation\n\nDesign a typical **account creation form** for a fictional website. If all details are valid, `submit` should take the user to a new page showing them the details of their newly created account.\n\nFields to collect from your user:\n\n| Field            | Restrictions                                                                |\n| ---------------- | --------------------------------------------------------------------------- |\n| First Name       | Required                                                                    |\n| Last Name        | Required                                                                    |\n| Username         | Must be a mix of letters and numbers, no other characters or spaces allowed |\n| Avatar Image url | Valid Url                                                                   |\n\n#### Submit Page\n\nOnce the user has signed up to your website they should be taken to a profile page where they can view all of the information they've just submitted. Think about the layout of profile pages you may have used in the past and create a user friendly site displaying their information.\n\n_Additional_\n\n- Allow your users to choose between _light_ and _dark_ mode for their profile. Style their profile page according to their preference.\n\n### Horoscope Generator\n\nCreate a form to collect some personal information from the user in order to generate their horoscope. The horoscopes should change based on the information the user has provided but can be generated in any way you see fit.\n\nFields to collect from your user:\n\n| Field      | Restrictions                                      |\n| ---------- | ------------------------------------------------- |\n| First Name | Required                                          |\n| Last Name  | Required                                          |\n| Star Sign  | Must be a valid star sign (Aries, Taurus, etc...) |\n\n#### Submit Page\n\nUse the users details to display their horoscope. The one they recieve should be based on the star sign they've submitted.\n\n_Additional_\n\n- Collect the users Date of Birth. Generate a different horoscope based upon whether the user is over or under 30 years old.\n\n### Business Card Generator\n\nCreate a form to collect some personal information from the user in order to generate a professional looking business card. The presentation of the card will be very important.\n\nFields to collect from your user:\n\n| Field        | Restrictions                  |\n| ------------ | ----------------------------- |\n| First Name   | Required                      |\n| Last Name    | Required                      |\n| Company      | Required                      |\n| Job Title    | Required                      |\n| Email        | Must be a valid email address |\n| Phone Number | Must be a valid phone number  |\n\n#### Submit Page\n\nUse the users submitted details to produce a professional looking business card.\n\n_Additional_\n\n- Give the users a choice of templates to alter the style of card produced.\n\n### Meme Generator\n\nCreate a form that allows users to create their own memes. The form should allow the user to choose an image to caption as well as the accompanying text.\n\nFields to collect from your user:\n\n| Field        | Restrictions      |\n| ------------ | ----------------- |\n| Top Text     | Max 50 characters |\n| Bottom Text  | Max 50 characters |\n| Image Choice | Required          |\n\n#### Submit Page\n\nThe users text superimposed onto their chosen image.\n\n_Additional_\n\n- Allow the users to choose images that require different amounts of text. e.g. 1 or more text inputs.\n\n## Tasks\n\n- Create a basic page containing your form. The user should be able to fill out your form correctly and be taken to the submit page.\n- Make sure the user can't submit the form without providing valid inputs for all required fields. Think about what kind of feedback you can give them that would let them know where the mistakes are if they try and submit too early.\n- Give the user feedback if they fill out an input incorrectly. You should make use of a variety of [**html DOM events**](https://www.w3schools.com/jsref/dom_obj_event.asp) to trigger feedback at the appropriate time. Some useful ones will be `blur`, `change` and `keyup` events.\n- You should attempt use of `event.target` - another way of accessing the item that has triggered the [event](https://developer.mozilla.org/en-US/docs/Web/API/Event/target).\n- You should use `DOM` methods if you want to hide things or create new elements.\n- Style your form to improve your UX.\n- Add styling to your error messages to draw the users attention. Try using [DOM classList methods](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)\n\n### For all inputs, bear in mind the following:\n\n- As a user I want to be told why my input is invalid.\n- As a colour blind user I want feedback to not only be based on colour.\n- As a non-native speaker, seeing a visual indicator would be an easier way for me to understand feedback than just text.\n\n- Add some functionality to the submit page. Take the values submitted by your form and display them on the page. Your form will have to submit the values that can be read from the page using [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/get)\n- Style your submit page.\n\nForm validation is more than coding - it is a service you provide to users, and as such, there are practices and expectations in terms of accessibility, usability and functionality. Best practice rules are ignored at your peril! Here are some interesting articles that document the sort of approaches you should adopt when designing your form, from [smashingmagazine](https://www.smashingmagazine.com/2011/11/extensive-guide-web-form-usability/) and [designmodo](https://designmodo.com/ux-form-validation/).\n\nThere are a lot of [html input attribute types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) that your browser can use to modify behaviour on your form, some of which you may never use again, but could be experimented with now.\n\n[CSS pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) interpret other element attributes. Don't forget that CSS can be used more broadly to signal things too; people make inferences from colour, font size and font style, for example.\n\n- Add some additional inputs to your form. Look through the available input types above and think about how you would validate and provide feedback at appropriate times.\n\n### Helpful links:\n\nWriting regular expressions to validate complex inputs such as URL's or emails is difficult. A task such as this would typically be handled by a library. There are a couple of regex's below for convenience and to give you an idea of how complicated this can get.\n\nURL Regex\n\n```js\n/^(?:(?:(?:https?|ftp):)?\\/\\/)(?:\\S+(?::\\S*)?@)?(?:(?!(?:10|127)(?:\\.\\d{1,3}){3})(?!(?:169\\.254|192\\.168)(?:\\.\\d{1,3}){2})(?!172\\.(?:1[6-9]|2\\d|3[0-1])(?:\\.\\d{1,3}){2})(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[1-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z0-9\\u00a1-\\uffff][a-z0-9\\u00a1-\\uffff_-]{0,62})?[a-z0-9\\u00a1-\\uffff]\\.)+(?:[a-z\\u00a1-\\uffff]{2,}\\.?))(?::\\d{2,5})?(?:[/?#]\\S*)?$/i;\n```\n\nEmail Regex\n\n```js\n/^(([^\u003c\u003e()\\[\\]\\\\.,;:\\s@\"]+(\\.[^\u003c\u003e()\\[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdentednerd%2Fform-validation-practice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdentednerd%2Fform-validation-practice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdentednerd%2Fform-validation-practice/lists"}