Form validation

        <!-- Validation -->
        <form id="validation-demo" class="coop-form" novalidate>
            <!-- Validation summary (empty) -->
            <div id="validation-demo-box" class="coop-c-message coop-c-message--error" tabindex="-1" role="alert" hidden></div>
            <h3>Your details</h3>
            <div class="coop-form__row">
                <label class="coop-form__label" for="validation-demo-name">Your full name</label>
                <p id="validation-demo-name-error" class="coop-form__error" hidden></p>
                <input id="validation-demo-name" class="coop-form__field coop-form__input" type="text" autocomplete="name" name="validation-demo-name">
            </div>
            <div class="coop-form__row">
                <label class="coop-form__label" for="validation-demo-email">Your email address</label>
                <p id="validation-demo-email-hint" class="coop-form__hint">We’ll only use this to contact you about your will</p>
                <p id="validation-demo-email-error" class="coop-form__error" hidden></p>
                <input id="validation-demo-email" class="coop-form__field coop-form__input" type="email" autocomplete="email" name="validation-demo-email" aria-describedby="validation-demo-email-hint">
            </div>
            <div class="coop-form__row">
                <button class="coop-btn coop-btn--primary" aria-live="assertive" aria-relevant="additions text" aria-atomic="true">
                    <span class="coop-btn__text" role="status" hidden>Updating details…</span>
                    <span class="coop-btn__text">Update details</span>
                </button>
            </div>
        </form>