{"id":21473757,"url":"https://github.com/bell-kevin/inputvalidationregistrationform","last_synced_at":"2025-03-17T07:26:38.039Z","repository":{"id":235735136,"uuid":"615042633","full_name":"bell-kevin/inputValidationRegistrationForm","owner":"bell-kevin","description":"Minimal validation on each screen, not allowing forward movement with the \"Next\" button until the screen is valid","archived":false,"fork":false,"pushed_at":"2025-01-22T03:46:50.000Z","size":4053,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T04:26:39.488Z","etag":null,"topics":["android","input-validation","ios","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bell-kevin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-16T20:46:40.000Z","updated_at":"2025-01-22T03:46:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"70f772ab-dca0-48e6-9150-9e18ea87b57a","html_url":"https://github.com/bell-kevin/inputValidationRegistrationForm","commit_stats":null,"previous_names":["bell-kevin/inputvalidationregistrationform"],"tags_count":0,"template":false,"template_full_name":"bell-kevin/kevinBellTemplateRepo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FinputValidationRegistrationForm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FinputValidationRegistrationForm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FinputValidationRegistrationForm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bell-kevin%2FinputValidationRegistrationForm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bell-kevin","download_url":"https://codeload.github.com/bell-kevin/inputValidationRegistrationForm/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243990597,"owners_count":20379818,"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":["android","input-validation","ios","react-native"],"created_at":"2024-11-23T10:18:46.220Z","updated_at":"2025-03-17T07:26:38.001Z","avatar_url":"https://github.com/bell-kevin.png","language":"JavaScript","readme":"# Registration Form Input and Validation\n\nYou worked on a project for registration input and validation at the end of Sections 7 and 8. The student entered any data, and the validation screen at the end displayed all the input, asking if it was good. In this project, you will do some minimal validation on each form, not allowing forward movement with the \"Next\" button until the screen is valid. \n\nBegin by making a COPY of the previous project.\n\nOn each screen, remove the heading about using a reducer. On the first screen, change the heading to \"Account Registration\", and change it to one button that says \"Begin\", which takes the user to the Names screen. On the phone screen, the placeholder needs to change to show an example of valid input. On the email screen, change the keyboard type to \"email-address\", so the \"@\" symbol is on that keyboard.  Here are screenshots showing the changes on the home and phone screens:\n\n![F](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/readMeExamplePictures/FormInput-1.PNG)    ![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/readMeExamplePictures/formInput-4.PNG)   \n\n \n\nAdd a text component below the Next button on the 3 input screens, which will appear when the screen does not validate. When that text is present, the Next button will not work. Here are examples. The image on the left shows the screen when it first appears -- since both fields are empty, there are errors. The image on the right shows the screen when there is an error -- here, the last name is still empty.\n\n![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/readMeExamplePictures/formInput-2.PNG)     ![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/readMeExamplePictures/formInput-3.PNG)\n\nIn the next image on the left, the phone number is incorrect because it is missing content -- it is not long enough. The example in the placeholder shows the pattern expected (see above). In the image on the right, the email address is incorrect because there is no \"@\" symbol. Note that the keyboard has an \"@\" symbol because the keyboard type is specific to email addresses.\n\n![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/readMeExamplePictures/formInput-5.PNG)     ![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/readMeExamplePictures/formInput-6.PNG)\n\n \n\n### Validations\n\nThe Name screen has two fields on it, and each one must have a length that is greater than 0. You saw this in the Udemy course -- trim the string, then check if the length is more than 0.\n\nThe Phone number screen has 10 numbers plus 2 hyphens. You could use a Regular Expression from JavaScript to check for a variety of acceptable phone number formats, but here, simply check that the string in the input field has a length of 12.\n\nThe Email screen has an email address, and those must have an \"@\" symbol in the strong. Check that the string contains the \"@\" and has a length greater than 1.\n\nWhere does the validation live? Where is the state of each variable described and changed? In the file for the context. Since you need to know if it is true or false that each field is valid -- that indicates the need for variables that hold the boolean that describes if the variable is valid or not. This is not an elegant solution, but it's sufficient to practice validation in this project. In the context file, add 4 variables for validity, like firstNameValid, lastNameValid, and so on. Set each to false. In the reducer that changes the state of the variables, check if the new data in the variable passes the validation tests. For example, when changing the firstName variable, check if the trimmed data has a length of more than zero, and if it does, set the firstNameValid variable to true, else set that variable to false. Then return the state with the spread operator, the data from the payload, and the firstNameValid boolean. You should already have this logic in place for returning all of the state with the new firstName variable overwriting the previous one -- add the \"valid\" variable and overwrite it as well.\n\nIn the screens, look at the code for the button to move to the next screen. You need to check that the \"valid\" variable is true, then navigate to the next screen. If it is not true, display the Text component that says to fix errors. Note in the screenshots above that this text is red, bold, and centered.\n\nTake 5 screenshots: the first screen (black one above), the Names screen with errors, the Phone screen with errors, the Email screen with errors, and the final validation page that displays all the data. You had to fix those errors to move to the next screen, you don't have to take screenshots of the valid screens.\n\nSubmission: Zip together the root folder and the 5 screenshots, and submit the single zipped folder.\n\n![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/screenshots/1.PNG)\n\n![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/screenshots/2.PNG)\n\n![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/screenshots/3.PNG)\n\n![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/screenshots/4.PNG)\n\n![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/screenshots/5.PNG)\n\n![p](https://github.com/bell-kevin/inputValidationRegistrationForm/blob/main/screenshots/6.PNG)\n\n## How to:\n\nCreate one app. for both Android and iOS (Apple) using one computer alorithm for both apps. You'll need Visual Studio Code and Android Studio to get started:\n\nhttps://code.visualstudio.com/download\n\nhttps://developer.android.com/studio\n\nIf you want to see how your app. will look on iOS (Apple) devices, you'll need Xcode from the Apple app. store:\n\nhttps://developer.apple.com/xcode/\n\nTo run the Xcode app, you'll need a fairly new Apple computer.\n\nhttps://reactnative.dev/docs/environment-setup\n\nhttps://reactnative.dev/docs/components-and-apis\n\nhttps://reactnative.dev/docs/intro-react\n\nCheck out App.js here in the code files for the computer algorithm code.\n\n## Storing Projects\n\nWhen you complete a React Native project, you should keep it on your storage device for a little while. There are multiple instances where one project will be the basis of another project. The Udemy course keeps building on the projects, so you definitely need to keep those around until you are done with that project in the course.\n\nBUT -- React Native projects are huge. There is a folder, node_modules, that takes up most of the space. If you keep every project you create in this course, you would need at least 20GB of space, probably more. How can you manage this terrible drain on your storage?\n\nThat node_modules folder is automatically added when you create a new project. Once you are done with the project, you can delete that folder, node_modules, and the size of your project will shrink dramatically.\n\nThis does not destroy the project. If you find you need to run an old project again, which no longer has its node_modules folder, open it in Visual Studio Code, open a terminal, and type \"npm install\". This will load the node_modules folder again, and the project is whole and ready to run.\n\nNote that when you delete that folder, it takes a noticeable amount of time, far more than it takes to reload it.\n\nA good practice for course maintenance is to keep the project in its full state until you are sure you won't be using it in the next few days, then delete the node_modules folder.\n\n== We're Using GitHub Under Protest ==\n\nThis project is currently hosted on GitHub.  This is not ideal; GitHub is a\nproprietary, trade-secret system that is not Free and Open Souce Software\n(FOSS).  We are deeply concerned about using a proprietary system like GitHub\nto develop our FOSS project. I have a [website](https://bellKevin.me) where the\nproject contributors are actively discussing how we can move away from GitHub\nin the long term.  We urge you to read about the [Give up GitHub](https://GiveUpGitHub.org) campaign \nfrom [the Software Freedom Conservancy](https://sfconservancy.org) to understand some of the reasons why GitHub is not \na good place to host FOSS projects.\n\nIf you are a contributor who personally has already quit using GitHub, please\nemail me at **bellKevin@pm.me** for how to send us contributions without\nusing GitHub directly.\n\nAny use of this project's code by GitHub Copilot, past or present, is done\nwithout our permission.  We do not consent to GitHub's use of this project's\ncode in Copilot.\n\n![Logo of the GiveUpGitHub campaign](https://sfconservancy.org/img/GiveUpGitHub.png)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbell-kevin%2Finputvalidationregistrationform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbell-kevin%2Finputvalidationregistrationform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbell-kevin%2Finputvalidationregistrationform/lists"}