This problem is basically a passport number validation form.
You're given an object that looks something like this:
{ USA: "LLDDDD", Canada: "AALLDDDD" }
Where L means letters only, D means digits only, and A means alphanumeric (letters or digits).
Part 1 – Create a layout. Add a selector with the countries (from the object) as options; add a passport number input field; add a validate button.
Part 2 – Create a validate function that takes a country and a passport number string as input. If the input matches that country's format, return true, otherwise return false.
Write some console.logs and test different scenarios to make sure your function works as expected.
Part 3 – Hook everything up. If the entered number is invalid, show an error message; otherwise do nothing. You need to handle edge cases, and reset the form when a new country is selected, and reset the error when the passport number changes.
Finally, explain how you would improve accessibility, and what changes you would make to get this to a production-ready state.
Discussion
Loading comments…