Search results

How To

Perform custom validation on MaskedTextBox using FormValidator

To perform custom validation on the MaskedTextBox use the FormValidator along with custom validation rules.

In the following example, the MaskedTextBox is validated for invalid mobile number by adding custom validation in the rules collection of the FormValidator.

Source
Preview
app.vue
<template>
  <div id="app">
    <div class='wrap'>
      <form id="form-element" class="form-horizontal">
        <div class="form-group">
          <ejs-maskedtextbox id="mask" type="text" name="mask" class="form-control" mask='000-000-0000' placeholder='Mobile Number' floatLabelType='Always'></ejs-maskedtextbox>
          <button type="button" id="submit_btn" style="margin-top: 10px" v-on:click="onClick">Submit</button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { MaskedTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';

Vue.use(MaskedTextBoxPlugin);
export default {
  data () {
    return {}
  },
  mounted: function() {
    var customFn = function (args) {
        if (args.element.ej2_instances[0].value.length !== 0) {
          return args.element.ej2_instances[0].value.length >= 10; }
          else {
            return true;
        }
      };
      var custom = function (args) {
        if (args.element.ej2_instances[0].value.length === 0) {
          return 0;
        }
        else {
          return args.element.ej2_instances[0].value.length;
        }
          //return args.element.ej2_instances[0].value.length === 0;
      };
      // sets required property in the FormValidator rules collection
      var options = {
          rules: {
              'mask': { numberValue: [customFn, 'Enter valid mobile number'] },
          },
      };
      // defines FormValidator to validate the MaskedTextBox
       this.formObject = new FormValidator('#form-element', options);
      this.formObject.addRules('mask', { maxLength: [custom, 'Enter mobile number'] });
      // places error label outside the MaskedTextBox using the customPlacement event of FormValidator
      this.formObject.customPlacement = function (element, errorElement) {
document.querySelector(".form-group").appendChild(errorElement);
};
  },
  methods: {
    onClick: function (event) {
      this.formObject.validate("mask");
      var ele = document.getElementById('mask');
      // checks for incomplete value and alerts the format submit
      if (ele.value !== "" && ele.value.indexOf(mask.ej2_instances[0].promptChar) === -1) {
            alert("Submitted");
      }
    }
  }

}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .wrap {
    margin: 0 auto;
    width: 240px;
}

.e-mask.e-control-wrapper {
  margin-bottom: 20px;
}

label.e-error {
  margin-top: -42px;
}
</style>

Setting cursor position in MaskedTextBox

By default, on focusing the MaskedTextBox the entire mask gets selected. You can customize by using any one of the following methods:

  • Setting cursor position at the start of the MaskedTextBox.
  • Setting cursor position at the end of the MaskedTextBox.
  • Setting cursor at the specified position in the MaskedTextBox.

Following is an example that demonstrates the above cases to set cursor position in the MaskedTextBox using focus event.

Source
Preview
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-maskedtextbox mask='00000-00000' value='93828-32132' placeholder='Default cursor position' floatLabelType='Always'></ejs-maskedtextbox>
        </div>
        <div class='wrap'>
            <ejs-maskedtextbox mask='00000-00000' value='83929-43427' placeholder='Cursor positioned at start' floatLabelType='Always' :focus='focus'></ejs-maskedtextbox>
        </div>
        <div class='wrap'>
            <ejs-maskedtextbox mask='00000-00000' value='83929-32131' placeholder='Cursor positioned at end' floatLabelType='Always' :focus='endfocus'></ejs-maskedtextbox>
        </div>
        <div class='wrap'>
            <ejs-maskedtextbox mask='+1 000-000-0000' value='234-432-4324' placeholder='Cursor at specified position' floatLabelType='Always' :focus='specifiedfocus'></ejs-maskedtextbox>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { MaskedTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";

Vue.use(MaskedTextBoxPlugin);
export default {
  data () {
    return {}
  },
  methods: {
      focus: function(args) {
           args.selectionEnd= args.selectionStart;
      } ,
      endfocus: function(args){
          args.selectionStart=args.selectionEnd;
      },
      specifiedfocus: function(args){
          args.selectionStart = 3;
          args.selectionEnd = 3;
      }
    }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .wrap {
  margin: 20px auto;
  width: 240px;
}

.e-widget {
  padding-bottom: 12px;
}
</style>

Display numeric keypad in MaskedTextBox for mobile devices

By default, on focusing the MaskedTextBox, alphanumeric keypad will be displayed on mobile devices. Sometimes only numeric keypad for number values is needed, and this can be achieved by setting “type” property to tel. Refer to the following example to enable numeric keypad in MaskedTextBox.

Source
Preview
app.vue
<template>
  <div id="app">
    <div class='wrap'>
        <ejs-maskedtextbox type='tel' class='form-control' mask='999-99999' value='342-45432'></ejs-maskedtextbox>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { MaskedTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";

Vue.use(MaskedTextBoxPlugin);
export default {
  data () {
    return {}
  },
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .wrap {
    margin: 0 auto;
    width: 240px;
}
</style>

Change the appearance of MaskedTextBox

The appearance of the MaskedTextBox can be changed by adding custom cssClass to the component and enabling styles. Refer to the following example to change the appearance of the MaskedTextBox.

Source
Preview
app.vue
<template>
  <div id="app">
    <div class='wrap'>
        <ejs-maskedtextbox mask='00000' value='42648' placeholder='Enter User ID' cssClass='e-style' floatLabelType='Always' :focus='focus'></ejs-maskedtextbox>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { MaskedTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";

Vue.use(MaskedTextBoxPlugin);
export default {
  data () {
    return {}
  },
  methods: {
      focus: function(args) {
           args.selectionEnd = args.selectionStart;
           }
    }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
.wrap {
    margin: 0 auto;
    width: 240px;
}
.e-widget.e-mask.e-style .e-control.e-maskedtextbox {
  color: #00ffff ;
  letter-spacing: 10px ;
  font-size: xx-large ;
  border: 1px ;
  border-color: #ffffff ;
}

.e-widget.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::before {
  background: #ffffff ;
}

.e-widget.e-control-wrapper.e-mask.e-float-input.e-style .e-float-line::after {
  background: #ffffff ;
}

.e-widget.e-control-wrapper.e-mask.e-float-input.e-style .e-float-text.e-label-top {
  color: #00ffff ;
  font-size: medium ;
}
</style>