Loading... Login Loading... Register

React Forms and Validation Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/8

Which event can be used to prevent form submission in React on invalid input?

function FormComponent() {
  const handleSubmit = (event) => {
    if (!event.target.reportValidity()) {
      event.preventDefault();
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" required value="" />
      <button type="submit">Submit</button>
    </form>
  );
}

Select your answer

The `onBlur` event will prevent default form submission for invalid inputs only.

The `onSubmit` event can be used to prevent default form submission if inputs are invalid.

The `onChange` event can block form submission.

The `onClick` event of the submit button stops form submission.

Question 2/8

How can you access the form values using React Refs in an uncontrolled component?

class UncontrolledForm extends React.Component {
  constructor(props) {
    super(props);
    this.nameInputRef = React.createRef();
  }

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.nameInputRef.current.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.nameInputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

Select your answer

By using a global variable to store the form value.

Using the `useState` hook.

By using the `current` property of the Ref to access the DOM node and its value.

By managing the form values exclusively in the component state.

Question 3/8

Which of the following describes form validation using HTML5 features within a React component?

function MyForm() {
  return (
    <form>
      <input type="text" required minLength="5" pattern="[A-Za-z]+" />
      <button type="submit">Submit</button>
    </form>
  );
}

Select your answer

Using HTML5 validation attributes prevents React from updating the form state.

React forms do not support HTML5 validation attributes.

Validation must be implemented entirely with custom JavaScript functions in React.

HTML5 form attributes such as `required`, `minLength`, and `pattern` can be used to provide basic client-side validation.

Question 4/8

When using Formik, how do you manage asynchronous validation of form input in React?

import React from 'react';
import { Formik, Form, Field } from 'formik';

const validateEmail = async (value) => {
  let error;
  if (!value.includes('@')) {
    error = 'Invalid email format';
  } else {
    const response = await checkEmailAvailability(value);
    if (!response.available) {
      error = 'Email is already taken';
    }
  }
  return error;
};

function SignupForm() {
  return (
    <Formik
      initialValues={{ email: '' }}
      onSubmit={(values) => { console.log(values); }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="email" validate={validateEmail} />
          {touched.email && errors.email && <div>{errors.email}</div>}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

Select your answer

Formik does not support asynchronous validation.

By writing a synchronous function and converting it manually to an async function.

By defining a validation function which returns a promise and assigning it to the `validate` property of a field.

By only using `setTimeout` to delay validation checks.

Question 5/8

Why would you use `useReducer` over `useState` for handling form input in React?

const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        [action.field]: action.value
      };
    default:
      return state;
  }
};

function FormComponent() {
  const [state, dispatch] = useReducer(formReducer, { name: '', email: '' });

  const handleChange = (e) => {
    dispatch({ type: 'UPDATE_FIELD', field: e.target.name, value: e.target.value });
  };

  return (
    <div>
      <input name="name" value={state.name} onChange={handleChange} />
      <input name="email" value={state.email} onChange={handleChange} />
    </div>
  );
}

Select your answer

To use the context API with functional components.

Because `useReducer` provides a more scalable approach for managing complex state logic, especially when dealing with multiple fields.

Because `useReducer` is faster in updating the state than `useState`.

`useReducer` requires less code and is simpler to implement than `useState`.

Question 6/8

What is the purpose of using the `onChange` event in form inputs for React?

function FormComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
}

Select your answer

To validate the form before submission.

To log the form input value to the console.

To update the form input state in response to user input.

To submit the form data to a server.

Question 7/8

What hook can be used to manage form input state in a functional React component?

function FormComponent() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <input type="text" value={name} onChange={handleChange} />
  );
}

Select your answer

useReducer

useState

useContext

useRef

Question 8/8

In React, how do you create a controlled form component?

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  handleChange = (event) => {
    this.setState({inputValue: event.target.value});
  }

  render() {
    return (
      <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
    );
  }
}

Select your answer

By using uncontrolled form inputs without managing state.

By using jQuery to handle form inputs.

By using only functional components and hooks.

By creating a React component that manages form input values in its own state.

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/8

😊 Your answer was correct 🙁 Your answer was incorrect

Which event can be used to prevent form submission in React on invalid input?

function FormComponent() {
  const handleSubmit = (event) => {
    if (!event.target.reportValidity()) {
      event.preventDefault();
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" required value="" />
      <button type="submit">Submit</button>
    </form>
  );
}

Available answers

The `onBlur` event will prevent default form submission for invalid inputs only.

The `onSubmit` event can be used to prevent default form submission if inputs are invalid.

The `onChange` event can block form submission.

The `onClick` event of the submit button stops form submission.

The `onSubmit` event handler can call `event.preventDefault()` to stop form submission if validation checks (using `reportValidity` for native validation) fail.

Question 2/8

😊 Your answer was correct 🙁 Your answer was incorrect

How can you access the form values using React Refs in an uncontrolled component?

class UncontrolledForm extends React.Component {
  constructor(props) {
    super(props);
    this.nameInputRef = React.createRef();
  }

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.nameInputRef.current.value);
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.nameInputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

Available answers

By using a global variable to store the form value.

Using the `useState` hook.

By using the `current` property of the Ref to access the DOM node and its value.

By managing the form values exclusively in the component state.

In an uncontrolled component, React Refs can be used to access form element values directly via `this.nameInputRef.current.value`, bypassing React state.

Question 3/8

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following describes form validation using HTML5 features within a React component?

function MyForm() {
  return (
    <form>
      <input type="text" required minLength="5" pattern="[A-Za-z]+" />
      <button type="submit">Submit</button>
    </form>
  );
}

Available answers

Using HTML5 validation attributes prevents React from updating the form state.

React forms do not support HTML5 validation attributes.

Validation must be implemented entirely with custom JavaScript functions in React.

HTML5 form attributes such as `required`, `minLength`, and `pattern` can be used to provide basic client-side validation.

React components can utilize standard HTML5 validation attributes like `required`, `minLength`, and `pattern` for basic client-side validation in forms.

Question 4/8

😊 Your answer was correct 🙁 Your answer was incorrect

When using Formik, how do you manage asynchronous validation of form input in React?

import React from 'react';
import { Formik, Form, Field } from 'formik';

const validateEmail = async (value) => {
  let error;
  if (!value.includes('@')) {
    error = 'Invalid email format';
  } else {
    const response = await checkEmailAvailability(value);
    if (!response.available) {
      error = 'Email is already taken';
    }
  }
  return error;
};

function SignupForm() {
  return (
    <Formik
      initialValues={{ email: '' }}
      onSubmit={(values) => { console.log(values); }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="email" validate={validateEmail} />
          {touched.email && errors.email && <div>{errors.email}</div>}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
}

Available answers

Formik does not support asynchronous validation.

By writing a synchronous function and converting it manually to an async function.

By defining a validation function which returns a promise and assigning it to the `validate` property of a field.

By only using `setTimeout` to delay validation checks.

Formik allows asynchronous validation by assigning an async function to the `validate` prop on a `Field`. The function can return a promise that resolves to a validation error message.

Question 5/8

😊 Your answer was correct 🙁 Your answer was incorrect

Why would you use `useReducer` over `useState` for handling form input in React?

const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        [action.field]: action.value
      };
    default:
      return state;
  }
};

function FormComponent() {
  const [state, dispatch] = useReducer(formReducer, { name: '', email: '' });

  const handleChange = (e) => {
    dispatch({ type: 'UPDATE_FIELD', field: e.target.name, value: e.target.value });
  };

  return (
    <div>
      <input name="name" value={state.name} onChange={handleChange} />
      <input name="email" value={state.email} onChange={handleChange} />
    </div>
  );
}

Available answers

To use the context API with functional components.

Because `useReducer` provides a more scalable approach for managing complex state logic, especially when dealing with multiple fields.

Because `useReducer` is faster in updating the state than `useState`.

`useReducer` requires less code and is simpler to implement than `useState`.

`useReducer` is useful for managing state transitions that are complex, especially when dealing with multiple state variables or multiple actions, providing a more structured approach compared to `useState`.

Question 6/8

😊 Your answer was correct 🙁 Your answer was incorrect

What is the purpose of using the `onChange` event in form inputs for React?

function FormComponent() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
}

Available answers

To validate the form before submission.

To log the form input value to the console.

To update the form input state in response to user input.

To submit the form data to a server.

The `onChange` event is used to update the component's state to match the current value of the form input. This keeps the UI in sync with the state.

Question 7/8

😊 Your answer was correct 🙁 Your answer was incorrect

What hook can be used to manage form input state in a functional React component?

function FormComponent() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <input type="text" value={name} onChange={handleChange} />
  );
}

Available answers

useReducer

useState

useContext

useRef

The `useState` hook is used to add state to a functional component. In the example given, `useState` manages the state for the form input.

Question 8/8

😊 Your answer was correct 🙁 Your answer was incorrect

In React, how do you create a controlled form component?

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: ''
    };
  }

  handleChange = (event) => {
    this.setState({inputValue: event.target.value});
  }

  render() {
    return (
      <input type="text" value={this.state.inputValue} onChange={this.handleChange} />
    );
  }
}

Available answers

By using uncontrolled form inputs without managing state.

By using jQuery to handle form inputs.

By using only functional components and hooks.

By creating a React component that manages form input values in its own state.

A controlled form component in React is a component that renders a form element with its value controlled by React state. The state is updated when the input changes using the `handleChange` event handler.