Add contact form validation
This commit is contained in:
Paul Nicoué
parent
2a4cf52465
commit
d3465c6ea3
12 changed files with 429 additions and 204 deletions
|
|
@ -1,30 +1,51 @@
|
|||
<template>
|
||||
|
||||
<form class="contact-form">
|
||||
<VeeForm class="contact-form" @submit="sendEmail" :validation-schema="contactFormSchema">
|
||||
<div class="contact-form__name">
|
||||
<label for="name">Nom</label>
|
||||
<input type="text" id="name" name="name" required />
|
||||
<VeeField name="name" />
|
||||
<Transition name="validation">
|
||||
<VeeError name="name" as="p" />
|
||||
</Transition>
|
||||
</div>
|
||||
<div class="contact-form__email">
|
||||
<label for="email">Adresse e-mail</label>
|
||||
<input type="email" id="email" name="email" required />
|
||||
<VeeField name="email" />
|
||||
<Transition name="validation">
|
||||
<VeeError name="email" as="p" />
|
||||
</Transition>
|
||||
</div>
|
||||
<div class="contact-form__subject">
|
||||
<label for="subject">Sujet</label>
|
||||
<input type="text" id="subject" name="subject" required />
|
||||
<VeeField name="subject" />
|
||||
<Transition name="validation">
|
||||
<VeeError name="subject" as="p" />
|
||||
</Transition>
|
||||
</div>
|
||||
<div class="contact-form__message">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" name="message" required></textarea>
|
||||
<VeeField name="message" as="textarea" />
|
||||
<Transition name="validation">
|
||||
<VeeError name="message" as="p" />
|
||||
</Transition>
|
||||
</div>
|
||||
<button class="contact-form__button" @click.prevent="sendEmail()">
|
||||
<button class="contact-form__button">
|
||||
<span class="contact-form__button-text">Envoyer</span>
|
||||
<svg class="contact-form__button-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
|
||||
<line x1="23" y1="1" x2="10.9" y2="13.1"/>
|
||||
<polygon points="23 1 15.3 23 10.9 13.1 1 8.7 23 1"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
<Transition name="loader">
|
||||
<div class="contact-form__loader" aria-hidden="true" ref="loader" v-show="isLoading"></div>
|
||||
</Transition>
|
||||
<Transition name="validation">
|
||||
<div class="contact-form__validation" v-if="isValidated" v-click-outside="hideValidationMessage">
|
||||
<p class="contact-form__validation-success" v-if="isSuccessful">Votre message a bien été envoyé !</p>
|
||||
<p class="contact-form__validation-error" v-else>Oups ! Une erreur est survenue...</p>
|
||||
</div>
|
||||
</Transition>
|
||||
</VeeForm>
|
||||
|
||||
</template>
|
||||
|
||||
|
|
@ -34,37 +55,66 @@
|
|||
// DATA
|
||||
// --------------------------------------------------
|
||||
|
||||
// const contactName = ref('');
|
||||
// const contactEmailAddress = ref('');
|
||||
// const contactSubject = ref('');
|
||||
// const contactMessage = ref('');
|
||||
// Yup schema builder
|
||||
|
||||
const contactName = 'Saint Victeur';
|
||||
const contactEmailAddress = 'saint.victeur@email.com';
|
||||
const contactSubject = 'Test - API Mailjet';
|
||||
const contactMessage = `Saint Victeur vous bénit !`;
|
||||
const yupObject = useNuxtApp().$yupObject;
|
||||
const yupString = useNuxtApp().$yupString;
|
||||
|
||||
const contactFormSchema = yupObject({
|
||||
name: yupString()
|
||||
.min(2, 'Votre nom doit comprendre au moins ${min} caractères.')
|
||||
.required('Veuillez saisir votre nom.'),
|
||||
email: yupString()
|
||||
.email('Veuillez saisir une adresse e-mail valide.')
|
||||
.required('Veuillez saisir votre adresse e-mail.'),
|
||||
subject: yupString()
|
||||
.min(2, 'Le sujet de votre message doit comprendre au moins ${min} caractères.')
|
||||
.required('Veuillez saisir le sujet de votre message.'),
|
||||
message: yupString()
|
||||
.min(10, 'Votre message doit comprendre au moins ${min} caractères.')
|
||||
.required('Veuillez saisir votre message.')
|
||||
});
|
||||
|
||||
// Form validation
|
||||
|
||||
const isValidated = ref(false);
|
||||
const isSuccessful = ref(undefined);
|
||||
|
||||
// Loader
|
||||
|
||||
const isLoading = ref(false);
|
||||
const loader = ref(null);
|
||||
|
||||
// --------------------------------------------------
|
||||
// LOGIC
|
||||
// --------------------------------------------------
|
||||
|
||||
const sendEmail = async () => {
|
||||
const sendEmail = async (values) => {
|
||||
isLoading.value = true;
|
||||
try {
|
||||
$fetch('/api/mailjet', {
|
||||
const response = await $fetch('/api/contact', {
|
||||
method: 'post',
|
||||
body: {
|
||||
name: contactName,
|
||||
emailAddress: contactEmailAddress,
|
||||
subject: contactSubject,
|
||||
message: contactMessage
|
||||
name: values.name,
|
||||
emailAddress: values.email,
|
||||
subject: values.subject,
|
||||
message: values.message
|
||||
}
|
||||
});
|
||||
console.log('Success!');
|
||||
} catch(err) {
|
||||
console.log('Failure!');
|
||||
isSuccessful.value = true;
|
||||
} catch {
|
||||
isSuccessful.value = false;
|
||||
} finally {
|
||||
loader.value.addEventListener('animationiteration', function hideLoader(event) {
|
||||
event.currentTarget.removeEventListener('animationiteration', hideLoader);
|
||||
isLoading.value = false;
|
||||
isValidated.value = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const hideValidationMessage = () => isValidated.value = false;
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -74,18 +124,19 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
.contact-form {
|
||||
width: var(--text-width);
|
||||
max-width: var(--small-content-max-width);
|
||||
display: grid;
|
||||
grid:
|
||||
'name name' auto
|
||||
'email email' auto
|
||||
'subject subject' auto
|
||||
'message message' auto
|
||||
'button .' auto
|
||||
'button loader' auto
|
||||
'validation validation' auto
|
||||
/ 1fr 1fr;
|
||||
place-content: start;
|
||||
place-items: start;
|
||||
gap: 2rem;
|
||||
gap: 1.5rem;
|
||||
|
||||
&__name {
|
||||
grid-area: name;
|
||||
|
|
@ -107,26 +158,83 @@
|
|||
&__email,
|
||||
&__subject,
|
||||
&__message {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
grid-area: button;
|
||||
@include button-with-icon;
|
||||
}
|
||||
|
||||
&__loader {
|
||||
grid-area: loader;
|
||||
place-self: center end;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: var(--accent-color) transparent;
|
||||
border-radius: 50%;
|
||||
animation: rotate-360 800ms ease-in-out infinite;
|
||||
}
|
||||
|
||||
&__validation {
|
||||
grid-area: validation;
|
||||
|
||||
&-error {
|
||||
color: var(--error-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet-media-query) {
|
||||
|
||||
grid:
|
||||
'name .' auto
|
||||
'email .' auto
|
||||
'subject subject' auto
|
||||
'message message' auto
|
||||
'button .' auto
|
||||
/ 1fr 1fr;
|
||||
'name name .' auto
|
||||
'email email .' auto
|
||||
'subject subject subject' auto
|
||||
'message message message' auto
|
||||
'button loader loader' auto
|
||||
'validation validation validation' auto
|
||||
/ 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
// --------------------------------------------------
|
||||
// TRANSITION COMPONENTS
|
||||
// --------------------------------------------------
|
||||
|
||||
.validation-enter-from,
|
||||
.validation-leave-to {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
}
|
||||
|
||||
.validation-enter-active,
|
||||
.validation-leave-active {
|
||||
transition:
|
||||
opacity 400ms linear,
|
||||
max-height 400ms linear;
|
||||
}
|
||||
|
||||
.validation-enter-to,
|
||||
.validation-leave-from {
|
||||
opacity: 1;
|
||||
max-height: calc(2 * (var(--caption-font-size) * var(--line-height)));
|
||||
}
|
||||
|
||||
.loader-enter-from,
|
||||
.loader-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.loader-enter-active,
|
||||
.loader-leave-active {
|
||||
transition: opacity 400ms linear;
|
||||
}
|
||||
|
||||
.loader-enter-to,
|
||||
.loader-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue