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.
// initializes the NumericTextBox component
var numeric = new ej.inputs.NumericTextBox({
// sets value to the NumericTextBox
value: 15,
min: 10,
max: 100,
strictMode : false,
placeholder: 'NumericTextbox',
floatLabelType: 'Always',
change: function(args){
if (numeric.value != null)
formObject.validate("numericRange");
}
});
numeric.appendTo('#numeric1');
//initialize button
var button = new ej.buttons.Button();
button.appendTo('#submit_btn')
// checks the value of NumericTextbox and returns the corresponding boolean value
var customFn = function(args) {
if (numeric.value>=10 && numeric.value<=100) {
return true;
}
else {
return false;
}
};
// sets required property in the FormValidator rules collection
var options = {
rules: {
'numericRange': {required: [true, "Number is required"]},
}
}
// defines FormValidator to validate the NumericTextBox
var formObject = new ej.inputs.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
var customPlace= function(element, error) {
element.parentNode.parentNode.appendChild(error);
};
formObject.customPlacement = customPlace;
var submitBtn = document.getElementById('submit_btn');
submitBtn.onclick = function () {
// validates the NumericTextBox
formObject.validate("numericRange");
var ele = 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="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet">
<link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/20.4.48/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<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>
<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;
padding-top:100px;
}