Unit 4: Form Handling and Validation - Practice Quiz

1 In React, what makes a form input a controlled component?

2 Which React feature is commonly used to access the current value of an uncontrolled input?

3 Which React Hook is commonly used to manage a simple form field value?

4 What is a common way to manage several related form fields in one state value?

5 Which form event is normally handled when a React form is submitted?

6 Why is event.preventDefault() commonly called in a React form submission handler?

7 How can a reusable input component receive its label text?

8 What is a key benefit of creating reusable form field components?

9 What does conditional rendering allow a React form to do?

10 Which JSX expression displays an error message only when error has a truthy value?

11 Which HTML element should identify the purpose of a form input for users and assistive technologies?

12 Which attribute can indicate to assistive technologies that an input currently has an invalid value?

13 Where does client-side form validation normally run?

14 Why should an application still validate form data on the server?

15 Which validation rule checks that a field is not left empty?

16 Which validation pattern is commonly used for a password confirmation field?

17 What does a validation schema describe?

18 What is one benefit of using a shared validation schema?

19 Which Zod expression defines a required string value?

20 What is a useful result of calling Zod's safeParse when validating form data?

21 A React text input receives its value from component state. Users can type into the input, but the displayed text never changes. Which change most directly fixes the problem?

22 A form contains a file input and should access the selected file only when the user submits the form. Which approach is most appropriate?

23 A form stores all field values in one object named formData. Which update correctly changes only the email field without removing the other fields?

24 Several inputs share one change handler and each input has a unique name attribute. Which expression should the handler use to update the matching property in state?

25 A React form should validate data and send it with fetch without causing a page reload. What should the submit handler do first?

26 A registration form sends an asynchronous request. Which workflow best prevents accidental duplicate submissions?

27 A reusable TextField component must display a label, an input, and an error message. Which API best supports reuse across forms?

28 A custom input component must allow its parent form to focus the underlying DOM input after validation fails. Which React design is most suitable?

29 A shipping-address section should appear only when useBillingAddress is false. Which JSX condition expresses this requirement?

30 A form conditionally removes a required companyName field when the user selects "Personal account". What should the form logic generally do with that hidden field?

31 A text input shows the error message "Email is required" in an element with id="email-error". Which input attribute best creates an accessible relationship to that message?

32 After a failed submission, which behavior most improves keyboard and screen-reader usability when several fields are invalid?

33 A checkout form validates card details in the browser before sending them to the server. Why must the server still validate the submitted data?

34 A form currently displays validation errors after every keystroke, distracting users before they finish typing. Which strategy offers a more balanced experience?

35 A password confirmation field must match the password field. What kind of validation is required?

36 A form accepts an optional website URL. Which rule correctly handles an empty value?

37 A team uses the same user schema to validate form data and infer TypeScript types. What is the main benefit of this approach?

38 A signup form requires password and confirmPassword to match. Why is object-level schema validation appropriate?

39 Given const schema = z.object({ age: z.coerce.number().int().min(18) }), what happens when it validates { age: "21" }?

40 A submit handler uses const result = schema.safeParse(formData). What should it do when result.success is false?

41 A file input is implemented as a controlled React input by assigning value={fileName} and updating fileName after onChange. What is the most accurate issue with this design?

42 A controlled text input initially receives value={undefined} and later receives value="admin@example.com". Which behavior should be expected?

43 A form stores values, touched, errors, isSubmitting, and submitError in separate state variables. Several event handlers update multiple variables based on the previous form state. Which refactoring most directly reduces inconsistency risk?

44 A field update handler is written as setValues({ ...values, [name]: value }), and two updates are queued during the same event. What change best guarantees that both updates use the latest state?

45 A React form submits data through fetch, but the page still navigates and the browser performs a native submission. Which correction is required?

46 A user submits a form twice before the first request finishes. Which design most reliably prevents an older response from overwriting newer state?

47 A reusable TextField component needs to support labels, descriptions, errors, arbitrary input attributes, and stable accessibility relationships. Which API design is strongest?

48 A reusable form component exposes onSubmit, onChange, and errors, but it also silently converts server errors into local field errors. What is the main design concern?

49 A billing address section is conditionally removed when sameAsShipping becomes true. When it is shown again, its previous values are gone. Which explanation is most accurate?

50 A payment form renders card fields when method === "card" and bank fields otherwise. Both branches contain an input with the same position but different meanings. What prevents React from incorrectly reusing field state?

51 A field has an inline validation message that appears after blur. Which implementation best communicates the error to assistive technologies?

52 A form displays a server-side error summary after submission. What behavior most improves keyboard and screen-reader usability?

53 Why should client-side validation be treated as a usability feature rather than a security boundary?

54 A password confirmation rule reports an error while the user is still typing the first password. Which validation strategy generally gives the best experience without weakening final correctness?

55 A numeric field accepts "", "0", and "12" as strings. Which approach avoids incorrectly treating zero as missing while still recognizing an empty field?

56 A schema is used both to validate a form and to transform a text field into a number. What architectural property is most important when using the parsed result?

57 A registration schema validates password and confirmPassword independently, but never checks that they match. What kind of rule is missing?

58 In Zod, a form field is received from an HTML input as a string, but the domain model requires a positive integer. Which schema best expresses the requirement?

59 A Zod object uses .refine() to ensure confirmPassword matches password, but the resulting issue appears at the form root. Which option gives the best field-level error display?

60 A form calls schema.parse(values) inside an asynchronous submit handler. Invalid input throws before the handler can populate field errors. Which integration pattern is appropriate?