Perform custom validation using form validator in EJ2 JavaScript Maskedtextbox control

15 May 20236 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.

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

mask.appendTo('#mask1');

//initialize button
var button = new ej.buttons.Button();
button.appendTo('#submit_btn')

// checks the length of mask value and returns corresponding boolean value 
var customFn = function(args) {
    var argsLength = 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 
var custom = function(args) {
    var argsLength = args.element.ej2_instances[0].value.length;
    if(argsLength == 0){
    return 0; 
    } else {
        return argsLength;
    }
};

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

// defines FormValidator to validate the MaskedTextBox
var formObject =  new ej.inputs.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

formObject.customPlacement =  function(element, error) {
    document.querySelector(".form-group").appendChild(error);
};

document.getElementById('submit_btn').onclick = function () {
    // validates the MaskedTextBox
    formObject.validate("mask_value");
    var ele = document.getElementById('mask1');
    // checks for incomplete value and alerts the formt 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.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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



<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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;
}