We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<h4>Form Validation for Numeric TextBox</h4>
<form id="form-element">
<div>
<ejs-numerictextbox id="Numeric1" format="n0" change="onChange"></ejs-numerictextbox>
</div>
<div>
<ejs-numerictextbox id="Numeric2" format="n0" change="onChange"></ejs-numerictextbox>
</div>
<ejs-button type="button" id="submit_btn" content="submit"></ejs-button>
</form>
<script>
// sets required property in the FormValidator rules collection
var options = {
rules: {
'Numeric1': { required: [true, "Value is required"] },
'Numeric2': { max: [10, "Please enter a value minimum of 10"] },
},
};
// defines FormValidator to validate the MaskedTextBox
var formObject = new ej.inputs.FormValidator('#form-element', options);
// places error label outside the MaskedTextBox using the customPlacement event of FormValidator
formObject.customPlacement = function (element, errorElement) {
element.parentNode.parentNode.appendChild(errorElement);
};
document.getElementById("submit_btn").addEventListener('click', function () {
if (formObject.validate()) {
alert("Form is Submitted!!");
}
});
function onChange() {
formObject.validate();
}
</script> |
|
<div>
<h4>Numeric TextBox with Max property</h4>
<div>
<ejs-numerictextbox id="Numeric3" format="n0" max="5"></ejs-numerictextbox>
</div>
<div>
<ejs-numerictextbox id="Numeric4" format="n0" max="10"></ejs-numerictextbox>
</div>
</div> |
|
<form id="form-element">
<div>
<ejs-numerictextbox id="Numeric1" format="n0" change="onChange"></ejs-numerictextbox>
</div>
<div>
<ejs-numerictextbox id="Numeric2" format="n0"></ejs-numerictextbox>
</div>
<ejs-button type="button" id="submit_btn" content="submit"></ejs-button>
</form>
<script>
// sets required property in the FormValidator rules collection
var options = {
rules: {
'Numeric2': { max: [10, "Please enter a value minimum of 10"] },
},
};
// defines FormValidator to validate the MaskedTextBox
var formObject = new ej.inputs.FormValidator('#form-element', options);
// places error label outside the MaskedTextBox using the customPlacement event of FormValidator
formObject.customPlacement = function (element, errorElement) {
element.parentNode.parentNode.appendChild(errorElement);
};
document.getElementById("submit_btn").addEventListener('click', function () {
if (formObject.validate("Numeric2")) { // Validate the NumericTextbox name attribute is "Numeric2"
alert("Form is Submitted!!");
}
});
function onChange(args) {
document.getElementById("Numeric2").ej2_instances[0].max = args.value; // assign the first Numeric value to the second Numeric Max value.
formObject.validate("Numeric2"); // Vlaidate the second NumericTextBox
}
</script> |
