malo91
Posts45Registration dateTuesday February 2, 2021StatusMemberLast seenAugust 3, 2022
-
Apr 10, 2022 at 01:31 AM
HelpiOS
Posts14519Registration dateFriday October 30, 2015StatusModeratorLast seenNovember 20, 2024
-
Apr 12, 2022 at 09:53 AM
Hello, je souhaite fermer ma modal ( un formulaire) avec le button submit (c'est parti) et il ne se passe rien !
je dois arriver à fermer et au click faire ouvrir une seconde modal avec un message de remerciement d'inscription mais deja ca, ca ne marche pas !! pourriez vous m'aider? merci bcp voic mon code , je viens de commencer le JS
MON FORMULAIRE :
const formSubscribe = document.getElementById('formSubscribe');
formSubscribe.addEventListener('submit', function (event) {
event.preventDefault()
validateFields();
let formIsValid = document.getElementsByClassName('fieldError').length == 0;
if (formIsValid) {
// on ferme la modale et on vide les champs du formulaire
} else {
// on fait rien
}
});
function validateFields(){
validateInputText('first');
validateInputText('last');
validateInputEmail('email');
validateInputBirsthdate('birthdate');
validateInputQty('quantity');
validateInputCheckbox();
validateInputCondition();
}
function validateInputText(fieldId) {
const field = document.getElementById(fieldId);
const fieldValue = field.value.trim();
const regexText = /^(?=.{2,40}$)[a-zA-Z]+(?:[-'\s][a-zA-Z]+)*$/;
let isValid = regexText.test(fieldValue);
const fieldErrorId = fieldId + 'Error';
const fieldError = document.getElementById(fieldErrorId);
afficherErreur(fieldError, isValid);
}
function afficherErreur(fieldError, isValid) {
if (isValid) {
fieldError.closest('.formData').classList.remove('fieldError')
fieldError.innerHTML = ""; // si ok : vide
} else {
// sinon ajout du message d'erreur
fieldError.closest('.formData').classList.add('fieldError')
fieldError.innerHTML = fieldError.dataset.message;
}
}
function validateInputEmail(fieldId) {
const field = document.getElementById(fieldId);
const fieldValue = field.value.trim();
const regexEmail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
let isValid = fieldValue.length > 0
&& regexEmail.test(fieldValue);
const fieldErrorId = fieldId + 'Error';
const fieldError = document.getElementById(fieldErrorId);
afficherErreur(fieldError, isValid);
}
function validateInputQty(fieldId) {
const field = document.getElementById(fieldId);
const fieldValue = field.value.trim();
const regexNbr = /^[0-9]\d*$/;
let isValid = fieldValue.length > 0
&& regexNbr.test(fieldValue);
const fieldErrorId = fieldId + 'Error';
const fieldError = document.getElementById(fieldErrorId);
afficherErreur(fieldError, isValid);
}
function validateInputBirsthdate(fieldId) {
const field = document.getElementById(fieldId);
const fieldValue = field.value.trim();
const regexDate = /^(19|20)\d\d+[-/.]+[0-9]+[-/.][0-9]/;
let isValid = regexDate.test(fieldValue);
const fieldErrorId = fieldId + 'Error';
const fieldError = document.getElementById(fieldErrorId);
afficherErreur(fieldError, isValid);
}
function validateInputCheckbox(){
const checkboxError = document.getElementById('checkboxError');
const checkboxSelected = document.querySelector('[name=location]:checked');
let isValid = null !== checkboxSelected;
afficherErreur(checkboxError, isValid);
}
function validateInputCondition(){
const condGeneError = document.getElementById('condGeneError');
const condGeneSelected = document.querySelector('[name=checkbox]:checked');
let isValid = null !== condGeneSelected;
afficherErreur(condGeneError, isValid);
Mon HTML:
}<code html>
