✨ Story 5.2: validation JS contact
This commit is contained in:
@@ -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'); ?>
|
||||
|
||||
Reference in New Issue
Block a user