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

Forms are the backbone of modern web applications. From registration and checkout flows to feedback surveys and login screens, forms collect critical user information. However, without proper controls, forms can easily lead to errors—such as incorrect phone numbers, incomplete credit card details, or invalid email addresses.

This is where JavaScript Input Mask and JavaScript Input Validation become essential. By combining these techniques, you can guide users as they enter data, ensure proper formatting, and stop invalid submissions before they happen.

In this guide, we’ll walk through building a JavaScript Input Form using Wijmo’s InputMask component. You’ll explore:

• Why input masks and data validation are important
• Building a JavaScript form with basic styling and structure
• Adding a JavaScript Input Mask to format data
• Applying JavaScript Input Validation for correctness
• Customizing the user experience with masks and prompt characters
• Handling the form submission

Let’s dive in!

Ready to get started? Download Wijmo Today!

Why Use JavaScript Input Masks and Validation

Users make mistakes. Missing digits in a phone number, mistyped dates, or blank required fields all cause problems. Without clear guidance, errors frustrate users and increase support costs.

• A JavaScript Input Mask ensures data is entered in the correct format (e.g., a phone number like (123) 456-7890).
• JavaScript Input Validation ensures the data is correct and complete (e.g., not empty, the right length, and correct rules).

Together, they produce polished JavaScript Input Forms that are both intuitive and reliable.

Step 1: Building a JavaScript Input Form

We’ll start by building a small form that collects:

• Name
• Email
• Phone number
• Social Security number

The form will use Wijmo’s InputMask to enforce formatting and validation:

<div class="form-control">
  <div class="form-header">
    <span>User Information</span>
  </div>
  <form class="form-body" onsubmit="onSubmit(event)">
    <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);
}

Now, if you load the application in your browser, you’ll see a simple layout with a header and submission button:

Step 2: Adding JavaScript Input Masks

Next, we’ll bring in Wijmo’s controls and use the MESCIUS CDN to reference the Wijmo files that will be needed:

<link href="https://cdn.mescius.com/wijmo/5.latest/styles/wijmo.min.css" rel="stylesheet"/> 
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.mescius.com/wijmo/5.latest/controls/wijmo.input.min.js"></script> 

Now, we’ll use Wijmo to set up the JavaScript Input Masks in the submission form:

nameMask = new wijmo.input.InputMask('#name', {
  placeholder: 'Name'
});

emailMask = new wijmo.input.InputMask('#email', {
  placeholder: 'Email'
});

phoneMask = new wijmo.input.InputMask('#phone', {
  placeholder: 'Phone Number'
});

socialMask = new wijmo.input.InputMask('#social', {
  placeholder: 'Social Security Number'
});

Finally, we’ll add some CSS to style the Input Masks:

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

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

Step 3: Adding JavaScript Input Validation

Formatting is useful, but we also need validation to prevent incomplete or incorrect entries. Wijmo’s InputMask provides the maskFull property that returns true if all required characters are filled in. Then, if all of the field hasn’t been filled out, we can apply a flag to notify the user that the form is not correctly filled out; in this case, we’ll change the text to red:

function 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. MaskFull 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, we add a CSS class named state-invalid to the control.

We’ll add that CSS class to the <script> tag:

.state-invalid {
  color: red;
}

Lastly, we need to associate this method with each of the input masks, which we can do when setting up the masks:

nameMask = new wijmo.input.InputMask('#name', {
  placeholder: 'Name',
  isRequired: true,
  valueChanged: validateMask
});

emailMask = new wijmo.input.InputMask('#email', {
  placeholder: 'Email',
  isRequired: true,
  valueChanged: validateMask
});

phoneMask = new wijmo.input.InputMask('#phone', {
  placeholder: 'Phone Number',
  isRequired: true,
  valueChanged: validateMask
});

socialMask = new wijmo.input.InputMask('#social', {
  placeholder: 'Social Security Number',
  isRequired: true,
  valueChanged: validateMask
});

We’re also setting a property called isRequired to true, so that the form knows that these fields are required to be filled out.

Now, when a user enters an invalid input, it will flag the error and display the text in red. However, how does the input mask know that we’ve entered an invalid input? We’ll take a look at that next.

Step 4: Customizing the JavaScript Input Form

With Wijmo’s InputMask, you can tailor the experience further:

• Prompt Characters: Guide users with different placeholders (e.g., # or *)
• Raw Values: Access unformatted input for backend processing (e.g., 1234567890 instead of (123) 456-7890)
• Custom Masks: Define your own formats for IDs, postal codes, or business-specific inputs

For example, here’s how we enforce formats for phone and SSN fields:

phoneMask = new wijmo.input.InputMask('#phone', {
  placeholder: 'Phone Number',
  isRequired: true,
  valueChanged: validateMask,
  mask: '000-000-0000'
});

socialMask = new wijmo.input.InputMask('#social', {
  placeholder: 'Social Security Number',
  isRequired: true,
  valueChanged: validateMask,
  mask: '000-00-0000'
});

For each of these JavaScript input masks, we set a promptChar to display in the field and define the format for how user input is displayed through 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 capture the data when the form is submitted:

function isFormComplete() {
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  return (
    name !== '' &&
    email !== '' &&
    phone.maskFull &&
    social.maskFull
  );
}

function onSubmit(event) {
  event.preventDefault();
  if (isFormComplete()) {
    alert(
      `User Information:\nName: ${document.getElementById('name').value}\nEmail: ${document.getElementById('email').value}\nPhone: ${phone.value}\nSSN: ${social.value}`
    );
  } else {
    alert('Please complete all fields correctly.');
  }
}

With this, your JavaScript Input Form is fully functional: masked, validated, and ready to handle user submissions. If you run the application and correctly fill out all of the JavaScript Input Masks, when submitting the form, you should see the following alert:

Ready to check it out? Download Wijmo Today!

Conclusion

Using JavaScript Input Mask and JavaScript Input Validation with Wijmo’s InputMask control makes it easy to build forms that are both user-friendly and reliable. By guiding user input and preventing errors, you deliver a smoother user experience and cleaner data for your application.

For more information, explore our demos, documentation, and API references for developers.

Happy coding!