This app is made to practice working with forms based on this test task. User should fill all fields with the form step by step. All form fields are validated and if something doesn't filled correctly user-friendly error messages are displayed.
My goal was to practise react hook form with yup for validation. Also I practised building app using MUI according to design in Figma.
-
Field validation according to the rule set:
Rules
- nickname: string, 30 symbols max, only letters and digits are allowed;
- name: string, 50 symbols max, only letters are allowed;
- surname: string, 50 symbols max, only letters are allowed;
- phone: string, masked to the +7 (900) 000-00-00 format;
- email: valid email format;
- sex: man or woman variants;
- advantages array of strings;
- radio: number;
- checkbox: array of numbers;
- about: string, 200 symbols max without spaces;
-
Phone input field is masked;
-
Responsive layout;
-
Field values are saved between steps until the form submission;
-
Modal window with the result of form submission;
- install dependencies
npm install
- start local server via Vite
npm run dev