Magento2 – Change Max Limit of Attribute Based on Unit

form-validationmagento2

I have a unit length that accept entering cm, inch and ft. I know how to set-up the input validation in one limit. Let say, I want to have max limit to 100cm. I can set the field validation to the following:

<input name="length" type="text" data-validate="{required:true, max:100}" />

And let say, I have a select field that contain the unit of length:

<select name="unit">
    <option value="cm">cm</option>
    <option value="inch">inch</option>
    <option value="ft">ft</option>
</select>

The problem is: If I enter 100ft or 100inch, the validation still pass. How can I adjust the max value when I switch the unit? So that 100ft or 100inch cannot pass the validation.

Best Answer

Finally it's just the matter of JS. First of all, modify the select list a bit:

<select name="unit">
    <option value="cm" data-conversion="0.03280840">cm</option>
    <option value="inch"data-conversion="0.08333333">inch</option>
    <option value="ft" data-conversion="1.00000000">ft</option>
</select>

Then, write the following JS. You can load it right under the select list, or via requirejs:

<script type="text/javascript">
    require([
        'jquery',
        'mage/mage'
    ], function($){
        //Change the value depends on the size unit        
        $("select[name='unit']").change(function () {
            var selected = $(this).find('option:selected');
            curr_price = selected.data("conversion");
            curr_max = $('input[name="length]"').rules("max");
            cm_price = $('option[value=cm]').data("price");
            new_max_range = curr_max * cm_price / curr_price;
            $('input[name="length]"').rules("remove", "max");
            $('input[name="productoptions[<?php echo $option->getOptionCode() ?>]"').rules("add", {
                    max: new_max_range
            });
        });
    });
</script>

I just solved it long time ago, but forgot to answer it till now.

Related Solutions

Magento – How to Validate Checkbox in Magento

So it appears there is a problem with how Varien_Data_Form_Element_Checkboxes works with classes.

When you look into the method _optionToHtml, which is where the options are built, you will see that it loops through all the html attributes and then performs a call to getDataUsingMethod. This function will, for class, end up calling $this->getClass($args) which returns null :(

But if you add the method getClass into the Varien_Dat_Form_Element_Checkboxes class then it will work.

public function getClass($args=null)
{
    return parent::getClass();
}

You can see that the checkboxes class already has this sort of thing for getDisabled, getOnClick which gets the value stored against the requested checkbox name.

Magento2 Form Validation – Minimum and Maximum Length

Your code is totally right.

Both minimum and maximum need to be set with minimum-length-[0-9]+$ and maximum-length-[0-9]+$

What you are missing is to update the data-validate attribute by replacing:

{required:true}

With:

{required:true, 'validate-length':true}

Also you'll have to ensure that your custom form is validated via JavaScript with one of the following methods:

Direct JS

<script type="text/x-magento-init">
    {
        "#id-of-your-form": {
            "validation": {}
        }
    }
</script>

HTML attribute

By adding the following attribute to your form tag:

data-mage-init='{"validation": {}}'

Using RequireJS

<script type="text/javascript">
require([
    'jquery',
    'mage/mage'
], function($){

   var dataForm = $('#id-of-your-form');
   dataForm.mage('validation', {});

});
</script>