How to use a jQuery MaskedTextBox UI Component in Your Web App

How can you make it easier for your users to know they're submitting the right information, and make your own data validation needs simpler? See how a MaskedTextBox can improve your app.

In my last post, you learned about the AutoComplete component, which is a text box that shows a filtered list of suggestions based on user input. In this episode, we will review the MaskedTextBox component.

A MaskedTextBox is a text input that lets you specify an input mask to control the data that can be entered into it. You would use a MaskedTextBox when your data has a fixed format and you want to ensure users enter values that are accurate and complete. For example, zip codes, credit card numbers and telephone numbers have a standard format and make good candidates for using a MaskedTextBox. In this tutorial, you will learn what an input mask is and how to use one with the MaskedTextBox component for Kendo UI.

Overview of the HTML Text Input

To review, there are several input types you can use to accept data. These input types include the radio and checkbox and newer types like email and number. All of these restrict what kind of data the user can submit. However, with the text input type, a user can enter practically anything they want, including malicious code. That is why there is a need to validate the data and restrict what the user can enter. Doing this ensures the user gives us the correct data. Say you wanted to get social security numbers in the form of ###-##-####. With plain HTML, you would need to use a text input and specify the format with the pattern attribute. A pattern is a regular expression. Here is how you could implement this using HTML alone:

<form>
  <input type="text" pattern="\d{3}[-]\d{2}[-]\d{4}" title="Social Security Number">
  <input type="submit">
</form>

In this example, the user can enter any values they want. The data is validated after the submit button is clicked. If the input does not match the regular expression pattern, an error message is shown. If the correct values are entered, the form will submit normally.

Validating the input this way has some drawbacks. While the input will only be accepted if it fits the format we've specified, the user can still enter invalid data. Plus, the user only knows the data is invalid after they have submitted it. We would prefer that the data be validated as the user enters it and that the form only allows the user to enter valid data. An input mask solves this problem.

Kendo UI MaskedTextBox

An input mask is a template that defines the format of valid input values. It contains the mask characters, which are characters that represent what kind of input can go in its place. And it contains literal characters which will be displayed as is. To add an input mask to a textbox using the Kendo UI MaskedTextBox component you only need to create a text input element and define the input mask in the mask property of the API. This is an example using social security numbers:

<input id="textbox">
<script>
  $(document).ready(function() {
    $('#textbox').kendoMaskedTextBox({
      mask: '000-00-0000'
    });
  });
</script>

When the user is focused in the text field, they will see placeholders for the input. By default, an underscore is used. The hyphens that we included in the format are literal characters and appear in the position we defined them to be. In our mask, a 0 means any digit between zero and nine is accepted. The user will not be able to enter any other characters and if they try to the field will be decorated with an error class. There are several other predefined rules for the mask. For example, L means letters can be used and A means letters and digits are accepted. If any of the predefined rules do not fit your needs, you can define custom validation rules in the rules property.

It is also worth mentioning how the mask behaves when editing the input. If you try to change a character after it has already been entered, the mask does not replace the character with the new input. Instead, it moves all of the characters that come after it to the right. If the social security number, 123-45-6789 has been entered into our masked text box and you later try to change the 1 to 0, the text box will show 012-34-5678.

Summary

Use input masks when your data has a fixed length and standard format. Each character of the input mask is a placeholder for user input. And each character the user enters will be validated client-side to ensure it matches the rules of the mask. This does not eliminate the need to do server-side validation. Rather, forcing the user to give you the input in a correct format makes you better equipped to process the data because you know what you are expecting.

The Kendo UI MaskedTextBox component lets you add input masks to any text input. Additionally, you can use regular expressions to create custom rules for each mask character. However, if your data varies in length and doesn't follow a single format (i.e. email addresses), you are better off using a text input and defining a regular expression pattern to validate the input. In the next post, you will look at the NumericTextBox which allows you to format data that is strictly numerical.

Try Out the MaskedTextBox for Yourself

Want to start taking advantage of the Kendo UI jQuery MaskedTextBox, or any of the other 70+ ready-made Kendo UI components, like Grid or Scheduler? You can begin a free trial of Kendo UI today and start developing your apps faster.

Start My Kendo UI Trial

Angular, React, and Vue Versions

Looking for a MaskedTextBox to support specific frameworks? Check out the MaskedTextBox for Angular, the MaskedTextBox for React, or the MaskedTextBox for Vue.

Resources

• MaskedTextBox API Reference
• MaskedTextBox Demo
• Kendo UI Web Font Icons
• More Kendo UI components
• Getting Started with Kendo UI Stylesheets
• Kendo UI Online Editor