How to set up input validation for a Blazor Numeric Textbox?

This article provides a guide on how to implement input validation for a Blazor Numeric TextBox. The goal is to restrict the user from entering a number greater than 12 digits and to allow only up to two decimal places.

Adding Validation to NumericTextBox

To achieve the desired validation, we will use the SfNumericTextBox component and handle the input validation in the keypress event. Below is the implementation in the Blazor component and the associated JavaScript file.

<SfNumericTextBox ID="Numeric">
    <NumericTextBoxEvents TValue="double?" Created="@CreatedHandler"></NumericTextBoxEvents>
</SfNumericTextBox>
<span id="status" />
@code {
    [Inject]
    IJSRuntime JsRuntime { get; set; }

    protected async void CreatedHandler(Object args)
    {
        await JsRuntime.InvokeVoidAsync("create", "Numeric");
    }
}

JavaScript for Validation

window.create = function (id) {
    const inputElement = document.getElementById(id);
    const statusElement = document.getElementById('status');
    const maxNumber = 999999999999.99;
    const maxDecimalPlaces = 2;
    inputElement.addEventListener("keypress", function (event) {
        const inputValue = inputElement.value;
        const keyCode = event.keyCode; // Get the character code of the input
        const fullNumber = Number(inputValue + String.fromCharCode(keyCode));
        var decimal = fullNumber.toString().split('.')[1];
        var decimalPlaces = decimal ? decimal.length : 0;
        if ((keyCode < 48 || keyCode > 57) && keyCode != 46) {
            showError("Invalid key pressed " + event.data, event);
            return;
        }
        if (fullNumber > maxNumber || Number(decimalPlaces) > maxDecimalPlaces) {
            let errorMessage = "";
            if (fullNumber > maxNumber) {
                errorMessage = "Number " + fullNumber + " is greater than " + maxNumber;
            } else {
                errorMessage = "Number " + fullNumber + " has more than " + maxDecimalPlaces + " decimal places";
            }
            showError(errorMessage, event);
            return;
        }
        clearError();
    });
    function showError(message, event) {
        statusElement.textContent = message;
        statusElement.className = "errored";
        event.preventDefault();
    }
    function clearError() {
        statusElement.textContent = "";
        statusElement.className = "";
    }
};

Ensure that the JavaScript file is included in your host page.

<script src="~/create.js"></script>

The JavaScript function create is invoked when the SfNumericTextBox is created. It adds an event listener to the textbox for the keypress event. The validation logic checks if the entered key is a number or a decimal point, if the resulting number exceeds the maximum allowed value, and if the number of decimal places is within the allowed limit. If any of these conditions are not met, an error message is displayed and the input is prevented.

Sample

A working sample of the implementation can be found attached below

Conclusion

I hope you enjoyed learning about how to set up input validation for a Blazor Numeric Textbox.

You can refer to our Blazor Numeric Textbox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Numeric Textbox example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!