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