Magento – Form validation with Custom error placement in magento2

form-validationmagento2validation

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

Best Answer

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

Related Topic