Module 3 - Advanced Form Management

How to Build It

In line with the concept of controlled inputs, let's introduce these three new input types to our form and follow these fundamental steps:

1. Trigger a handler function when there's a change.
2. Compute and store the state.
3. Keep the screen updated (controlled input).

For checkboxes and radio buttons, the application will interact with the checked property of the input elements. Meanwhile, with dropdowns, the app will access the value of the <select> element.

Feel free to review the code snippet below and refer to the accompanying comments for guidance:

import { useState } from "react";

export default function App() {
  // We're using a single object to store all the state.
  // The first key is a boolean tracking the checked property of the checkbox.
  // The second is a string tracking the value of the selected radio input.
  // The third is a string that matches the value of one of the options in the dropdown.
  const [formData, setFormData] = useState({
    agree: false,
    ageRange: "",
    prize: "1",
  });

  // A single handler will update the state.
  // With checkboxes, we're not concerned about the value, so we read the checked property instead of the value property.
  const handleChange = (event) => {
    const { name, type, value, checked } = event.target;

    // Update the state based on the previous state.
    setFormData({
      ...formData,
      [name]: type == "checkbox" ? checked : value,
    });
  };

  return (
    <form>
      <label>
        Agree to Terms of Use?
        <input
          name="agree"
          type="checkbox"
          onChange={handleChange}
          checked={formData.agree}
        />
      </label>
      <br />
      <label>
        Age 13-19
        <input
          name="ageRange"
          value="teen"
          type="radio"
          onChange={handleChange}
          checked={formData.ageRange === "teen"}
        />
      </label>
      <br />
      <label>
        Age 20-55
        <input
          name="ageRange"
          value="adult"
          type="radio"
          onChange={handleChange}
          checked={formData.ageRange === "adult"}
        />
      </label>
      <br />
      <label>
        Age 55+
        <input
          name="ageRange"
          value="senior"
          type="radio"
          onChange={handleChange}
          checked={formData.ageRange === "senior"}
        />
      </label>
      <br />
      <label>
        Select Your Prize:
        <select name="prize" onChange={handleChange} value={formData.prize}>
          <option value="1">Cruise</option>
          <option value="2">Gift Card</option>
          <option value="3">LED TV</option>
          <option value="4">iPhone 11</option>
        </select>
      </label>
    </form>
  );
}

Notice how each type of input is handled in a specific manner.

Checkbox

Controlling the checkbox is quite straightforward. You monitor the checkbox to update a boolean state and simply assign this state back to the input's checked attribute.

Radio Buttons

Radio buttons employ arbitrary values to update the state, and then the checked attribute of each input is set by a comparison expression.

Dropdown Menu

Regarding the dropdown, each <option> features an arbitrary value used to update the state. This value is subsequently assigned as the <select> element's value, ensuring the correct option is displayed to the user.

It's essential to grasp how each type of input is managed in this controlled fashion!

How to Build It

Approaches to Data Validation

Yup offers several versatile methods for data validation within your component. The most straightforward approach is to validate data inside the onChange handler. This is exactly what you have been doing, and it allows you to implement the fundamental steps of controlled inputs:

• Validate or modify data as the user types or interacts with inputs.
• Update the application state.
• Connect the state to JSX (controlled inputs) to provide visual feedback.

While this approach works well, it doesn't address the challenge of knowing when the user has completely filled out the form to perform a final validation. For instance, validating an email address is only possible once the entire string has been entered.

Alternatively, you can employ Yup to perform basic validation or transformation during the onChange phase and then execute a final validation when the user is ready to submit the form using the onSubmit handler.

Another better approach, which you will use here, is do all the validation during the onChange phase. This approach includes code to disable the submit button, display real-time error messages until all inputs are valid, and only enable the submit button once all conditions are met. Intrigued? Let's explore this approach.

Implementing Validation

As usual, you'll need to introduce state to keep track of current inputs. However, in this improved form, you'll also require additional state to manage error messages returned by Yup. This error state will be directly linked to JSX, allowing the component to render error messages in real time as users interact with the form. Additionally, you'll need a third piece of state to determine whether the submit button should be enabled or not. This state will be controlled by a useEffect hook, triggered by changes in the input values. The effect will assess all inputs and enable the button only when they are all valid.

The following code is quite extensive, featuring several new syntax elements. Be sure to read all the comments for a comprehensive understanding, and run the application in your browser to follow along:

import { useState, useEffect } from "react";
// Remember to install the library with npm before importing Yup
import * as yup from "yup";

// Object to facilitate access to the text messages
const validationErrors = {
  passwordPatternWrong:
    "Must Contain 8 Characters, One Uppercase, One Lowercase, One Number and one special case Character",
  termsIncorrect: "Terms must be accepted",
};

// The schema has a couple of fields and it is most self-explanatory
const formSchema = yup.object().shape({
  password: yup
    .string()
    .required()
    // You could use a simple ".min(8, message)" here, but hey, let's use some RegEx.
    .matches(
      // This is what RegEx looks like. We will explore this RegEx expression later.
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/,
      validationErrors.passwordPatternWrong
    ),
  // This boolean must be one of the values in the array to be considered valid.
  // Meaning, it must be true.
  accept: yup.boolean().oneOf([true], validationErrors.termsIncorrect),
});

export default function App() {
  const [values, setValues] = useState({ password: "", accept: false });
  // The form starts empty, so there are no errors yet
  const [errors, setErrors] = useState({ password: "", accept: "" });
  const [enabled, setEnabled] = useState(false);

  // This effect will run whenever the values state is modified.
  // If all the values match schema, Yup will return true to the success callback
  // The submit button will be enabled only when the validation succeeds
  useEffect(() => {
    formSchema.isValid(values).then((isValid) => {
      setEnabled(isValid);
    });
  }, [values]);

  // Just a console log for now
  // In a real app, the values would be sent to the endpoint
  const handleSubmit = (evt) => {
    evt.preventDefault();
    console.log("Sending data to server...", values);
  };

  const handleChange = (evt) => {
    let { type, checked, name, value } = evt.target;
    if (type === "checkbox") value = checked;
    setValues({ ...values, [name]: value });
    // The ".reach()/.validate()" combination allows you to check a single value
    yup
      .reach(formSchema, name)
      .validate(value)
      .then(() => {
        // If value is valid, the corresponding error message will be deleted
        setErrors({ ...errors, [name]: "" });
      })
      .catch((err) => {
        // If invalid, we update the error message with the text returned by Yup
        // This error message was hard-coded in the schema
        setErrors({ ...errors, [name]: err.errors[0] });
      });
  };
  return (
    <div>
      <h2>Validating User Input</h2>
      <form onSubmit={handleSubmit}>
        {errors.password && <span>{errors.password}</span>}
        <label>
          Password
          <input
            type="text"
            name="password"
            placeholder="Type Password"
            onChange={handleChange}
            value={values.password}
          />
        </label>

        {errors.accept && <span>{errors.accept}</span>}
        <label>
          Accept terms
          <input
            checked={values.accept}
            onChange={handleChange}
            name="accept"
            type="checkbox"
          />
        </label>
        <input disabled={!enabled} type="submit" />
      </form>
    </div>
  );
}

Here are some additional comments:

• Observe the conditional expression within the JSX. This expression will evaluate to true only if errors.password is not empty, displaying the message on the screen.

{errors.password && <span>{errors.password}</span>}

• You could change the password input type to "password" if you want to hide the characters on the screen.

<label>
  Password
  <input
    type="text"
    name="password"
    placeholder="Type Password"
    onChange={handleChange}
    value={values.password}
  />
</label>

• Regarding the RegEx, while you're not learning the syntax here, it's an excellent opportunity to explore the expression:

/^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/

This regex will ensure the string:

• Includes at least one alphabetical character. (?=.*[A-Za-z])
• Includes at least one digit. (?=.*\d)
• Includes at least one of these special characters (?=.*[@$!%*#?&])
• Has at least 8 characters. [A-Za-z\d@$!%*#?&]{8,}

And:

• Finally, notice how the submit button will be disabled when the enabled state is not true:

<input disabled={!enabled} type="submit" />

And that's it! By harnessing the expressive power of Yup and incorporating additional state management, you can easily control and validate all inputs in real-time. Yup offers a multitude of options in schema definition, making it a powerful tool for data validation. You can explore more about using this library here.

Part One:

Part Two:

How to Build It

Let's continue from the previous Learning Objective example. The form is already controlled, and Yup is used to validate all inputs (password and terms).

The schema remains unchanged, and there's no need to modify the handleChange function or the effect hook, as they are exclusively used for front-end validation.

Your initial step is to introduce additional state variables to handle responses from the server. Inside the App component, add some lines below the existing state:

const [values, setValues] = useState({ password: "", accept: false });
const [errors, setErrors] = useState({ password: "", accept: "" });
const [enabled, setEnabled] = useState(false);
// New state below:
const [success, setSuccess] = useState("");
const [failure, setFailure] = useState("");

These variables will store messages returned by the server and will be linked to the JSX output, allowing users to receive visual feedback immediately after submitting the form:

return (
  <div>
    {success && <div>{success}</div>}
    {failure && <div>{failure}</div>}
    <form onSubmit={handleSubmit}>
       {/* etc. */}

Now, the only missing piece is to send data to the endpoint, receive the response, and handle the new state variables. You'll accomplish this in the handleSubmit function.

const handleSubmit = (evt) => {
  evt.preventDefault();
  axios
    .post(URL, values)
    .then((res) => {
      setSuccess(res.data);
      setFailure("");
    })
    .catch((err) => {
      setFailure(err.response);
      setSuccess("");
    });
};

Let's break down the code above. The post method expects the endpoint's URL and the payload as arguments. In our case, the server expects the payload to be an object containing the password string and the accept boolean.

The server's response will either contain a success or failure message (a string), which will be stored in the corresponding state variable, while the other state variable is cleared. This triggers a re-render of the component to display the message on the screen.

Keep in mind that each server API may format its response message differently. It could be a simple string, a value nested within a key/value pair, a deeply nested code within an object tree, or any other variation. In our example, we assume that res.data holds the actual success string returned by the server, and err.response contains the error message.

Before updating your App component, remember to install and import axios. In your terminal, navigate to the project's root folder:

npm install axios

Do you find yourself with some free time? Why not take the opportunity to enhance the final form by adding some styling?