<div class="wrapper">

    <form>
        <div class="field">
            <label for="email">Email:</label>
            <input id="email" type="email" />
        </div>
        <div class="field">
            <label for="url">Url:</label>
            <input id="url" type="url" />
        </div>
        <div class="field">
            <label for="month">Month:</label>
            <input type="month" name="month" id="month" min="2022-06" />
        </div>
        <div class="field">
            <label for="number">min=1 - max=100:</label>
            <input id="number" type="number" min="1" max="100" />
        </div>
        <div id="message" class="msg">Here goes the validation message</div>
    </form>

</div>
* {
    box-sizing: border-box;
}

html, body {
    width: 100vw;
    height: 100vh;
    font-size: 1.25rem;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    background-color: #f2f2f2;
    padding: 2rem;
    width: 425px;
}

.field {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.field label {
    flex: 0 0 fit-content;
    display: block;
}

.field input {
    width: 100%
}

.msg {
    font-size: 0.85rem;
}

form {
    display: flex;
    gap: 1rem;
    flex-direction: column;
}
const form = document.querySelector('form');
const message = document.querySelector('#message');

form.addEventListener('input', addMessage)

function addMessage(e) {
    const validationMessage = e.target.validationMessage;
    message.innerText = validationMessage || 'Here goes the validation message'
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.