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

Forms are at the heart of most web applications. They collect everything from user registration details and payment information to search queries and feedback. However, building forms that are both user-friendly and reliable can be a challenging task. That's where Vue Input Mask and Vue Input Validation come in.

In this guide, we'll walk through creating a Vue Input Form step by step using Wijmo's InputMask component. Along the way, you'll learn how to enforce input formats, validate entries, and provide your users with a seamless data-entry experience.

We'll cover:

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

Ready to get started? Download Wijmo Today!

Let's get started!

Why Use Vue Input Mask and Validation

When users fill out a form, errors can happen: missing digits in a phone number, invalid credit card entries, or mistyped dates. Without clear guidance, this leads to frustration and support overhead.

That's why Wijmo's Vue InputMask control is so powerful. It provides a visual guide for how data should be entered. For example, typing a phone number automatically formats into (123) 456-7890.

But masking alone isn't enough. You also need input validation to ensure the data is not only in the proper format but also technically correct (e.g., not empty or within required rules).

Together, they create a polished Vue Input Form that feels intuitive for users and dependable for developers.

Step 1: Setting Up a Vue Input Form

To demonstrate, let's build a small Vue application with a form that collects:

• Name
• Phone number
• Credit card number
• Email address

We'll enhance each input with Vue Input Mask and Vue Input Validation using Wijmo's InputMask control.

The initial setup of our Vue component is as follows:

<div class="form-control">
  <div class="form-header">
    <span>User Information</span>
  </div>
  <form class="form-body" v-on:submit="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 Vue Input Masks

Now that the form has been created, it's time to add our InputMasks. To use Wijmo, we will need to add the library to our project. Open up your command prompt, navigate to where your project is stored, and run the following:

npm i @mescius/wijmo.vue2.all

Once NPM has installed all of the files, open up the App.vue file and import the following files inside of the <script> tags:

import '@grapecity/wijmo.styles/themes/wijmo.theme.material.css';
import * as wjcCore from '@grapecity/wijmo';
import * as wjcInput from '@grapecity/wijmo.vue2.input';

This loads in Wijmo's CSS styles, as well as Wijmo's core and input Vue module.

We'll also need to let Vue know about the component we'll be using, and the markup used to display the component:

export default {
  name: 'App',
  components: {
    'wj-input-mask': wjcInput.WjInputMask
  }
}

Now we can add the required Vue input masks. As mentioned previously, we'll be focusing on name, email, phone number, and social security number inputs:

<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>

Here, we're implementing four InputMasks: one for name, one for email, one for phone number, and one for social security number. We're also setting a placeholder value for each of the masks and tying them to references so we can access these controls inside our <script> tags.

The last thing that we'll need to do is add some CSS to style the 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 Vue Input Validation

Now let's ensure users don't submit incomplete data. In this sample, we want to define a mask and prompt characters for the phone number and social security number inputs. We're going to modify the markup for both of these InputMasks:

<wj-input-mask ref="phone" id="phone" :placeholder="'Phone Number'" :isRequired="true" :value="''" :valueChanged="validateMask"></wj-input-mask>
<wj-input-mask ref="social" id="social" :placeholder="'Social Security Number'" :isRequired="rtue" :value="''" :valueChanged="validateMask"></wj-input-mask>

Now, we need to set up the validateMask method to make sure that the value entered by the user is a valid input:

methods: {
  validateMask: function(ctrl) {
    wjcCore.toggleClasee(ctrl.hostElement, 'state-invalid', !ctrl.maskFull);
  }
}

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;
}

Now, when a user provides an invalid input, the error is flagged and the text is displayed in red.

Step 4: Customizing the Vue Input Form

Wijmo's InputMask also gives you flexibility to fine-tune the form experience.

• Prompt Characters – Change placeholders to match your design
• Raw Values – Access the unformatted input for processing (e.g., store 1234567890 instead of (123) 456-7890)
• Custom Masks – Define unique formats for IDs, postal codes, or custom business cases

For the social security and phone number fields, we'll add some customization so that users can see the format in which we want our fields entered:

<wj-input-mask ref="phone" id="phone" :mask="'000-000-0000'" :placeholder="'Phone Number'" :isRequired="true" :promptChar="'#'" :value="''" :valueChanged="validateMask"></wj-input-mask>
<wj-input-mask ref="social" id="social" :mask="'000-00-0000'" :placeholder="'Social Security Number'" :isRequired="true" :promptChar="'*'" :value="''" :valueChanged="validateMask"></wj-input-mask>

For each of these Vue 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 add a simple submitForm method to handle the collected data:

methods: {
  validateMask: function(ctrl) {
    wjcCore.toggleClasee(ctrl.hostElement, 'state-invalid', !ctrl.maskFull);
  }
  isFormComplete: function() {
    if(this.$refs.name.control.value !== '' && this.$refs.email.control.value !== '' && this.$refs.phone.control.maskFull && this.$refs.social.control.maskFull) {
      return true;
    }
    return false;
  }
  onSubmit: function() {
    if(this.isFormComplete()) {
      // Display user info on form submission
      alert('User Information:\nName: ' + this.$refs.name.control.value + 
      '\nEmail: ' + this.$refs.email.control.value + '\nPhone Number: ' + this.$refs.phone.control.value + 
      '\nSSN: ' + this.$refs.social.control.value);
    }
  }
}

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 Vue InputMask control. For more information, check out our demos, documentation, and API references for developers.

If you'd like to download the project for yourself, you can find it on GitHub or see it running on JS CodeMine.

Happy coding!