Adding custom validation to checkout field
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}
With Magento 2 I want to do everything the "clean" way, so without editing any layout files (if possible).
Currently, I am trying to add custom validations to fields at the checkout.
If I create my JS validation rules like this, how do I tell Magento for which fields to use these rules.
magento2 checkout validation
asked Jan 23 '18 at 8:29
Jurģis Toms LiepiņšJurģis Toms Liepiņš
889828
bumped to the homepage by Community♦ 6 hours ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
With Magento 2 I want to do everything the "clean" way, so without editing any layout files (if possible).
Currently, I am trying to add custom validations to fields at the checkout.
If I create my JS validation rules like this, how do I tell Magento for which fields to use these rules.
magento2 checkout validation
asked Jan 23 '18 at 8:29
Jurģis Toms LiepiņšJurģis Toms Liepiņš
889828
bumped to the homepage by Community♦ 6 hours ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
With Magento 2 I want to do everything the "clean" way, so without editing any layout files (if possible).
Currently, I am trying to add custom validations to fields at the checkout.
If I create my JS validation rules like this, how do I tell Magento for which fields to use these rules.
magento2 checkout validation
asked Jan 23 '18 at 8:29
Jurģis Toms LiepiņšJurģis Toms Liepiņš
889828
With Magento 2 I want to do everything the "clean" way, so without editing any layout files (if possible).
Currently, I am trying to add custom validations to fields at the checkout.
If I create my JS validation rules like this, how do I tell Magento for which fields to use these rules.
magento2 checkout validation
magento2 checkout validation
asked Jan 23 '18 at 8:29
Jurģis Toms LiepiņšJurģis Toms Liepiņš
889828
asked Jan 23 '18 at 8:29
Jurģis Toms LiepiņšJurģis Toms Liepiņš
889828
asked Jan 23 '18 at 8:29
Jurģis Toms LiepiņšJurģis Toms Liepiņš
889828
asked Jan 23 '18 at 8:29
Jurģis Toms LiepiņšJurģis Toms Liepiņš
889828
asked Jan 23 '18 at 8:29
Jurģis Toms LiepiņšJurģis Toms Liepiņš
889828
889828
bumped to the homepage by Community♦ 6 hours ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
bumped to the homepage by Community♦ 6 hours ago
This question has answers that may be good or bad; the system has marked it active so that they can be reviewed.
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
In your custom module directory, create a .js file implementing the validator. It should be located under /view/frontend/web/js/model directory.
define(
,
function () {
'use strict';
return {
/**
* Validate something
*
* @returns {boolean}
*/
validate: function() {
//Put your validation logic here
return true;
}
}
}
);
Your custom validator must be added to the pool of “additional validators”. To do this, in the /view/frontend/web/js/view directory create a new .js file with the following content:
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'<your_module>/js/model/your-validator'
],
function (Component, additionalValidators, yourValidator) {
'use strict';
additionalValidators.registerValidator(yourValidator);
return Component.extend({});
}
);
In your custom module directory, create a new /view/frontend/layout/checkout_index_index.xml file. In this file, add the following:
<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="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="additional-payment-validators" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Declare your validation. START -->
<item name="your-validator" xsi:type="array">
<item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item>
</item>
<!-- Declare your validation. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
answered Jan 23 '18 at 8:51
Birjitsinh ZalaBirjitsinh Zala
564115
So, which part of this answers my question? Where exactly do I specify the field the validation form should be used for?
– Jurģis Toms Liepiņš
Jan 23 '18 at 8:54
'Magento_Checkout/js/model/payment/additional-validators'
– Birjitsinh Zala
Jan 23 '18 at 11:46
this code place after or below your element <item name="your-validator" xsi:type="array"> <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item> </item>
– Birjitsinh Zala
Jan 23 '18 at 11:47
@BirjitsinhZala, How can I show a custom message from the validate: function ?
– Varun Jyothi
Apr 29 '18 at 8:21
afaik this approach works only for popup messages and only for "place order" button. And in this example there are no option how to check field on the fly.
– Anthony
Jun 13 '18 at 18:50
|
show 2 more comments
Maybe this link can help you: http://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_order.html
answered Jan 23 '18 at 14:00
Diego QueirozDiego Queiroz
1178
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%2f210569%2fadding-custom-validation-to-checkout-field%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
In your custom module directory, create a .js file implementing the validator. It should be located under /view/frontend/web/js/model directory.
define(
,
function () {
'use strict';
return {
/**
* Validate something
*
* @returns {boolean}
*/
validate: function() {
//Put your validation logic here
return true;
}
}
}
);
Your custom validator must be added to the pool of “additional validators”. To do this, in the /view/frontend/web/js/view directory create a new .js file with the following content:
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'<your_module>/js/model/your-validator'
],
function (Component, additionalValidators, yourValidator) {
'use strict';
additionalValidators.registerValidator(yourValidator);
return Component.extend({});
}
);
In your custom module directory, create a new /view/frontend/layout/checkout_index_index.xml file. In this file, add the following:
<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="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="additional-payment-validators" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Declare your validation. START -->
<item name="your-validator" xsi:type="array">
<item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item>
</item>
<!-- Declare your validation. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
answered Jan 23 '18 at 8:51
Birjitsinh ZalaBirjitsinh Zala
564115
So, which part of this answers my question? Where exactly do I specify the field the validation form should be used for?
– Jurģis Toms Liepiņš
Jan 23 '18 at 8:54
'Magento_Checkout/js/model/payment/additional-validators'
– Birjitsinh Zala
Jan 23 '18 at 11:46
this code place after or below your element <item name="your-validator" xsi:type="array"> <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item> </item>
– Birjitsinh Zala
Jan 23 '18 at 11:47
@BirjitsinhZala, How can I show a custom message from the validate: function ?
– Varun Jyothi
Apr 29 '18 at 8:21
afaik this approach works only for popup messages and only for "place order" button. And in this example there are no option how to check field on the fly.
– Anthony
Jun 13 '18 at 18:50
|
show 2 more comments
In your custom module directory, create a .js file implementing the validator. It should be located under /view/frontend/web/js/model directory.
define(
,
function () {
'use strict';
return {
/**
* Validate something
*
* @returns {boolean}
*/
validate: function() {
//Put your validation logic here
return true;
}
}
}
);
Your custom validator must be added to the pool of “additional validators”. To do this, in the /view/frontend/web/js/view directory create a new .js file with the following content:
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'<your_module>/js/model/your-validator'
],
function (Component, additionalValidators, yourValidator) {
'use strict';
additionalValidators.registerValidator(yourValidator);
return Component.extend({});
}
);
In your custom module directory, create a new /view/frontend/layout/checkout_index_index.xml file. In this file, add the following:
<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="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="additional-payment-validators" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Declare your validation. START -->
<item name="your-validator" xsi:type="array">
<item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item>
</item>
<!-- Declare your validation. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
answered Jan 23 '18 at 8:51
Birjitsinh ZalaBirjitsinh Zala
564115
So, which part of this answers my question? Where exactly do I specify the field the validation form should be used for?
– Jurģis Toms Liepiņš
Jan 23 '18 at 8:54
'Magento_Checkout/js/model/payment/additional-validators'
– Birjitsinh Zala
Jan 23 '18 at 11:46
this code place after or below your element <item name="your-validator" xsi:type="array"> <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item> </item>
– Birjitsinh Zala
Jan 23 '18 at 11:47
@BirjitsinhZala, How can I show a custom message from the validate: function ?
– Varun Jyothi
Apr 29 '18 at 8:21
afaik this approach works only for popup messages and only for "place order" button. And in this example there are no option how to check field on the fly.
– Anthony
Jun 13 '18 at 18:50
|
show 2 more comments
In your custom module directory, create a .js file implementing the validator. It should be located under /view/frontend/web/js/model directory.
define(
,
function () {
'use strict';
return {
/**
* Validate something
*
* @returns {boolean}
*/
validate: function() {
//Put your validation logic here
return true;
}
}
}
);
Your custom validator must be added to the pool of “additional validators”. To do this, in the /view/frontend/web/js/view directory create a new .js file with the following content:
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'<your_module>/js/model/your-validator'
],
function (Component, additionalValidators, yourValidator) {
'use strict';
additionalValidators.registerValidator(yourValidator);
return Component.extend({});
}
);
In your custom module directory, create a new /view/frontend/layout/checkout_index_index.xml file. In this file, add the following:
<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="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="additional-payment-validators" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Declare your validation. START -->
<item name="your-validator" xsi:type="array">
<item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item>
</item>
<!-- Declare your validation. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
answered Jan 23 '18 at 8:51
Birjitsinh ZalaBirjitsinh Zala
564115
In your custom module directory, create a .js file implementing the validator. It should be located under /view/frontend/web/js/model directory.
define(
,
function () {
'use strict';
return {
/**
* Validate something
*
* @returns {boolean}
*/
validate: function() {
//Put your validation logic here
return true;
}
}
}
);
Your custom validator must be added to the pool of “additional validators”. To do this, in the /view/frontend/web/js/view directory create a new .js file with the following content:
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'<your_module>/js/model/your-validator'
],
function (Component, additionalValidators, yourValidator) {
'use strict';
additionalValidators.registerValidator(yourValidator);
return Component.extend({});
}
);
In your custom module directory, create a new /view/frontend/layout/checkout_index_index.xml file. In this file, add the following:
<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="billing-step" xsi:type="array">
<item name="children" xsi:type="array">
<item name="payment" xsi:type="array">
<item name="children" xsi:type="array">
<item name="additional-payment-validators" xsi:type="array">
<item name="children" xsi:type="array">
<!-- Declare your validation. START -->
<item name="your-validator" xsi:type="array">
<item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item>
</item>
<!-- Declare your validation. END -->
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</referenceBlock>
</body>
</page>
answered Jan 23 '18 at 8:51
Birjitsinh ZalaBirjitsinh Zala
564115
answered Jan 23 '18 at 8:51
Birjitsinh ZalaBirjitsinh Zala
564115
answered Jan 23 '18 at 8:51
Birjitsinh ZalaBirjitsinh Zala
564115
answered Jan 23 '18 at 8:51
Birjitsinh ZalaBirjitsinh Zala
564115
564115
So, which part of this answers my question? Where exactly do I specify the field the validation form should be used for?
– Jurģis Toms Liepiņš
Jan 23 '18 at 8:54
'Magento_Checkout/js/model/payment/additional-validators'
– Birjitsinh Zala
Jan 23 '18 at 11:46
this code place after or below your element <item name="your-validator" xsi:type="array"> <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item> </item>
– Birjitsinh Zala
Jan 23 '18 at 11:47
@BirjitsinhZala, How can I show a custom message from the validate: function ?
– Varun Jyothi
Apr 29 '18 at 8:21
afaik this approach works only for popup messages and only for "place order" button. And in this example there are no option how to check field on the fly.
– Anthony
Jun 13 '18 at 18:50
|
show 2 more comments
So, which part of this answers my question? Where exactly do I specify the field the validation form should be used for?
– Jurģis Toms Liepiņš
Jan 23 '18 at 8:54
'Magento_Checkout/js/model/payment/additional-validators'
– Birjitsinh Zala
Jan 23 '18 at 11:46
this code place after or below your element <item name="your-validator" xsi:type="array"> <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item> </item>
– Birjitsinh Zala
Jan 23 '18 at 11:47
@BirjitsinhZala, How can I show a custom message from the validate: function ?
– Varun Jyothi
Apr 29 '18 at 8:21
afaik this approach works only for popup messages and only for "place order" button. And in this example there are no option how to check field on the fly.
– Anthony
Jun 13 '18 at 18:50
So, which part of this answers my question? Where exactly do I specify the field the validation form should be used for?
– Jurģis Toms Liepiņš
Jan 23 '18 at 8:54
So, which part of this answers my question? Where exactly do I specify the field the validation form should be used for?
– Jurģis Toms Liepiņš
Jan 23 '18 at 8:54
'Magento_Checkout/js/model/payment/additional-validators'
– Birjitsinh Zala
Jan 23 '18 at 11:46
'Magento_Checkout/js/model/payment/additional-validators'
– Birjitsinh Zala
Jan 23 '18 at 11:46
this code place after or below your element <item name="your-validator" xsi:type="array"> <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item> </item>
– Birjitsinh Zala
Jan 23 '18 at 11:47
this code place after or below your element <item name="your-validator" xsi:type="array"> <item name="component" xsi:type="string">%your_module_dir%/js/view/%your-validation%</item> </item>
– Birjitsinh Zala
Jan 23 '18 at 11:47
@BirjitsinhZala, How can I show a custom message from the validate: function ?
– Varun Jyothi
Apr 29 '18 at 8:21
@BirjitsinhZala, How can I show a custom message from the validate: function ?
– Varun Jyothi
Apr 29 '18 at 8:21
afaik this approach works only for popup messages and only for "place order" button. And in this example there are no option how to check field on the fly.
– Anthony
Jun 13 '18 at 18:50
afaik this approach works only for popup messages and only for "place order" button. And in this example there are no option how to check field on the fly.
– Anthony
Jun 13 '18 at 18:50
|
show 2 more comments
Maybe this link can help you: http://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_order.html
answered Jan 23 '18 at 14:00
Diego QueirozDiego Queiroz
1178
add a comment |
Maybe this link can help you: http://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_order.html
answered Jan 23 '18 at 14:00
Diego QueirozDiego Queiroz
1178
add a comment |
Maybe this link can help you: http://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_order.html
answered Jan 23 '18 at 14:00
Diego QueirozDiego Queiroz
1178
Maybe this link can help you: http://devdocs.magento.com/guides/v2.2/howdoi/checkout/checkout_order.html
answered Jan 23 '18 at 14:00
Diego QueirozDiego Queiroz
1178
answered Jan 23 '18 at 14:00
Diego QueirozDiego Queiroz
1178
answered Jan 23 '18 at 14:00
Diego QueirozDiego Queiroz
1178
answered Jan 23 '18 at 14:00
Diego QueirozDiego Queiroz
1178
1178
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%2f210569%2fadding-custom-validation-to-checkout-field%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
