Magento 2 form validation: minimum/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>
You can easy change the validation rules for an input via XML.
In your case let's say you want to add min max length to the shipping address form in the checkout. What you need to do is extend the checkout_index_index.xml in your theme like so: app/design/frontend/...../..../Magento_Checkout/layout/checkout_index_index.xml
Then inside it address the item that you want to add validation rules like so:
<?xml version="1.0"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body>
<referenceBlock name="checkout.root">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="checkout" xsi:type="array">
<item name="children" xsi:type="array">
<item name="steps" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shipping-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="shippingAddress" xsi:type="array">
<item name="children" xsi:type="array">
<!-- To affect the shipping address fields -->
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="company" xsi:type="array">
<item name="telephone" xsi:type="array">
<!-- Classes for data validation: -->
<item name="max_text_length" xsi:type="number">7</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
Here is a list of all available magento2 validations that you can use on these form inputs (added as well the text error magento will show so it can help in understanding what they do):
'validate-no-html-tags', 'HTML tags are not allowed'
'validate-select', 'Please select an option.'
'required-entry', 'This is a required field.'
'validate-number', 'Please enter a valid number in this field.'
'validate-number-range', 'The value is not within the specified range.'
'validate-digits', 'Please use numbers only in this field. Please avoid spaces or other characters such as dots or commas.'
'validate-digits-range', 'The value is not within the specified range.'
'validate-range', 'The value is not within the specified range.'
'validate-alpha', 'Please use letters only (a-z or A-Z) in this field.'
'validate-code', 'Please use only letters (a-z), numbers (0-9) or underscore (_) in this field, and the first character should be a letter.'
'validate-alphanum', 'Please use only letters (a-z or A-Z) or numbers (0-9) in this field. No spaces or other characters are allowed.'
'validate-alphanum-with-spaces', 'Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field.'
'validate-street', 'Please use only letters (a-z or A-Z), numbers (0-9), spaces and "#" in this field.'
'validate-phoneStrict', 'Please enter a valid phone number (Ex: 123-456-7890).'
'validate-phoneLax', 'Please enter a valid phone number (Ex: 123-456-7890).'
'validate-fax', 'Please enter a valid fax number (Ex: 123-456-7890).'
'validate-date', 'Please enter a valid date.'
'validate-date-range', 'Make sure the To Date is later than or the same as the From Date.'
'validate-email', 'Please enter a valid email address (Ex: [email protected]).'
'validate-emailSender', 'Please use only visible characters and spaces.'
'validate-password', 'Please enter 6 or more characters. Leading and trailing spaces will be ignored.'
'validate-admin-password', 'Please enter 7 or more characters, using both numeric and alphabetic.'
'validate-cpassword', 'Please make sure your passwords match.'
'validate-both-passwords', 'Please make sure your passwords match.'
'validate-url', 'Please enter a valid URL. Protocol is required (http://, https:// or ftp://)'
'validate-clean-url', 'Please enter a valid URL (Ex: "http://www.example.com" or "www.example.com").'
'validate-identifier', 'Please enter a valid URL Key (Ex: "example-page", "example-page.html" or "anotherlevel/example-page").'
'validate-xml-identifier', 'Please enter a valid XML-identifier (Ex: something_1, block5, id-4).'
'validate-ssn', 'Please enter a valid social security number (Ex: 123-45-6789).'
'validate-zip-us', 'Please enter a valid zip code (Ex: 90602 or 90602-1234).'
'validate-zip-international', 'Please enter a valid zip code.'
'validate-date-au', 'Please use this date format: dd/mm/yyyy (Ex: "17/03/2006" for the 17th of March, 2006).'
'validate-currency-dollar', 'Please enter a valid $ amount (Ex: $100.00).'
'validate-one-required', 'Please select one of the options above.'
'validate-one-required-by-name', 'Please select one of the options.'
'validate-not-negative-number', 'Please enter a number 0 or greater in this field.'
'validate-zero-or-greater', 'Please enter a number 0 or greater in this field.'
'validate-greater-than-zero', 'Please enter a number greater than 0 in this field.'
'validate-state', 'Please select State/Province.'
'validate-new-password', 'Please enter 6 or more characters. Leading and trailing spaces will be ignored.'
'validate-cc-number', 'Please enter a valid credit card number.'
'validate-cc-type', 'Credit card number does not match credit card type.'
'validate-cc-type-select', 'Card type does not match credit card number.'
'validate-cc-exp', 'Incorrect credit card expiration date.'
'validate-cc-cvn', 'Please enter a valid credit card verification number.'
'validate-data', 'Please use only letters (a-z or A-Z), numbers (0-9) or underscore (_) in this field, and the first character should be a letter.'
'validate-css-length', 'Please input a valid CSS-length (Ex: 100px, 77pt, 20em, .5ex or 50%).'
'validate-length', 'Text length does not meet the specified text range.'
'validate-percents', 'Please enter a number lower than 100.'
'required-file', 'Please select a file.'
'validate-cc-ukss', 'Please enter issue number or start date for switch/solo card type.'