alepee/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Mon formulaire</title>
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <header
            class="container jumbotron"
            style="height: 300px;background-image: url('https://static1.evcdn.net/images/reduction/1504403_w-1980_h-620_q-70_m-crop.jpg'); background-size: cover"
        >
            <h1>Réservation</h1>
        </header>

        <div class="container">
            <form id="booking" action="#" method="PUT" autocomplete="off">
                <fieldset>
                    <legend>Identité</legend>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="firstname">Prénom</label
                                ><input
                                    class="form-control"
                                    id="firstname"
                                    name="firstname"
                                    type="text"
                                    required
                                />
                                <div
                                    class="invalid-feedback"
                                    hidden
                                    style="display: block"
                                ></div>
                            </div>
                        </div>

                        <div class="col">
                            <div class="form-group">
                                <label for="lastname">Nom</label
                                ><input
                                    type="text"
                                    id="lastname"
                                    class="form-control"
                                    name="lastname"
                                    required
                                />
                                <div
                                    class="invalid-feedback"
                                    hidden
                                    style="display: block"
                                ></div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="birthdate"
                                    >Date de naissance
                                    <small class="form-text text-muted"
                                        >Vous devez être agé de 18 ans ou plus
                                        pour procéder à un enregistrement</small
                                    ></label
                                ><input
                                    type="date"
                                    id="birthdate"
                                    class="form-control"
                                    name="birthdate"
                                    max="2001-01-01"
                                    required
                                />
                                <div
                                    class="invalid-feedback"
                                    hidden
                                    style="display: block"
                                ></div>
                            </div>
                        </div>
                        <div class="col"></div>
                    </div>
                </fieldset>
                <hr />
                <fieldset>
                    <legend>Référence</legend>
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                                <label for="passport">Numéro de Passeport</label
                                ><input
                                    class="form-control"
                                    id="passport"
                                    name="passport"
                                    type="text"
                                    required
                                />
                                <div
                                    class="invalid-feedback"
                                    hidden
                                    style="display: block"
                                ></div>
                            </div>
                        </div>
                        <div class="col"></div>
                    </div>
                </fieldset>

                <div class="form-actions">
                    <button class="btn btn-primary" type="submit">
                        Créer mon compte
                    </button>
                </div>
            </form>
        </div>
        <script src="./script.js"></script>
    </body>
</html>

## script.js
/**
 * 1. (HTML) Ajout des contraintes required dans le HTML
 * 2. Afficher les erreurs natives
 * 3. (HTML) Ajouter la contrainte MAX sur la date dans le HTML
 * 4. Déclencher la vérification au changement du champ
 *    Masquer / Afficher les erreur au changement
 * 5. Ajout d'une Custom Constraint sur le passport
 * 6. Extraction de la règle de validation
 */

/** 2 */
const form = document.getElementById('booking');
form.addEventListener(
    'invalid',
    event => {
        event.preventDefault();
        const field = event.target;
        const feedbackContainer = field.parentNode.querySelector(
            '.invalid-feedback'
        );
        feedbackContainer.innerText = field.validationMessage;
        feedbackContainer.hidden = false;
    },
    { capture: true }
);

/** 4 */
form.addEventListener('change', event => {
    const field = event.target;
    const feedbackContainer = field.parentNode.querySelector(
        '.invalid-feedback'
    );

    if (field.checkValidity() /** fire invalid event if false */) {
        feedbackContainer.hidden = true;
    }
});

/////////////////////////////

/** 5 */
form.elements.passport.addEventListener('change', event => {
    const field = event.target;
    const isValid = passportConstraint(field); // field.value.match(/^\d{2}[A-Z]{2}\d{5}$/) ? true : false;

    if (isValid === false) {
        field.setCustomValidity('PassportInvalid');
    } else {
        field.setCustomValidity('');
    }
});

/** 6 */
function passportConstraint(field) {
    const value = field.value;
    const pattern = /^\d{2}[A-Z]{2}[0-9]{5}$/;

    if (value.match(pattern) === null) {
        return false;
    }

    return true;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Mon formulaire</title>
	<link
	rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
	crossorigin="anonymous"
	/>
	</head>
	<body>
	<header
	class="container jumbotron"
	style="height: 300px;background-image: url('https://static1.evcdn.net/images/reduction/1504403_w-1980_h-620_q-70_m-crop.jpg'); background-size: cover"
	>
	<h1>Réservation</h1>
	</header>

	<div class="container">
	<form id="booking" action="#" method="PUT" autocomplete="off">
	<fieldset>
	<legend>Identité</legend>
	<div class="row">
	<div class="col">
	<div class="form-group">
	<label for="firstname">Prénom</label
	><input
	class="form-control"
	id="firstname"
	name="firstname"
	type="text"
	required
	/>
	<div
	class="invalid-feedback"
	hidden
	style="display: block"
	></div>
	</div>
	</div>

	<div class="col">
	<div class="form-group">
	<label for="lastname">Nom</label
	><input
	type="text"
	id="lastname"
	class="form-control"
	name="lastname"
	required
	/>
	<div
	class="invalid-feedback"
	hidden
	style="display: block"
	></div>
	</div>
	</div>
	</div>
	<div class="row">
	<div class="col">
	<div class="form-group">
	<label for="birthdate"
	>Date de naissance
	<small class="form-text text-muted"
	>Vous devez être agé de 18 ans ou plus
	pour procéder à un enregistrement</small
	></label
	><input
	type="date"
	id="birthdate"
	class="form-control"
	name="birthdate"
	max="2001-01-01"
	required
	/>
	<div
	class="invalid-feedback"
	hidden
	style="display: block"
	></div>
	</div>
	</div>
	<div class="col"></div>
	</div>
	</fieldset>
	<hr />
	<fieldset>
	<legend>Référence</legend>
	<div class="row">
	<div class="col">
	<div class="form-group">
	<label for="passport">Numéro de Passeport</label
	><input
	class="form-control"
	id="passport"
	name="passport"
	type="text"
	required
	/>
	<div
	class="invalid-feedback"
	hidden
	style="display: block"
	></div>
	</div>
	</div>
	<div class="col"></div>
	</div>
	</fieldset>

	<div class="form-actions">
	<button class="btn btn-primary" type="submit">
	Créer mon compte
	</button>
	</div>
	</form>
	</div>
	<script src="./script.js"></script>
	</body>
	</html>
	/**
	* 1. (HTML) Ajout des contraintes required dans le HTML
	* 2. Afficher les erreurs natives
	* 3. (HTML) Ajouter la contrainte MAX sur la date dans le HTML
	* 4. Déclencher la vérification au changement du champ
	* Masquer / Afficher les erreur au changement
	* 5. Ajout d'une Custom Constraint sur le passport
	* 6. Extraction de la règle de validation
	*/

	/** 2 */
	const form = document.getElementById('booking');
	form.addEventListener(
	'invalid',
	event => {
	event.preventDefault();
	const field = event.target;
	const feedbackContainer = field.parentNode.querySelector(
	'.invalid-feedback'
	);
	feedbackContainer.innerText = field.validationMessage;
	feedbackContainer.hidden = false;
	},
	{ capture: true }
	);

	/** 4 */
	form.addEventListener('change', event => {
	const field = event.target;
	const feedbackContainer = field.parentNode.querySelector(
	'.invalid-feedback'
	);

	if (field.checkValidity() /** fire invalid event if false */) {
	feedbackContainer.hidden = true;
	}
	});

	/////////////////////////////

	/** 5 */
	form.elements.passport.addEventListener('change', event => {
	const field = event.target;
	const isValid = passportConstraint(field); // field.value.match(/^\d{2}[A-Z]{2}\d{5}$/) ? true : false;

	if (isValid === false) {
	field.setCustomValidity('PassportInvalid');
	} else {
	field.setCustomValidity('');
	}
	});

	/** 6 */
	function passportConstraint(field) {
	const value = field.value;
	const pattern = /^\d{2}[A-Z]{2}[0-9]{5}$/;

	if (value.match(pattern) === null) {
	return false;
	}

	return true;
	}