Showing results for 
Search instead for 
Did you mean: 

Form validation error position

Form validation error position

I'm creating a theme but using Zurb foundation for sites as the css frame work.


This is my subscribe.phtml


<form id="subscribe-newsletter" class="form subscribe" novalidate action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>" method="post" data-mage-init='{"validation": {"errorClass": "mage-error"}}' id="newsletter-validate-detail">

                    <div class="input-group">

                        <input name="email" type="email" id="newsletter" class="input-group-field" placeholder="<?= $block->escapeHtml(__('Enter your email address')) ?>" data-mage-init='{"mage/trim-input":{}}' data-validate="{required:true, 'validate-email':true}"/>
<!-- from here -->
                        <div class="input-group-button">

                            <button class="button" title="<?= $block->escapeHtmlAttr(__('Subscribe')) ?>" type="submit"><?= $block->escapeHtml(__('Sign up now')) ?></button>


                    <!-- to here -->

I want to move the error position from directly after input to outside the input group, how is this possible?