1

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

2

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

  • errorPlacement only adds error elements once, It does not trigger multiple times when the validation fails. Do you have any solution for that – Amit Singh Oct 18 '16 at 10:44
  • 1
    @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). – thdoan Nov 10 '16 at 12:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.