5

I'm trying to add some of the predefined validation to a form element but currently am failing. As fas as I can tell, all the validation rules can be added via classes, but no where does it say how to set paramaters for some of the rules. IE: max length.

Here's what I currently have that is not working (I've stripped out some of the non-pertinent attributes. I'm trying to set a minimum of 7 characters on the input.

<input name="telephone" id="telephone" data-validate="{required:true}" class="validate-length minimum-length-7 maximum-length-20 input-text" type="text" />

Thanks for your help

9

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>
  • Superbe. I'll give that a go in the morning. Thanks – Valguss Dec 19 '16 at 20:27
  • So just tested this and the field is being set as valid , even if I just put 1 number in the field. If i remove the extra validation setting and leave it as {required:true} then it works as expected. – Valguss Dec 20 '16 at 13:32
  • Just re-read my comment and realised that it makes it sound like it's working. {required: true} works as expected but the min/max dosen't – Valguss Dec 21 '16 at 11:03
  • So just tried this using hte blank theme and still no joy. – Valguss Jan 3 '17 at 11:04
  • 2
    OK the above code given does work, but for people still encountering issues, there is a bug in lib/web/mage/validation.js: line 1143: if (name.match(reMin) && result && !$.mage.isEmpty(v)) {should be if (name.match(reMin) && result && !$.mage.isEmpty(v)) {. Notice the ! – Valguss Jan 3 '17 at 11:19
0

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: johndoe@domain.com).'
'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.'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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