Perform custom validation using form validator in EJ2 TypeScript Maskedtextbox control

15 May 20237 minutes to read

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.

import { MaskedTextBox } from '@syncfusion/ej2-inputs';
import { Button } from '@syncfusion/ej2-buttons';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';

// initializes the MaskedTextBox component
let mask: MaskedTextBox = new MaskedTextBox({
    // sets mask format to the MaskedTextBox
    mask: '000-000-0000',
    placeholder: 'Mobile Number',
    floatLabelType: 'Always'
});

mask.appendTo('#mask1');

//initialize button
let button: Button = new Button();
button.appendTo('#submit_btn');

// checks the length of mask value and returns corresponding boolean value
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
    let argsLength:number = args.element.ej2_instances[0].value.length;
    if(argsLength != 0) {
        return argsLength >= 10;
    } else {
        return true;
    }
};

//value is returned based on the length of mask
let custom: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
    let argsLength:number = args.element.ej2_instances[0].value.length;
    if(argsLength == 0) {
        return 0;
    } else {
        return argsLength;
    }
};

// sets required property in the FormValidator rules collection
let options: FormValidatorModel = {
    rules: {
        'mask_value': { numberValue: [customFn, 'Enter valid mobile number'] },
    },
}

// defines FormValidator to validate the MaskedTextBox
let formObject: FormValidator = new FormValidator('#form-element', options);

//FormValidator rule is added for empty MaskedTextBox
formObject.addRules('mask_value', { maxLength: [custom, 'Enter mobile number'] });

// places error label outside the MaskedTextBox using the customPlacement event of FormValidator
let customPlace: (element: HTMLElement, error: HTMLElement) => void = (element: HTMLElement, error: HTMLElement) => {
    document.querySelector(".form-group").appendChild(error);
};

formObject.customPlacement = customPlace;

document.getElementById('submit_btn').onclick = () => {
    // validates the MaskedTextBox
    formObject.validate("mask_value");
    let ele: HTMLInputElement = <HTMLInputElement>document.getElementById('mask1');
    // checks for incomplete value and alerts the format submit
    if (ele.value !== "" && ele.value.indexOf(mask.promptChar) === -1) {
        alert("Submitted");
    }
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 MaskedTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript MaskedTextBox Component With Form Validation" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
        <div id='container'>
            <div class='wrap'>
                <form id="form-element" class="form-horizontal">
                    <div class="form-group">
                        <br/><div><input id="mask1" type="text" name="mask_value" class="form-control" /></div>
                        <button type="button" id="submit_btn" style="margin-top: 10px">Submit</button>
                    </div>
                </form>
            </div>
        </div>
<style>
.e-mask.e-control-wrapper {
    margin-bottom: 20px;
}

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

</body>

</html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 240px;
}