<form action="" method="" class="form--newsletter">
<label>Votre adresse e-mail</label>
<div class="input-icon__container">
<i class="icon icon--enveloppe icon--enveloppe--gray"></i>
<input type="text" aria-label="Votre adresse e-mail" />
</div>
<input type="submit" class="button" value="Inscrivez-vous !" />
<label class="checkbox-container form--newsletter__opt-in">
<input type="checkbox"/>
<span>En cochant cette case, vous acceptez nos <a href="">politiques de confidentialité</a></span>
</label>
</form>
<form action="" method="" class="form--newsletter{{#if lighter}} form--newsletter--lighter{{/if}}">
<label>Votre adresse e-mail</label>
<div class="input-icon__container">
<i class="icon icon--enveloppe icon--enveloppe--gray"></i>
<input type="text" aria-label="Votre adresse e-mail"/>
</div>
<input type="submit" class="button" value="Inscrivez-vous !" />
<label class="checkbox-container form--newsletter__opt-in">
<input type="checkbox"/>
<span>En cochant cette case, vous acceptez nos <a href="">politiques de confidentialité</a></span>
</label>
</form>
/* No context defined for this component. */
.form--newsletter {
.input-icon__container {
margin-bottom: $margin-m;
}
input[type="submit"] {
width: 100%;
@include mediaWQuery($media-query-s) {
padding-left: 1rem;
padding-right: 1rem;
}
@include mediaWQuery($media-query-m) {
width: auto;
padding-left: 2rem;
padding-right: 2rem;
}
}
@include mediaWQuery($media-query-m) {
display: flex;
flex-wrap: wrap;
label {
width: 100%;
}
.input-icon__container {
margin-bottom: 0;
width: auto;
flex-grow: 1;
> input {
height: 100%;
border-radius: $border-radius-xs 0 0 $border-radius-xs!important;
border-right: 0;
}
}
input[type="submit"] {
border-radius: 0 $border-radius-xs $border-radius-xs 0!important;
margin-left: -2px;
}
}
&__opt-in {
margin-top: 1rem;
}
&--lighter {
color: $c-white;
a { color: $c-white }
input[type="submit"] {
background: $c-red;
&:hover, &:focus { background: darken($c-red, 10%) }
}
}
}
/**
* Check if value is an email
*
* @param {string} email Value to check.
*
* @return {boolean} Return boolean.
*/
function validateEmail(email) {
let re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
let newsletterForms = document.querySelectorAll('.form--newsletter');
[].slice.call(newsletterForms).forEach(newsletterForm => {
let input = newsletterForm.querySelector('input[type="text"]'),
check = newsletterForm.querySelector('input[type="checkbox"]');
newsletterForm.addEventListener('submit', event => {
event.preventDefault();
// Check if there's already a notification inside the form
let activeNotification = newsletterForm.querySelector('.notification');
if(activeNotification) activeNotification.remove();
// Init var
let formError = false,
notificationOptions;
// If input is empty
if(!input.value) {
formError = true;
notificationOptions = { content: `Le champ e-mail doit être rempli.` }
// Else if string isn't an email
} else if(!validateEmail(input.value)) {
formError = true;
notificationOptions = { content: `L'adresse entrée n'est pas valide.'.` }
// Else if privacy isn't checked
} else if(!check.checked) {
formError = true;
notificationOptions = { content: `Vous devez acceptez nos politiques pour pouvoir vous inscrire.` }
}
// If there's an error inside the form:
if(formError) {
notificationOptions.alt = newsletterForm.classList.contains('form--newsletter--lighter') ? true : false;
let notification = new Notification(notificationOptions);
newsletterForm.appendChild(notification.createErrorNotification());
} else {
// Else, we go ahead and post
let notification = new Notification({
content: 'Merci de vous êtes inscrit!',
alt: true
})
newsletterForm.appendChild(notification.createValidNotification());
}
})
})
There are no notes for this item.