#StackBounty: #magento2 #checkout Form validation not working

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 + ' input').each(function () {
        if (!Boolean($(this).valid())) {
            valid = false;
    if (!valid) {
        return false;
    return true;

Hope that someone has an idea


Get this bounty!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.