Magento2: Poor error message placement for Configurable products required swatch selection on Product page

[lucasng13]

Steps to reproduce

1. Install Magento 2.1.
2. Go to a Configurable Product page.

3. Don't select any options and click "Add to cart"

   Expected result

   Message "This is a required field." should display below options.

   Actual result

   Message "This is a required field." displays at the bottom of form.

[wert2all]

Thanks for reporting. Internal ticket MAGETWO-55042 was created.

[kfaer]

that is good, but when will get it resolved? so I need to stop using M2.1 in production because of this issue.

[parthviroja]

I have resolve this issue.

open below file

...pub\static\frontend\Magento...\en_US\Magento_Swatches\js\swatch-renderer.js

find below line around 273 line number

if ($widget.productForm) { $widget.productForm.append(input); input = ''; }

modify

$widget.productForm.append(input); -> container.append(input);

after modification code look like this

if ($widget.productForm) { container.append(input); input = ''; }

now validation message will be display below options

[ksz2013]

Will this be resolved in the next release?

Thanks,

[mombrea]

@parthviroja was on the right track however you don't want to modify a pub/static file since it will be overwritten with each deploy.

In order to fix this you have to override the JavaScript for a Magento Core module. /vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

1. Create <theme_dir>/Magento_Swatches/web/js/swatch-renderer.js
2. Copy contents of vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js into the newly created file
3. At around line 283, change

if ($widget.productForm) { $widget.productForm.append(input); input = ''; }

to

if ($widget.productForm) { container.append(input); input = ''; }

1. Move the snippet under the following snippet, which should be at around 288.

// Create new control container.append( '<div class="' + classes.attributeClass + ' ' + item.code + '" attribute-code="' + item.code + '" attribute-id="' + item.id + '">' + label + '<div class="' + classes.attributeOptionsWrapper + ' clearfix">' + options + select + '</div>' + input + '</div>' );

1. Flush Magento Cache
2. Flush JavaScript/CSS Cache

[tkacheva]

Issue is fixed and delivered into mainline
https://github.com/magento/magento2/commit/51bc865
If you still have it after upgrade, please reopen

[TClilMouse]

@tkacheva I upgraded to Magento 2.1.2 still having this issue.

[Dublerq]

same

[paales]

@seavenger @Dublerq The fix isn't in 2.1.2 yet, will be in 2.2 (or in 2.1.3 but don't get your hopes up).

[rosandrest]

Still in 2.1.2.

[erik-augustin]

Same problem 2.1.3.;-(

[tkacheva]

Delivering fix into mainline means that fix is in develop brunch (2.2 currently)
It will be included in upcoming patch release

[lingwooc]

I turned the relevant parts of the fix into a module (I ignored the aria stuff). requiredFields-magento2. It appears to work just fine in isolation. I only tested in 2.1.3 YMMV.

When we get the integrated fix just remove the module.

[ksz2013]

Hi,

Those who still have this problem i created a custom snippet that resolves this issue:

Just include it in one of your templates:

`

`

No core functionality is rewritten, when they relese the fix, just remove this snippet.
Regards

[kfriend]

@ksz2013's workaround appears to be working for me. Might be a good band aid for others affected.

Thanks!

[Ctucker9233]

@tkacheva Which version of Magento will this fix be included in?

[giusecapo]

Thanks @ksz2013 your wa worked like a charm!

[kfriend]

This is still an issue in 2.1.5.

[phanngochanh]

Thanks @ksz2013. It work for me