Story 5.2: validation JS contact

This commit is contained in:
2026-02-04 21:06:19 +01:00
parent 70580f2d96
commit fb95a39792
6 changed files with 293 additions and 46 deletions

View File

@@ -41,6 +41,7 @@ include_template('navbar', compact('currentPage'));
autocomplete="family-name"
placeholder="Dupont"
>
<p class="error-message hidden" data-error="nom"></p>
</div>
<div>
@@ -55,6 +56,7 @@ include_template('navbar', compact('currentPage'));
autocomplete="given-name"
placeholder="Marie"
>
<p class="error-message hidden" data-error="prenom"></p>
</div>
</div>
@@ -71,6 +73,7 @@ include_template('navbar', compact('currentPage'));
autocomplete="email"
placeholder="marie.dupont@example.com"
>
<p class="error-message hidden" data-error="email"></p>
</div>
<div>
@@ -95,6 +98,7 @@ include_template('navbar', compact('currentPage'));
<option value="poste">Je souhaite vous proposer un poste</option>
<option value="autre">Autre</option>
</select>
<p class="error-message hidden" data-error="categorie"></p>
</div>
<div>
@@ -108,6 +112,7 @@ include_template('navbar', compact('currentPage'));
maxlength="200"
placeholder="Résumez votre demande en quelques mots"
>
<p class="error-message hidden" data-error="objet"></p>
</div>
<div>
@@ -121,13 +126,14 @@ include_template('navbar', compact('currentPage'));
rows="6"
placeholder="Décrivez votre projet ou votre demande..."
></textarea>
<p class="error-message hidden" data-error="message"></p>
<p class="text-xs text-text-muted mt-2">
<span id="message-count">0</span> / 5000 caractères
</p>
</div>
<div class="flex flex-col sm:flex-row gap-4 pt-4">
<button type="submit" class="btn-primary flex-1 justify-center">
<button type="submit" id="submit-btn" class="btn-primary flex-1 justify-center">
Envoyer le message
</button>
<button type="button" class="btn-ghost">
@@ -140,18 +146,6 @@ include_template('navbar', compact('currentPage'));
</section>
</main>
<script>
const messageField = document.getElementById('message');
const messageCount = document.getElementById('message-count');
if (messageField && messageCount) {
const updateCount = () => {
messageCount.textContent = String(messageField.value.length);
};
updateCount();
messageField.addEventListener('input', updateCount);
}
</script>
<script src="/assets/js/contact-form.js" defer></script>
<?php include_template('footer'); ?>