magento 2.4 system.xml validate decimal number

Question

I have an input type text field in my system.xml . I'd like this field to be validated in a way that the user can put numbers (0 to 9) and dots but not commas nor any other symbol.

In magento, I have the class "validate-number", that doesn't discriminate against commas versus dots. Same for "validate-digits": with this one, I can only put numbers, not dots.

Is there a way to validate decimal numbers with only dots as decimal separator?

Answer 1

Follow below steps to add Custom Validation To System Configuration Field

1.add a field on system.xml file

<field id="your_field_id" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Your Field Label</label>
    <validate>validate-number-and-dot</validate>
</field>

2.Create requirejs-config file requirejs-config.js in app/code/Vendor/Module/view/adminhtml folder with the following code.

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Vendor_Module/js/validation': true
            }
        }
    }
};

3.Create js file validation.js in app/code/Vendor/Module/view/adminhtml/web/js folder with the following code.

define([
    'jquery'
], function ($) {
    'use strict';
    return function (target) {
        $.validator.addMethod(
            'validate-number-and-dot',
            function (value) {
                return /^[0-9.]+$/.test(value);
            },
            $.mage.__('"Please enter numbers (0-9) and dots (.) only."')
        );
        return target;
    };
});