Add Vue Input Form Mask & Validation Features to Your Web App
Tags: javascript, webdev, vue, tutorial
Published: 2022-08-19 21:18:31

---
canonical_url: https://developer.mescius.com/blogs/add-vue-input-mask-and-validation-features-to-your-web-app
description: Learn how to add Vue input form mask & validation features to your web application. See more from Wijmo today.
---

Form elements are a common way to collect information that your website requires from users. They typically consist of <input> elements, checkboxes, radio buttons, and a button for users to submit the information they entered. However, standard <input> elements allow users to enter whatever they want, and if you want to standardize the information they entered, it’s on the developers to implement that functionality.

That is where the InputMask comes in; Wijmo’s Vue InputMask control allows developers to implement masks and predefined formats for the input field easily. This will enable you to restrict the number of characters that users can enter in the mask, the prompt characters displayed in the control, and whether the control allows users to enter numbers, letters, or both.

In this article, we’ll be outlining the following steps:

*   [Creating a Vue Form](#create)
*   [Implementing Wijmo’s Vue InputMask](#implement)
*   [Defining the Mask and Prompt Characters](#define)
*   [Validating the User’s Information](#validate)

If you’d like to download the project for yourself, you can [find it on GitHub](https://github.com/joel-patrick-parks/InputMask-Form-Vue) or see it [running on JS CodeMine](https://jscodemine.grapecity.com/share/lNKf0ZBniUixP7s3KA821w/?IsEmbed=true&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen=%7B%22OpenedFileName%22%3A%5B%22%2Findex.html%22%2C%22%2Fsrc%2Fapp.vue%22%5D%2C%22ActiveFile%22%3A%22%2Fsrc%2Fapp.vue%22%7D).

### <a id="create"></a>Creating a Vue Form

The first thing that we’ll go over is creating the Vue form. Open up the **App.vue** file and add the following markup for the form to the HTML template:

```
    <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’re using a form to aggregate the data from the user and Vue’s **v-on:submit** directive to handle when the form gets submitted.

The other thing that we’ll do in this section is add styles for the form. Inside of the < style > tags of the **App.vue** file and add the following CSS:

```
    .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:

![Vue](//cdn.mescius.io/umb/media/gcqnypns/01-vue.png?width=500&height=371.81996086105676)

### <a id="implement"></a>Implementing Wijmo’s Vue InputMask

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 @grapecity/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
      }
    }
```

With all of that done, we can now make use of Wijmo’s Vue InputMask. Jump back up to the < template > and add the following markup inside of the < form > element:

```
    <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 4 InputMasks; one for name, email, phone number, and social security number. We’re also setting a placeholder value for each of the masks, and we’re 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:

![Vue](//cdn.mescius.io/umb/media/b55f15fq/02-vue.png?width=486&height=376)

### <a id="define"></a>Defining the Mask and Prompt Characters

Now that we’ve implemented the InputMasks, we’ll review how to set the mask and prompt characters for the controls. 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" :mask="'000-000-0000'" :placeholder="'Phone Number'" :isRequired="false" :promptChar="'#'" :value="''"></wj-input-mask>
    <wj-input-mask ref="social" id="social" :mask="'000-00-0000'" :placeholder="'Social Security Number'" :isRequired="false" :promptChar="'*'" :value="''"></wj-input-mask>
```

By using number characters in the **mask** property, we’re telling the InputMask that we only want to accept numbers when typing in the control and how many characters we require the user to input. Setting the **prompChar** property tells the control what character we want to show for the values we still require input for.

And finally, setting the isRequired and value properties will allow our placeholder to continue to display instead of defaulting to displaying the prompt characters. Now, if we run the application and begin typing in either the phone or social InputMask, we should see the following:

![Vue](//cdn.mescius.io/umb/media/vu4ncwxn/03-vue.png?width=474&height=369)

As you can see, when we type in either of those InputMasks, it will display the prompt character for the remaining characters that the control expects.

### <a id="validate"></a>Validating the User’s Information

The last thing we’ll discuss in this article is how we can validate the user’s information. In the case of this form, we want them to enter information in the “Name” and “Email” InputMasks, and we want to make sure that the “Phone Number” and “Social Security Number” InputMasks have been filled out.

We’ll first ensure that users know that the last two InputMasks must be completely filled out. We’ll use Wijmo’s Vue InputMask valueChanged event to do that. Inside of the markup, add the event to the control:

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

Now, inside the component, we’ll implement the following method:

```
    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, then 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, as we type in the “Phone Number” or “Social Security Number” InputMasks, we’ll see the following:

![Vue](//cdn.mescius.io/umb/media/vmnbmmp5/04-vue.png?width=473&height=365)

As you can see, if the mask has not been filled out completely, the text will display as red.

Next, we’ll add a method to check and see if the user has filled out all of the InputMasks, as well as update the onSubmit() method to determine whether or not to submit the form:

```
    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 InputMasks, we’ll see the following alert:

![Vue](//cdn.mescius.io/umb/media/3koa5sgv/05-vue.png?width=437&height=199)

### Conclusion

As you can see, you can easily build forms using Wijmo’s Vue InputMask control. If you'd like more information, we've got [demos](https://developer.mescius.com/wijmo/demos/Input/InputMask/Overview/vue), [documentation](https://developer.mescius.com/wijmo/docs/Topics/Input/InputMask/InputMask), and [API references](https://developer.mescius.com/wijmo/api/classes/wijmo_input.inputmask.html) for developers.

If you’d like to download the project for yourself, you can [find it on GitHub](https://github.com/joel-patrick-parks/InputMask-Form-Vue) or see it [running on JS CodeMine](https://jscodemine.grapecity.com/share/lNKf0ZBniUixP7s3KA821w/?IsEmbed=true&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen=%7B%22OpenedFileName%22%3A%5B%22%2Findex.html%22%2C%22%2Fsrc%2Fapp.vue%22%5D%2C%22ActiveFile%22%3A%22%2Fsrc%2Fapp.vue%22%7D).

Happy coding!