Form validation with Custom error placement in magento2

Question

In my form i need to show validation message of specific field in my predefined or specific div, how to do it in Magento2?

Answer 1

in the phtml

<form class="reviewpay-form" action="<?php /* @escapeNotVerified */ echo $block->getSavePaymentUrl() ?>" method="post" id="reviewpay-form" enctype="multipart/form-data" data-hasrequired="<?php /* @escapeNotVerified */ echo __('* Required Fields') ?>">
.
.
.
.
.
 <div class="control">
 <div class="fields group group-2">
 <div class="field no-label month">
 <div class="control">
 <select id="<?php /* @noEscape */ echo $code; ?>_expiration" name="payment[cc_exp_month]"
 data-container="<?php /* @noEscape */ echo $code; ?>-cc-month" class="month cybersourcesmonth"
 data-validate='{
 required:true,
 "validate-cc-exp":"#<?php /* @noEscape */ echo $code; ?>_expiration_yr"
 }'>
 <?php foreach ($block->getCcMonths() as $k => $v): ?>
 <option value="<?php /* @noEscape */ echo $k ? $block->escapeHtml($k) : '' ?>"
 <?php if ($k == $ccExpMonth): ?> selected="selected"<?php endif; ?>>
 <?php echo $k; ?>
 </option>
 <?php endforeach ?>
 </select>
 </div>
 </div>
 <div class="field no-label year">
 <div class="control">
 <select id="<?php /* @noEscape */ echo $code; ?>_expiration_yr" name="payment[cc_exp_year]"
 class="year" data-container="<?php /* @noEscape */ echo $code; ?>-cc-year"
 data-validate='{required:true}'>
 <?php foreach ($block->getCcYears() as $k => $v): ?>
 <option value="<?php /* @noEscape */ echo $k ? $block->escapeHtml($k) : ''; ?>"
 <?php if ($k == $ccExpYear): ?> selected="selected"<?php endif; ?>>
 <?php echo $block->escapeHtml($v); ?>
 </option>
 <?php endforeach ?>
 </select>
 </div>
 </div>
 <div class="cybersourcesmontherror"></div>
 </div>
 </div>
 ..
 .
 .
 .
 .</form>
</div>
<script>
 require([
 "jquery",
 "mage/mage"
 ], function($){
 var dataForm = $('#reviewpay-form');
 dataForm.mage('validation', {
 errorPlacement: function(error, element) {
 var errorPlacement = element;
 if (element.hasClass('cybersourcesmonth')) {
 var cybfieldWrapper = $('.cybersourcesmontherror');
 error.appendTo('.cybersourcesmontherror');
 //errorPlacement = cybfieldWrapper.after(error);
 }
 else {
 error.insertAfter(element);
 }
 }
 });
 });
</script>

Note :- make sure in form tag do not use data-mage-init='{"validation":{}}' else it will init default js you need to init the validation and then use errorPlacement call back write you logic

• Amit Singh: errorPlacement only adds error elements once, It does not trigger multiple times when the validation fails. Do you have any solution for that
• thdoan: @AmitSingh in that case, you can add a click handler to the add-to-cart button and do if ($('#product_addtocart_form').valid()) { ... } else { ... }. Note that you also have access to highlight and unhighlight callbacks (see module-catalog\view\frontend\web\product\view\validation.js).