Perform custom validation using form validator in EJ2 TypeScript Numerictextbox control

15 May 20236 minutes to read

This section explains how to perform custom validation on the NumericTextBox using FormValidator. The NumericTextBox will be validated when the value changes or the user clicks the submit button. Validation can be performed by adding custom validation in the rules collection of the FormValidator.

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

// initializes the NumericTextBox component
let numeric: NumericTextBox = new NumericTextBox({
    min: 10,
    max: 100,
    strictMode : false,
    placeholder: 'NumericTextbox',
    floatLabelType: 'Always',
    change: function(args){
        if (numeric.value != null)
            formObject.validate("numericRange");
        }
});

numeric.appendTo('#numeric1');

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

// checks the value of NumericTextbox and returns the corresponding boolean value
let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
    if(numeric.value>=10 && numeric.value<=100) {
        return true;
    }
    else {
        return false;
    }
};

// sets required property in the FormValidator rules collection
let options: FormValidatorModel = {
    rules: {
            'numericRange': { required: [true, "Number is required"] },
            }
}
// defines FormValidator to validate the NumericTextBox
let formObject: FormValidator = new FormValidator('#form-element', options);

//rules for validating the NumericTextbox
 formObject.addRules('numericRange', { range: [customFn, "Please enter a number between 10 to 100"] });

// places error label outside the NumericTextBox using the customPlacement event of FormValidator
let customPlace: (element: HTMLElement, error: HTMLElement) => void = (element: HTMLElement, error: HTMLElement) => {
    element.parentNode.parentNode.appendChild(error);
};

formObject.customPlacement = customPlace;

let submitBtn: HTMLInputElement = <HTMLInputElement>document.getElementById('submit_btn');

submitBtn.onclick = () => {
    // validates the NumericTextBox
    formObject.validate("numericRange");
    let ele: HTMLInputElement = <HTMLInputElement>document.getElementById('numeric1');
    // checks for incomplete value and alerts the formt submit
    if (ele.value !== "" && ele.value >=10 && ele.value<=100) {
       alert("Submitted");
     }
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="TypeScript NumericTextBox 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://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">
                    <input id="numeric1" type="text" name="numericRange"   class="form-control" />
                    <div id="error"></div>
                    <button type="button" id="submit_btn" style="margin-top: 10px">Submit</button>
                </div>
            </form>
        </div>
    </div>

<style>
    .e-numeric.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;
  padding-top:100px;
}