Bounty: 100
First of all, im using magento 2.4 here. Im building a new form via the LayoutProcessor. The form in the checkout that i have is depending on the products sold. In my case im selling virtual exams which means in the checkout i need to request extra candidate info for each item sold.
In general i have all the fields on the page which works however the validation somehow is not. The fields are added like below:
[
'component' => 'Magento_Ui/js/form/element/abstract',
'config' => [
'customScope' => 'extraCheckoutForm',
'template' => 'ui/form/field',
'elementTmpl' => 'ui/form/element/input',
],
'provider' => 'checkoutProvider',
'dataScope' => 'extraCheckoutForm['.$attributeSet.'][' . $item->getId() . '][' . $i . '][' . $f['name'] . ']',
'label' => $f['label'],
'sortOrder' => $this->sortOrderPointer,
'validation' => [
'required-entry' => (bool) $f['required'],
],
]
Even all this works and the form field is rendered in the UI like this:
<input class="input-text valid" type="text" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
attr: {
name: inputName,
placeholder: placeholder,
'aria-describedby': getDescriptionId(),
'aria-required': required,
'aria-invalid': error() ? true : 'false',
id: uid,
disabled: disabled
}" name="extraCheckoutForm[elearning][30][0][firstname]" aria-required="true" aria-invalid="false" id="M477C2H">
The problem now actually is that when i validate the form with my JS it is not validating anything since there are no validation rules on the generated input field. The validation method looks like:
validateFields: function () {
var formSelector = '#extra-checkout-form';
var valid = true;
$(formSelector).validation();
$(formSelector + ' input').each(function () {
if (!Boolean($(this).valid())) {
valid = false;
}
})
if (!valid) {
return false;
}
return true;
},
Hope that someone has an idea
Best,
Pim
