如何在位置上单击Magento的结帐页面上的第一个名称字段重新启用的字段验证,在布局中将其禁用后
Magento 2.4 PHP7.4
我需要将FirstName字段的验证移动以单击“位置订单”。这意味着,当单击位置订单时,应显示第一个名称字段验证。以前在选择运输方法时显示了验证。我通过修改COBLECOUT_INDEX_INDEX.XML来禁用该验证,如下所示。我现在包括了一个额外的付款验证器,我认为应该在单击位置订单时生成验证,但这并没有发生。我可以触发JavaScript警报弹出窗口进行验证,但这并不理想。
根据我的研究,由于名称字段未嵌入形式中,因此对通过JavaScript添加所需属性的反应没有反应。
Cookeout_index_index.xml的修改
<item name="shipping-address-fieldset" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="config" xsi:type="array">
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">checkoutProvider</item>
</item>
</item>
<item name="displayArea" xsi:type="string">additional-fieldsets</item>
<item name="children" xsi:type="array">
<item name="firstname" xsi:type="array">
<item name="config" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">false</item>
</item>
</item>
</item>
附加付款验证器 -
<item name="additional-payment-validators" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<!-- merge payment validators here -->
<item name="email-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/payment/email-validator</item>
</item>
<item name="address-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/address-validator</item>
</item>
地址 - validator(view) -
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Checkout/js/model/default-validator'
],
function (Component, additionalValidators, defaultValidator) {
'use strict';
console.log(defaultValidator);
additionalValidators.registerValidator(defaultValidator);
console.log("inside address validator");
return Component.extend({});
}
);
默认验证器(模型) -
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'mageUtils',
'./default-validation-rules',
'mage/translate'
], function ($, utils, validationRules, $t) {
'use strict';
return {
validationErrors: [],
/**
* @param {Object} address
* @return {Boolean}
*/
validate: function (address) {
var self = this;
this.validationErrors = [];
$.each(validationRules.getRules(), function (field, rule) {
var message;
if (rule.required && utils.isEmpty(address[field])) {
message = $t('Field ') + field + $t(' is required.');
self.validationErrors.push(message);
}
});
return !this.validationErrors.length;
}
};
});
验证规则 -
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([], function () {
'use strict';
return {
/**
* @return {Object}
*/
getRules: function () {
return {
'country_id': {
'required': true
},
'firstname': {
'required': true
}
};
}
};
});
Magento 2.4
PHP7.4
I need to move the validation of firstname field to click Place Order. This means when Place Order is clicked the firstname field validation should show. Previously the validation was showing when selecting the shipping method. I disabled that validation by modifying checkout_index_index.xml as shown in below code. I now included an additional payment validator which I think should generate validation on clicking Place order but that is not happening. I can trigger javascript alert pop-ups for the validation but that is not ideal.
According to my research, since the firstname field is not embedded inside a form it is not reacting to required attribute being added to it through javascript.
modification of checkout_index_index.xml
<item name="shipping-address-fieldset" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="config" xsi:type="array">
<item name="deps" xsi:type="array">
<item name="0" xsi:type="string">checkoutProvider</item>
</item>
</item>
<item name="displayArea" xsi:type="string">additional-fieldsets</item>
<item name="children" xsi:type="array">
<item name="firstname" xsi:type="array">
<item name="config" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">false</item>
</item>
</item>
</item>
additional payment validator -
<item name="additional-payment-validators" xsi:type="array">
<item name="component" xsi:type="string">uiComponent</item>
<item name="children" xsi:type="array">
<!-- merge payment validators here -->
<item name="email-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/payment/email-validator</item>
</item>
<item name="address-validator" xsi:type="array">
<item name="component" xsi:type="string">Magento_Checkout/js/view/shipping-address/address-validator</item>
</item>
address-validator (view)-
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define(
[
'uiComponent',
'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Checkout/js/model/default-validator'
],
function (Component, additionalValidators, defaultValidator) {
'use strict';
console.log(defaultValidator);
additionalValidators.registerValidator(defaultValidator);
console.log("inside address validator");
return Component.extend({});
}
);
default validator (model)-
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([
'jquery',
'mageUtils',
'./default-validation-rules',
'mage/translate'
], function ($, utils, validationRules, $t) {
'use strict';
return {
validationErrors: [],
/**
* @param {Object} address
* @return {Boolean}
*/
validate: function (address) {
var self = this;
this.validationErrors = [];
$.each(validationRules.getRules(), function (field, rule) {
var message;
if (rule.required && utils.isEmpty(address[field])) {
message = $t('Field ') + field + $t(' is required.');
self.validationErrors.push(message);
}
});
return !this.validationErrors.length;
}
};
});
validation rules -
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
define([], function () {
'use strict';
return {
/**
* @return {Object}
*/
getRules: function () {
return {
'country_id': {
'required': true
},
'firstname': {
'required': true
}
};
}
};
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论