Add React Input Form Mask & Validation Features to Your Web App

Forms are at the center of nearly every modern web application. Whether collecting sign-ups, handling checkout details, or capturing feedback, forms are essential for user interaction. But without guidance and structure, they can also become a source of frustration and errors.

This is where React Input Mask and React Input Validation come in. By combining them, you can build React Input Forms that guide users as they type, enforce proper formatting, and ensure that only valid data gets submitted.

In this tutorial, we'll build a small React Input Form step by step using Wijmo's InputMask component. You'll explore:

• Why input masks and validation are important
• Setting up a sample React input form
• Adding a React input mask for formatting
• Enabling React input validation for correctness
• Customizing the user experience with additional options
• Handling the form submission

Ready to get started? Download Wijmo Today!

Why Use React Input Mask and Validation

Even simple forms are prone to user errors, such as mistyped emails, incorrectly formatted dates, or missing digits in phone numbers. Without a clear structure, these mistakes can easily slip through.

• A React Input Mask ensures data is entered in the proper structure (for example, (123) 456-7890).
• React Input Validation ensures that the data is not only formatted correctly but also complete and ready for submission.

By combining them, you get React Input Forms that are reliable for developers and easy for users.

Step 1: Setting Up a React Input Form

We'll create a form that collects the following:

• Name
• Email
• Phone number
• Social Security number

Each field will use Wijmo's InputMask to guide input and prevent invalid submissions.

The initial setup of our React component is shown below:

function App() {
  return (
    <div class="form-control">
      <div class="form-header">
        <span>User Information</span>
      </div>
      <form class="form-body" onSubmit={onSubmit}>
        <div class="form-footer">
          <button class="form-button" type="submit">Submit</button>
        </div>
      </form>
    </div>
  )
}

We'll also set up some CSS to give the input form a basic design:

.form-control {
  position: absolute;
  width: 400px;
  height: 300px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -200px;
  border-radius: 15px;
  box-shadow: 1px 0 5px -2px rgb(90, 90, 90);
  text-align: center;
}

.form-header {
  height: 50px;
  width: 100%;
  line-height: 50px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background: rgb(100, 100, 252);
  font-weight: bold;
  font-size: larger;
  color: white;
}

.form-body {
  height: 100%;
  position: relative;
}

.form-footer {
  position: absolute;
  bottom: 75px;
  right: 2px;
  height: 50px;
  width: 100%
}

.form-button {
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  height: 40px;
  width: 100px;
  border-radius: 10px;
  border: 1px solid black;
  background: rgb(100, 100, 252);
  color: white;
  font-size: 16px;
}

.form-button:hover {
  cursor: pointer;
  background: rgb(140, 140, 255);
}

The CSS that we've just written will center the form on the page, as well as style our header, footer, and button elements. Now, if you run the application, you should see the following:

Step 2: Adding React Input Masks

With the structure in place, let's apply React Input Masks. To do so, we'll be using Wijmo's React library, which can be installed in your application with the following command:

npm i @mescius/wijmo.react.all

We'll also need to import Wijmo's required files for the React InputMask control:

import '@mescius/wijmo.styles/wijmo.css';
import * as wijmo from '@mescius/wijmo';
import * as wjcInput from '@mescius/wijmo.react.input';

Now, we can enhance the form by adding fields for the user's name, email, phone number, and social security number:

<div class="form-control">
  <div class="form-header">
    <span>User Information</span>
  </div>
  <form class="form-body" onSubmit={onSubmit}>
    <div class="form-element">
      <wj-input-mask ref={name} id="name" placeholder="Name"></wj-input-mask>
    </div>
    <div class="form-element">
      <wj-input-mask ref={email} id="email" placeholder="Email"></wj-input-mask>
    </div>
    <div class="form-element">
      <wj-input-mask ref={phone} id="phone" placeholder="Phone Number"></wj-input-mask>
    </div>
    <div class="form-element">
      <wj-input-mask ref={social} id="social" placeholder="Social Security Number"></wj-input-mask>
    </div>
    <div class="form-footer">
      <button class="form-button" type="submit">Submit</button>
    </div>
  </form>
</div>

Next, we'll implement four InputMasks: one for name, email, phone number, and social security number. We're also setting a placeholder value for each mask, which will help users identify what to enter in each field.

The last thing that we'll need to do is add some CSS to style the React InputMasks:

.form-element {
  text-align: center;
  margin-top: 15px;
  width: 100%;
}

Now, if you run the application, you should see the following:

Step 3: Adding React Input Validation

Masks are helpful, but we also need validation to block incomplete values. Wijmo's InputMask provides a maskFull property that checks whether all required characters are entered.

We can create a validateMask method to check and verify the user input:

const validateMask = (ctrl) => {
  if (!ctrl.maskFull) {
    ctrl.hostElement.classList.add('state-invalid');
  } else {
    ctrl.hostElement.classList.remove('state-invalid');
  }
};

This method checks if the maskFull property of the InputMask returns true. The maskFull property is a Boolean value that returns 'true' if the user has entered the required number of characters by the mask and 'false' if not. If it does not return 'true', then we add a CSS class named 'state-invalid' to the control.

We'll also add some CSS for the state-invalid class:

.state-invalid {
  color: red;
}

We can also tie this method to each React InputMask via the onValueChanged event:

<div class="form-element">
  <wj-input-mask ref={phone} id="phone" placeholder="Phone Number" isRequired={true} valueChanged={validateMask}></wj-input-mask>
</div>
<div class="form-element">
  <wj-input-mask ref={social} id="social" placeholder="Social Security Number" isRequired={true} valueChanged={validateMask}></wj-input-mask>
</div>

Now, when a user provides an invalid input, the error is flagged and the text is displayed in red. However, we don't have any formatting to validate against; we'll add that in the next section.

Step 4: Customizing the React Input Form

Wijmo's React InputMask allows deeper customization:

• Prompt Characters guide users with symbols (#, *, etc.).
• Raw Values let you extract unformatted input for processing (1234567890 instead of (123) 456-7890).
• Custom Masks help enforce unique business rules (e.g., product codes).

For this, we'll be setting up custom masks to be used for the phone number and the social security number:

<div class="form-element">
  <wj-input-mask ref={phone} id="phone" placeholder="Phone Number" isRequired={true} valueChanged={validateMask} mask="000-000-0000" promptChar="#"></wj-input-mask>
</div>
<div class="form-element">
  <wj-input-mask ref={social} id="social" placeholder="Social Security Number" isRequired={true} valueChanged={validateMask} mask="000-00-0000" promptChart="*"></wj-input-mask>
</div>

For each of these input masks, we're setting a promptChar to display to users in the field, and we also define the format to display what they enter via the mask property.

Now, when we run the application, we should see the following:

And thanks to the validation customization that we've set up, when improperly submitted, we'll see the following:

Step 5: Handling Form Submission

Finally, let's add a simple submitForm method to handle the collected data:

const isFormComplete = () => {
  return (
    nameRef.current.control.value !== '' &&
    emailRef.current.control.value !== '' &&
    phoneRef.current.maskFull &&
    socialRef.current.maskFull
  );
};

const onSubmit = (e) => {
  e.preventDefault();
  if (isFormComplete()) {
    alert(
      `User Information:\nName: ${nameRef.current.control.value}\nEmail: ${emailRef.current.control.value}\nPhone: ${phoneRef.current.control.value}\nSSN: ${socialRef.current.control.value}`
    );
  } else {
    alert('Please complete all fields correctly.');
  }
};

Now, if we run the app and correctly fill out all of the Vue input masks, we'll see the following alert:

Ready to check it out? Download Wijmo Today!

Conclusion

As you can see, you can easily build forms using Wijmo's React InputMask control. For more information, we offer demos, documentation, and API references for developers.

Happy coding!