3

In my system.xml, I have these two fields enter image description here

I want frontend validation between these two fields. So that maximum days can not be less than minimum days.

<field id="deliverydays" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
      <label>Minimum days</label>
      <frontend_class>validate-number validate-digits reminder-greater validate-greater-than-zero</frontend_class>
</field>

<field id="maximumdeliverydays" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
    <label>Maximum days</label>
    <frontend_class>validate-number validate-digits reminder-greater validate-greater-than-zero</frontend_class>
    <backend_model>Vendor\Module\Model\System\Config\Backend\MaximumInterval</backend_model>
</field>

I applied backend model and checked value of maximum days against minimum days. Which works fine.

But I don't know how to apply frontend validation here.

Improve this question

1 Answer 1

Reset to default
2

As per I know you need to add your custom validation class in jQuery validator and you are doing this in system configuration so , you can add a new layout file in your module with the name of adminhtml_system_config_edit.xml in below path,

YOUR_VENDOR/YOUR_MODULE_NAME/view/adminhtml/layout/adminhtml_system_config_edit.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="YOUR_VENDOR_YOUR_MODULE_NAME::js/custom-validatior.js"/>
    </head>
</page>

now, create your new javascript file in below path,

YOUR_VENDOR/YOUR_MODULE_NAME/view/adminhtml/web/js/custom-validatior.js

require([
    'jquery',
    'mage/translate',
    'jquery/validate'],
    function($){
        $.validator.addMethod(
            'validate-max-min-check', function (value) {
               // do your logic here 
            }, $.mage.__('YOUR_VALIDATION_MESSAGE'));
    }
);

Last, add your custom class name ion system.xml

<validate>validate-max-min-check</validate>

And use it for your field in system.xml:

// do your logic here in this place add your logic for comparison for your value, and I think you can easily get the Id of your both text box by just Inspecting element

Improve this answer
1
  • you are great man, you never wrong :)
    – Rakesh Jesadiya
    May 26, 2017 at 11:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.