Magento 2 How to add validation to “street” in checkout address form?Magento 2 - How to affect street address in checkout forms with layout xml/ui argumentsMagento 2 - How to use pattern validationHow can i rewrite TierPrice Block in Magento2Validation error in checkout page shipping addressmagento 2 captcha not rendering if I override layout xmlAdd html attribute in checkout street addressAddress validation in magento 2 checkout page and address bookMagento 2 Checkout billing address validation messageCheckout page street address filed custom validationMagento 2 how to add extra validation to new Billing address form fields in checkout pageHow to remove validation from the “City” and “Street Address” Field on Customer Registration Page?Shipping address, add new address form validation in checkout page
What is this Amiga 2000 mod?
Should I list a completely different profession in my technical resume?
Make Gimbap cutter
Suppose leased car is totalled: what are financial implications?
Why are Payments from Apple to New Zealand and Australian bank accounts wire transfers?
Why did Robert pick unworthy men for the White Cloaks?
Why is it bad to use your whole foot in rock climbing
Parsing text written the millitext font
Can you open the door or die?
Labels still showing when no Label Features turned on in ArcMap?
What does "lit." mean in boiling point or melting point specification?
In Pandemic, why take the extra step of eradicating a disease after you've cured it?
Why do the TIE Fighter pilot helmets have similar ridges as the rebels?
How do I type a hyphen in iOS 12?
Why do I seem to lose data using this bash pipe construction?
Why do (or did, until very recently) aircraft transponders wait to be interrogated before broadcasting beacon signals?
Placement of positioning lights on A320 winglets
How much web presence should I have?
What is the logic behind charging tax _in the form of money_ for owning property when the property does not produce money?
Mathematica 12 has gotten worse at solving simple equations?
How to change the headfont of newtheorem environments to match komascript font?
Swapping High voltage breakers; change 50amp to 40amp
Is it advisable to add a location heads-up when a scene changes in a novel?
Lowest Magnitude Eigenvalues of Large Sparse Matrices
Magento 2 How to add validation to “street” in checkout address form?
Magento 2 - How to affect street address in checkout forms with layout xml/ui argumentsMagento 2 - How to use pattern validationHow can i rewrite TierPrice Block in Magento2Validation error in checkout page shipping addressmagento 2 captcha not rendering if I override layout xmlAdd html attribute in checkout street addressAddress validation in magento 2 checkout page and address bookMagento 2 Checkout billing address validation messageCheckout page street address filed custom validationMagento 2 how to add extra validation to new Billing address form fields in checkout pageHow to remove validation from the “City” and “Street Address” Field on Customer Registration Page?Shipping address, add new address form validation in checkout page
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
Tried to add the following code to add validation for street, but it's not work. How to add the validation for street? Thanks.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="company" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
</item>
<item name="firstname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alpha" xsi:type="string">true</item>
</item>
</item>
<item name="lastname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alpha" xsi:type="string">true</item>
</item>
</item>
<item name="flat" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="floor" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="building" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="street" xsi:type="array">
<!-- <item name="children" xsi:type="array">
<item name="0" xsi:type="array">-->
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
<!-- </item>
<item name="1" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
</item>
</item>-->
</item>
<item name="city" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
</item>
<item name="telephone" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-phone-number" xsi:type="string">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
magento2 validation
asked Jul 15 '16 at 9:18
Ricky.CRicky.C
1,15422245
|
show 4 more comments
Tried to add the following code to add validation for street, but it's not work. How to add the validation for street? Thanks.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="company" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
</item>
<item name="firstname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alpha" xsi:type="string">true</item>
</item>
</item>
<item name="lastname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alpha" xsi:type="string">true</item>
</item>
</item>
<item name="flat" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="floor" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="building" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="street" xsi:type="array">
<!-- <item name="children" xsi:type="array">
<item name="0" xsi:type="array">-->
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
<!-- </item>
<item name="1" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
</item>
</item>-->
</item>
<item name="city" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
</item>
<item name="telephone" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-phone-number" xsi:type="string">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
magento2 validation
asked Jul 15 '16 at 9:18
Ricky.CRicky.C
1,15422245
can you show code for validation in rules.js?
– Bilal Usean
Jul 15 '16 at 9:44
"validate-alphanum-with-spaces": [ function(value) , $.mage.__('Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field.') ],
– Ricky.C
Jul 15 '16 at 9:50
it's original validation rule of magento.
– Ricky.C
Jul 15 '16 at 9:50
plz share your xml file.
– Rakesh Jesadiya
Jul 15 '16 at 9:51
updated content above
– Ricky.C
Jul 15 '16 at 9:54
|
show 4 more comments
Tried to add the following code to add validation for street, but it's not work. How to add the validation for street? Thanks.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="company" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
</item>
<item name="firstname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alpha" xsi:type="string">true</item>
</item>
</item>
<item name="lastname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alpha" xsi:type="string">true</item>
</item>
</item>
<item name="flat" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="floor" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="building" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="street" xsi:type="array">
<!-- <item name="children" xsi:type="array">
<item name="0" xsi:type="array">-->
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
<!-- </item>
<item name="1" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
</item>
</item>-->
</item>
<item name="city" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
</item>
<item name="telephone" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-phone-number" xsi:type="string">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
magento2 validation
asked Jul 15 '16 at 9:18
Ricky.CRicky.C
1,15422245
Tried to add the following code to add validation for street, but it's not work. How to add the validation for street? Thanks.
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" 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">
<item name="shipping-address-fieldset" xsi:type="array">
<item name="children" xsi:type="array">
<item name="company" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
</item>
<item name="firstname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alpha" xsi:type="string">true</item>
</item>
</item>
<item name="lastname" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alpha" xsi:type="string">true</item>
</item>
</item>
<item name="flat" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="floor" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="building" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-alphanum-with-spaces" xsi:type="string">true</item>
</item>
</item>
<item name="street" xsi:type="array">
<!-- <item name="children" xsi:type="array">
<item name="0" xsi:type="array">-->
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
<!-- </item>
<item name="1" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
</item>
</item>-->
</item>
<item name="city" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-address" xsi:type="string">true</item>
</item>
</item>
<item name="telephone" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-hk-phone-number" xsi:type="string">true</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
magento2 validation
magento2 validation
asked Jul 15 '16 at 9:18
Ricky.CRicky.C
1,15422245
asked Jul 15 '16 at 9:18
Ricky.CRicky.C
1,15422245
edited Jul 15 '16 at 9:53
Ricky.C
asked Jul 15 '16 at 9:18
Ricky.CRicky.C
1,15422245
asked Jul 15 '16 at 9:18
Ricky.CRicky.C
1,15422245
asked Jul 15 '16 at 9:18
Ricky.CRicky.C
1,15422245
1,15422245
can you show code for validation in rules.js?
– Bilal Usean
Jul 15 '16 at 9:44
"validate-alphanum-with-spaces": [ function(value) , $.mage.__('Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field.') ],
– Ricky.C
Jul 15 '16 at 9:50
it's original validation rule of magento.
– Ricky.C
Jul 15 '16 at 9:50
plz share your xml file.
– Rakesh Jesadiya
Jul 15 '16 at 9:51
updated content above
– Ricky.C
Jul 15 '16 at 9:54
|
show 4 more comments
can you show code for validation in rules.js?
– Bilal Usean
Jul 15 '16 at 9:44
"validate-alphanum-with-spaces": [ function(value) , $.mage.__('Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field.') ],
– Ricky.C
Jul 15 '16 at 9:50
it's original validation rule of magento.
– Ricky.C
Jul 15 '16 at 9:50
plz share your xml file.
– Rakesh Jesadiya
Jul 15 '16 at 9:51
updated content above
– Ricky.C
Jul 15 '16 at 9:54
can you show code for validation in rules.js?
– Bilal Usean
Jul 15 '16 at 9:44
can you show code for validation in rules.js?
– Bilal Usean
Jul 15 '16 at 9:44
"validate-alphanum-with-spaces": [ function(value) , $.mage.__('Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field.') ],
– Ricky.C
Jul 15 '16 at 9:50
"validate-alphanum-with-spaces": [ function(value) , $.mage.__('Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field.') ],
– Ricky.C
Jul 15 '16 at 9:50
it's original validation rule of magento.
– Ricky.C
Jul 15 '16 at 9:50
it's original validation rule of magento.
– Ricky.C
Jul 15 '16 at 9:50
plz share your xml file.
– Rakesh Jesadiya
Jul 15 '16 at 9:51
plz share your xml file.
– Rakesh Jesadiya
Jul 15 '16 at 9:51
updated content above
– Ricky.C
Jul 15 '16 at 9:54
updated content above
– Ricky.C
Jul 15 '16 at 9:54
|
show 4 more comments
2 Answers
2
active
oldest
votes
Firstly, Magento's validation for checkout_index_index.xml is not working properly so, you have to insert the rules while you replace the street fields.
You can do this by creating a plugin and insert the fields in Layout AfterProcessor.
`namespace/module/etc/frontend/di.xml`
...
<type name="MagentoCheckoutBlockCheckoutLayoutProcessor">
<plugin name="rewrite-street" type="NamespaceModuleModelCheckoutLayoutProcessorPlugin" sortOrder="10"/>
</type>
...
And the LayoutProcessorPlugin should look like this:
namespace/module/Model/Checkout/LayoutProcessorPlugin
...
<?php
namespace NamespaceModuleModelCheckout;
class LayoutProcessorPlugin
/**
* @param MagentoCheckoutBlockCheckoutLayoutProcessor $subject
* @param array $jsLayout
* @return array
*/
public function afterProcess(
MagentoCheckoutBlockCheckoutLayoutProcessor $subject,
array $jsLayout
)
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
'component' => 'Magento_Ui/js/form/components/group',
'label' => __('Street Address'),
'required' => true,
'dataScope' => 'shippingAddress.street',
'provider' => 'checkoutProvider',
'sortOrder' => 60,
'type' => 'group',
'additionalClasses' => 'street',
'children' => [
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '0',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255],
],
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '1',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => false, "min_text_length" => 1, "max_text_length" => 255],
]
]
];
return $jsLayout;
You can insert in validation array any validation rule you want.
edited Feb 4 '17 at 12:08
SR_Magento
3,419115297
answered Feb 4 '17 at 9:40
Catalin IonitaCatalin Ionita
53158
Is this still the only way to add a validation to the street field? Or are validations for checkout_index_index working properly now?
– Konstantin Patroev
Feb 23 '18 at 9:32
add a comment |
Creating a plugin and insert the fields in Layout AfterProcessor it is not the best way to solve that issue. The issue regarding the LayoutProcessorPlugin is first of all the layout xml (in this case the checkout_index_index.xml) is loaded afterward Magento is coping the all entries out of the attributes over the collected structure and in this case the LayoutProcessorPlugin is overriding the stuff.
So my Approach is to use the existing structure.
Here the (maybe cleaner) Approach
This is a set up build in a Magento 2.2.8 Project
First of all, we need a mixin to validate the field.
Here is my mixin as an example based on the street field but it should be exactly the same for at least all of the address attributes:
Notice the JavaScript part is only necessary if you need a custom validation
define([
'jquery',
'jquery/validate'
], function ($)
"use strict";
return function (validator)
validator.addRule(
'validate-street-whitespace',
function (value)
var pattern = /s+d+s0,w+$/;
return value.match(pattern);
,
$.mage.__("Invalid street entry! Please add a whitespace between the street name and the house number!")
);
return validator;
;
);
Here the setup for you're requirejs-config.js
var config =
config:
mixins:
'Magento_Ui/js/lib/validation/validator':
'js/validation-mixin': true // pathing depends on you're file location
;
This is Javascript wise the complete setup. Instead of the LayoutProcessorPlugin you need to update the validate_rules entry in you're attribute table in my case it was the customer_eav_attribute my entry look's like this
"max_text_length":255, "min_text_length": 1, "validate-street-whitespace": true
To roll this change out to all of your systems programmatically I set up a patch.
Notice: This part is a bit custom from my current project but it should provide you're the Idea how to set it up
<?php
namespace YourProjectConfigSetupUpgradeData;
use MagentoEavSetupEavSetup;
use MagentoCustomerApiAddressMetadataInterface;
use MagentoFrameworkExceptionLocalizedException;
class UpdateStreetAttribute0x0x72 extends EavSetup
const STREET_ATTRIBUTE_CODE = 'street';
/**
* update street attribute
* @throws LocalizedException
*/
public function install()
$addressEntityTypeId = $this->getEntityTypeId(AddressMetadataInterface::ENTITY_TYPE_ADDRESS);
$attributeData1 = $this->getAttribute($addressEntityTypeId, self::STREET_ATTRIBUTE_CODE);
$attributeData1['validate_rules'] = '"max_text_length":255, "min_text_length": 1, "validate-street-whitespace": true';
$this->updateAttribute($addressEntityTypeId, self::STREET_ATTRIBUTE_CODE, $attributeData1);
Just as one more Notice adding a mixin for Magento_Ui/js/lib/validation/validator is only working in the Checkout.
answered Jun 5 at 8:02
KaeronKaeron
1
New contributor
Kaeron is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f125864%2fmagento-2-how-to-add-validation-to-street-in-checkout-address-form%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Firstly, Magento's validation for checkout_index_index.xml is not working properly so, you have to insert the rules while you replace the street fields.
You can do this by creating a plugin and insert the fields in Layout AfterProcessor.
`namespace/module/etc/frontend/di.xml`
...
<type name="MagentoCheckoutBlockCheckoutLayoutProcessor">
<plugin name="rewrite-street" type="NamespaceModuleModelCheckoutLayoutProcessorPlugin" sortOrder="10"/>
</type>
...
And the LayoutProcessorPlugin should look like this:
namespace/module/Model/Checkout/LayoutProcessorPlugin
...
<?php
namespace NamespaceModuleModelCheckout;
class LayoutProcessorPlugin
/**
* @param MagentoCheckoutBlockCheckoutLayoutProcessor $subject
* @param array $jsLayout
* @return array
*/
public function afterProcess(
MagentoCheckoutBlockCheckoutLayoutProcessor $subject,
array $jsLayout
)
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
'component' => 'Magento_Ui/js/form/components/group',
'label' => __('Street Address'),
'required' => true,
'dataScope' => 'shippingAddress.street',
'provider' => 'checkoutProvider',
'sortOrder' => 60,
'type' => 'group',
'additionalClasses' => 'street',
'children' => [
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '0',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255],
],
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '1',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => false, "min_text_length" => 1, "max_text_length" => 255],
]
]
];
return $jsLayout;
You can insert in validation array any validation rule you want.
edited Feb 4 '17 at 12:08
SR_Magento
3,419115297
answered Feb 4 '17 at 9:40
Catalin IonitaCatalin Ionita
53158
Is this still the only way to add a validation to the street field? Or are validations for checkout_index_index working properly now?
– Konstantin Patroev
Feb 23 '18 at 9:32
add a comment |
Firstly, Magento's validation for checkout_index_index.xml is not working properly so, you have to insert the rules while you replace the street fields.
You can do this by creating a plugin and insert the fields in Layout AfterProcessor.
`namespace/module/etc/frontend/di.xml`
...
<type name="MagentoCheckoutBlockCheckoutLayoutProcessor">
<plugin name="rewrite-street" type="NamespaceModuleModelCheckoutLayoutProcessorPlugin" sortOrder="10"/>
</type>
...
And the LayoutProcessorPlugin should look like this:
namespace/module/Model/Checkout/LayoutProcessorPlugin
...
<?php
namespace NamespaceModuleModelCheckout;
class LayoutProcessorPlugin
/**
* @param MagentoCheckoutBlockCheckoutLayoutProcessor $subject
* @param array $jsLayout
* @return array
*/
public function afterProcess(
MagentoCheckoutBlockCheckoutLayoutProcessor $subject,
array $jsLayout
)
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
'component' => 'Magento_Ui/js/form/components/group',
'label' => __('Street Address'),
'required' => true,
'dataScope' => 'shippingAddress.street',
'provider' => 'checkoutProvider',
'sortOrder' => 60,
'type' => 'group',
'additionalClasses' => 'street',
'children' => [
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '0',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255],
],
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '1',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => false, "min_text_length" => 1, "max_text_length" => 255],
]
]
];
return $jsLayout;
You can insert in validation array any validation rule you want.
edited Feb 4 '17 at 12:08
SR_Magento
3,419115297
answered Feb 4 '17 at 9:40
Catalin IonitaCatalin Ionita
53158
Is this still the only way to add a validation to the street field? Or are validations for checkout_index_index working properly now?
– Konstantin Patroev
Feb 23 '18 at 9:32
add a comment |
Firstly, Magento's validation for checkout_index_index.xml is not working properly so, you have to insert the rules while you replace the street fields.
You can do this by creating a plugin and insert the fields in Layout AfterProcessor.
`namespace/module/etc/frontend/di.xml`
...
<type name="MagentoCheckoutBlockCheckoutLayoutProcessor">
<plugin name="rewrite-street" type="NamespaceModuleModelCheckoutLayoutProcessorPlugin" sortOrder="10"/>
</type>
...
And the LayoutProcessorPlugin should look like this:
namespace/module/Model/Checkout/LayoutProcessorPlugin
...
<?php
namespace NamespaceModuleModelCheckout;
class LayoutProcessorPlugin
/**
* @param MagentoCheckoutBlockCheckoutLayoutProcessor $subject
* @param array $jsLayout
* @return array
*/
public function afterProcess(
MagentoCheckoutBlockCheckoutLayoutProcessor $subject,
array $jsLayout
)
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
'component' => 'Magento_Ui/js/form/components/group',
'label' => __('Street Address'),
'required' => true,
'dataScope' => 'shippingAddress.street',
'provider' => 'checkoutProvider',
'sortOrder' => 60,
'type' => 'group',
'additionalClasses' => 'street',
'children' => [
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '0',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255],
],
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '1',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => false, "min_text_length" => 1, "max_text_length" => 255],
]
]
];
return $jsLayout;
You can insert in validation array any validation rule you want.
edited Feb 4 '17 at 12:08
SR_Magento
3,419115297
answered Feb 4 '17 at 9:40
Catalin IonitaCatalin Ionita
53158
Firstly, Magento's validation for checkout_index_index.xml is not working properly so, you have to insert the rules while you replace the street fields.
You can do this by creating a plugin and insert the fields in Layout AfterProcessor.
`namespace/module/etc/frontend/di.xml`
...
<type name="MagentoCheckoutBlockCheckoutLayoutProcessor">
<plugin name="rewrite-street" type="NamespaceModuleModelCheckoutLayoutProcessorPlugin" sortOrder="10"/>
</type>
...
And the LayoutProcessorPlugin should look like this:
namespace/module/Model/Checkout/LayoutProcessorPlugin
...
<?php
namespace NamespaceModuleModelCheckout;
class LayoutProcessorPlugin
/**
* @param MagentoCheckoutBlockCheckoutLayoutProcessor $subject
* @param array $jsLayout
* @return array
*/
public function afterProcess(
MagentoCheckoutBlockCheckoutLayoutProcessor $subject,
array $jsLayout
)
$jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
['shippingAddress']['children']['shipping-address-fieldset']['children']['street'] = [
'component' => 'Magento_Ui/js/form/components/group',
'label' => __('Street Address'),
'required' => true,
'dataScope' => 'shippingAddress.street',
'provider' => 'checkoutProvider',
'sortOrder' => 60,
'type' => 'group',
'additionalClasses' => 'street',
'children' => [
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '0',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => true, "min_text_length" => 1, "max_text_length" => 255],
],
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'shippingAddress',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input'
],
'dataScope' => '1',
'provider' => 'checkoutProvider',
'validation' => ['required-entry' => false, "min_text_length" => 1, "max_text_length" => 255],
]
]
];
return $jsLayout;
You can insert in validation array any validation rule you want.
edited Feb 4 '17 at 12:08
SR_Magento
3,419115297
answered Feb 4 '17 at 9:40
Catalin IonitaCatalin Ionita
53158
edited Feb 4 '17 at 12:08
SR_Magento
3,419115297
edited Feb 4 '17 at 12:08
SR_Magento
3,419115297
edited Feb 4 '17 at 12:08
SR_Magento
3,419115297
3,419115297
answered Feb 4 '17 at 9:40
Catalin IonitaCatalin Ionita
53158
answered Feb 4 '17 at 9:40
Catalin IonitaCatalin Ionita
53158
answered Feb 4 '17 at 9:40
Catalin IonitaCatalin Ionita
53158
53158
Is this still the only way to add a validation to the street field? Or are validations for checkout_index_index working properly now?
– Konstantin Patroev
Feb 23 '18 at 9:32
add a comment |
Is this still the only way to add a validation to the street field? Or are validations for checkout_index_index working properly now?
– Konstantin Patroev
Feb 23 '18 at 9:32
Is this still the only way to add a validation to the street field? Or are validations for checkout_index_index working properly now?
– Konstantin Patroev
Feb 23 '18 at 9:32
Is this still the only way to add a validation to the street field? Or are validations for checkout_index_index working properly now?
– Konstantin Patroev
Feb 23 '18 at 9:32
add a comment |
Creating a plugin and insert the fields in Layout AfterProcessor it is not the best way to solve that issue. The issue regarding the LayoutProcessorPlugin is first of all the layout xml (in this case the checkout_index_index.xml) is loaded afterward Magento is coping the all entries out of the attributes over the collected structure and in this case the LayoutProcessorPlugin is overriding the stuff.
So my Approach is to use the existing structure.
Here the (maybe cleaner) Approach
This is a set up build in a Magento 2.2.8 Project
First of all, we need a mixin to validate the field.
Here is my mixin as an example based on the street field but it should be exactly the same for at least all of the address attributes:
Notice the JavaScript part is only necessary if you need a custom validation
define([
'jquery',
'jquery/validate'
], function ($)
"use strict";
return function (validator)
validator.addRule(
'validate-street-whitespace',
function (value)
var pattern = /s+d+s0,w+$/;
return value.match(pattern);
,
$.mage.__("Invalid street entry! Please add a whitespace between the street name and the house number!")
);
return validator;
;
);
Here the setup for you're requirejs-config.js
var config =
config:
mixins:
'Magento_Ui/js/lib/validation/validator':
'js/validation-mixin': true // pathing depends on you're file location
;
This is Javascript wise the complete setup. Instead of the LayoutProcessorPlugin you need to update the validate_rules entry in you're attribute table in my case it was the customer_eav_attribute my entry look's like this
"max_text_length":255, "min_text_length": 1, "validate-street-whitespace": true
To roll this change out to all of your systems programmatically I set up a patch.
Notice: This part is a bit custom from my current project but it should provide you're the Idea how to set it up
<?php
namespace YourProjectConfigSetupUpgradeData;
use MagentoEavSetupEavSetup;
use MagentoCustomerApiAddressMetadataInterface;
use MagentoFrameworkExceptionLocalizedException;
class UpdateStreetAttribute0x0x72 extends EavSetup
const STREET_ATTRIBUTE_CODE = 'street';
/**
* update street attribute
* @throws LocalizedException
*/
public function install()
$addressEntityTypeId = $this->getEntityTypeId(AddressMetadataInterface::ENTITY_TYPE_ADDRESS);
$attributeData1 = $this->getAttribute($addressEntityTypeId, self::STREET_ATTRIBUTE_CODE);
$attributeData1['validate_rules'] = '"max_text_length":255, "min_text_length": 1, "validate-street-whitespace": true';
$this->updateAttribute($addressEntityTypeId, self::STREET_ATTRIBUTE_CODE, $attributeData1);
Just as one more Notice adding a mixin for Magento_Ui/js/lib/validation/validator is only working in the Checkout.
answered Jun 5 at 8:02
KaeronKaeron
1
New contributor
Kaeron is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Creating a plugin and insert the fields in Layout AfterProcessor it is not the best way to solve that issue. The issue regarding the LayoutProcessorPlugin is first of all the layout xml (in this case the checkout_index_index.xml) is loaded afterward Magento is coping the all entries out of the attributes over the collected structure and in this case the LayoutProcessorPlugin is overriding the stuff.
So my Approach is to use the existing structure.
Here the (maybe cleaner) Approach
This is a set up build in a Magento 2.2.8 Project
First of all, we need a mixin to validate the field.
Here is my mixin as an example based on the street field but it should be exactly the same for at least all of the address attributes:
Notice the JavaScript part is only necessary if you need a custom validation
define([
'jquery',
'jquery/validate'
], function ($)
"use strict";
return function (validator)
validator.addRule(
'validate-street-whitespace',
function (value)
var pattern = /s+d+s0,w+$/;
return value.match(pattern);
,
$.mage.__("Invalid street entry! Please add a whitespace between the street name and the house number!")
);
return validator;
;
);
Here the setup for you're requirejs-config.js
var config =
config:
mixins:
'Magento_Ui/js/lib/validation/validator':
'js/validation-mixin': true // pathing depends on you're file location
;
This is Javascript wise the complete setup. Instead of the LayoutProcessorPlugin you need to update the validate_rules entry in you're attribute table in my case it was the customer_eav_attribute my entry look's like this
"max_text_length":255, "min_text_length": 1, "validate-street-whitespace": true
To roll this change out to all of your systems programmatically I set up a patch.
Notice: This part is a bit custom from my current project but it should provide you're the Idea how to set it up
<?php
namespace YourProjectConfigSetupUpgradeData;
use MagentoEavSetupEavSetup;
use MagentoCustomerApiAddressMetadataInterface;
use MagentoFrameworkExceptionLocalizedException;
class UpdateStreetAttribute0x0x72 extends EavSetup
const STREET_ATTRIBUTE_CODE = 'street';
/**
* update street attribute
* @throws LocalizedException
*/
public function install()
$addressEntityTypeId = $this->getEntityTypeId(AddressMetadataInterface::ENTITY_TYPE_ADDRESS);
$attributeData1 = $this->getAttribute($addressEntityTypeId, self::STREET_ATTRIBUTE_CODE);
$attributeData1['validate_rules'] = '"max_text_length":255, "min_text_length": 1, "validate-street-whitespace": true';
$this->updateAttribute($addressEntityTypeId, self::STREET_ATTRIBUTE_CODE, $attributeData1);
Just as one more Notice adding a mixin for Magento_Ui/js/lib/validation/validator is only working in the Checkout.
answered Jun 5 at 8:02
KaeronKaeron
1
New contributor
Kaeron is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
Creating a plugin and insert the fields in Layout AfterProcessor it is not the best way to solve that issue. The issue regarding the LayoutProcessorPlugin is first of all the layout xml (in this case the checkout_index_index.xml) is loaded afterward Magento is coping the all entries out of the attributes over the collected structure and in this case the LayoutProcessorPlugin is overriding the stuff.
So my Approach is to use the existing structure.
Here the (maybe cleaner) Approach
This is a set up build in a Magento 2.2.8 Project
First of all, we need a mixin to validate the field.
Here is my mixin as an example based on the street field but it should be exactly the same for at least all of the address attributes:
Notice the JavaScript part is only necessary if you need a custom validation
define([
'jquery',
'jquery/validate'
], function ($)
"use strict";
return function (validator)
validator.addRule(
'validate-street-whitespace',
function (value)
var pattern = /s+d+s0,w+$/;
return value.match(pattern);
,
$.mage.__("Invalid street entry! Please add a whitespace between the street name and the house number!")
);
return validator;
;
);
Here the setup for you're requirejs-config.js
var config =
config:
mixins:
'Magento_Ui/js/lib/validation/validator':
'js/validation-mixin': true // pathing depends on you're file location
;
This is Javascript wise the complete setup. Instead of the LayoutProcessorPlugin you need to update the validate_rules entry in you're attribute table in my case it was the customer_eav_attribute my entry look's like this
"max_text_length":255, "min_text_length": 1, "validate-street-whitespace": true
To roll this change out to all of your systems programmatically I set up a patch.
Notice: This part is a bit custom from my current project but it should provide you're the Idea how to set it up
<?php
namespace YourProjectConfigSetupUpgradeData;
use MagentoEavSetupEavSetup;
use MagentoCustomerApiAddressMetadataInterface;
use MagentoFrameworkExceptionLocalizedException;
class UpdateStreetAttribute0x0x72 extends EavSetup
const STREET_ATTRIBUTE_CODE = 'street';
/**
* update street attribute
* @throws LocalizedException
*/
public function install()
$addressEntityTypeId = $this->getEntityTypeId(AddressMetadataInterface::ENTITY_TYPE_ADDRESS);
$attributeData1 = $this->getAttribute($addressEntityTypeId, self::STREET_ATTRIBUTE_CODE);
$attributeData1['validate_rules'] = '"max_text_length":255, "min_text_length": 1, "validate-street-whitespace": true';
$this->updateAttribute($addressEntityTypeId, self::STREET_ATTRIBUTE_CODE, $attributeData1);
Just as one more Notice adding a mixin for Magento_Ui/js/lib/validation/validator is only working in the Checkout.
answered Jun 5 at 8:02
KaeronKaeron
1
New contributor
Kaeron is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Creating a plugin and insert the fields in Layout AfterProcessor it is not the best way to solve that issue. The issue regarding the LayoutProcessorPlugin is first of all the layout xml (in this case the checkout_index_index.xml) is loaded afterward Magento is coping the all entries out of the attributes over the collected structure and in this case the LayoutProcessorPlugin is overriding the stuff.
So my Approach is to use the existing structure.
Here the (maybe cleaner) Approach
This is a set up build in a Magento 2.2.8 Project
First of all, we need a mixin to validate the field.
Here is my mixin as an example based on the street field but it should be exactly the same for at least all of the address attributes:
Notice the JavaScript part is only necessary if you need a custom validation
define([
'jquery',
'jquery/validate'
], function ($)
"use strict";
return function (validator)
validator.addRule(
'validate-street-whitespace',
function (value)
var pattern = /s+d+s0,w+$/;
return value.match(pattern);
,
$.mage.__("Invalid street entry! Please add a whitespace between the street name and the house number!")
);
return validator;
;
);
Here the setup for you're requirejs-config.js
var config =
config:
mixins:
'Magento_Ui/js/lib/validation/validator':
'js/validation-mixin': true // pathing depends on you're file location
;
This is Javascript wise the complete setup. Instead of the LayoutProcessorPlugin you need to update the validate_rules entry in you're attribute table in my case it was the customer_eav_attribute my entry look's like this
"max_text_length":255, "min_text_length": 1, "validate-street-whitespace": true
To roll this change out to all of your systems programmatically I set up a patch.
Notice: This part is a bit custom from my current project but it should provide you're the Idea how to set it up
<?php
namespace YourProjectConfigSetupUpgradeData;
use MagentoEavSetupEavSetup;
use MagentoCustomerApiAddressMetadataInterface;
use MagentoFrameworkExceptionLocalizedException;
class UpdateStreetAttribute0x0x72 extends EavSetup
const STREET_ATTRIBUTE_CODE = 'street';
/**
* update street attribute
* @throws LocalizedException
*/
public function install()
$addressEntityTypeId = $this->getEntityTypeId(AddressMetadataInterface::ENTITY_TYPE_ADDRESS);
$attributeData1 = $this->getAttribute($addressEntityTypeId, self::STREET_ATTRIBUTE_CODE);
$attributeData1['validate_rules'] = '"max_text_length":255, "min_text_length": 1, "validate-street-whitespace": true';
$this->updateAttribute($addressEntityTypeId, self::STREET_ATTRIBUTE_CODE, $attributeData1);
Just as one more Notice adding a mixin for Magento_Ui/js/lib/validation/validator is only working in the Checkout.
answered Jun 5 at 8:02
KaeronKaeron
1
New contributor
Kaeron is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Jun 5 at 8:02
KaeronKaeron
1
New contributor
Kaeron is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Jun 5 at 8:02
KaeronKaeron
1
answered Jun 5 at 8:02
KaeronKaeron
1
1
New contributor
Kaeron is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Kaeron is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f125864%2fmagento-2-how-to-add-validation-to-street-in-checkout-address-form%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
can you show code for validation in rules.js?
– Bilal Usean
Jul 15 '16 at 9:44
"validate-alphanum-with-spaces": [ function(value) , $.mage.__('Please use only letters (a-z or A-Z), numbers (0-9) or spaces only in this field.') ],
– Ricky.C
Jul 15 '16 at 9:50
it's original validation rule of magento.
– Ricky.C
Jul 15 '16 at 9:50
plz share your xml file.
– Rakesh Jesadiya
Jul 15 '16 at 9:51
updated content above
– Ricky.C
Jul 15 '16 at 9:54