Newsletter: Errors full view

<style>
    /* Styles for visual demo only. Ordinarily these styles would be applied by a validation script. */
    .mzp-c-newsletter .mzp-c-form-errors,
    .mzp-c-newsletter .mzp-c-newsletter-details {
        display: block;
    }
</style>

<aside class="mzp-c-newsletter">
    <div class="mzp-c-newsletter-image">
        <img src="../../img/newsletter-image.png" width="346" height="346" alt="">
    </div>

    <form id="newsletter-form" class="mzp-c-newsletter-form" name="newsletter-form" action="#" method="">
        <header class="mzp-c-newsletter-header">
            <h3 class="mzp-c-newsletter-title">Love the Web?</h3>
            <p class="mzp-c-newsletter-tagline">Get the Mozilla newsletter and help us keep it open and free.</p>
        </header>

        <fieldset class="mzp-c-newsletter-content">
            <div class="mzp-c-form-errors" id="newsletter-errors">
                <ul class="mzp-u-list-styled">
                    <li>Please enter a valid email address.</li>
                    <li>You must agree to the privacy notice.</li>
                </ul>
            </div>

            <div>
                <label for="email">Your email address</label>
                <input type="email" class="mzp-js-email-field" id="email" name="email" placeholder="yourname@example.com" required aria-required="true" value="not-an-email">
            </div>

            <div id="newsletter-details" class="mzp-c-newsletter-details">

                <label for="">Country</label>
                <select name="country" id="">
                    <option value="DE">Germany</option>
                    <option value="FR">France</option>
                    <option value="IN">India</option>
                    <option value="JP">Japan</option>
                    <option value="ES">Spain</option>
                    <option value="US">United States</option>
                    <option value="">And so on…</option>
                </select>

                <label for="language">Language</label>
                <select name="language" id="language">
                    <option value="de">Deutsch</option>
                    <option value="en">English</option>
                    <option value="es">Español</option>
                    <option value="fr">Français</option>
                    <option value="hi-IN">हिन्दी (भारत)</option>
                    <option value="ja">日本語</option>
                </select>

                <fieldset class="mzp-u-inline">
                    <legend>Format</legend>
                    <p>
                        <label for="format-html" class="mzp-u-inline">
                            <input type="radio" id="format-html" name="fmt" value="H" checked> HTML
                        </label>
                        <label for="format-text" class="mzp-u-inline">
                            <input type="radio" id="format-text" name="fmt" value="T"> Text
                        </label>
                    </p>
                </fieldset>

                <p>
                    <label for="privacy" class="mzp-u-inline">
                        <input type="checkbox" id="privacy" name="privacy" required aria-required="true">
                        I’m okay with Mozilla handling my info as explained in <a href="https://www.mozilla.org/privacy/websites/">this Privacy Notice</a>
                    </label>
                </p>
            </div>

            <p class="mzp-c-form-submit">
                <button type="submit" class="mzp-c-button" id="newsletter-submit">Sign up now</button>
                <span class="mzp-c-fieldnote">We will only send you Mozilla-related information.</span>
            </p>
        </fieldset>
    </form>

    <div id="newsletter-thanks" class="mzp-c-newsletter-thanks">
        <h3>Thanks!</h3>
        <p>If you haven’t previously confirmed a subscription to a Mozilla-related newsletter you may have to do so. Please check your inbox or your spam filter for an email from us.</p>
    </div>

</aside>

<script src="../../protocol/js/newsletter.js"></script>