JAVASCRIPT fermer une modal formulaire

malo91 Posts 53 Registration date Tuesday February 2, 2021 Status Member Last seen August 3, 2022 - Apr 10, 2022 at 01:31 AM
HelpiOS Posts 13159 Registration date Friday October 30, 2015 Status Moderator Last seen January 26, 2023 - 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>
<div class="bground hidden" id="modalSubscribe">
<div class="secondModal" id="messageModalFill">
<div class="content">
<span id="closeSubscribe" class="close"></span>
<div class="modal-body">
<form id="formSubscribe" name="reserve" action="index.html" method="get">
<div class="formData">
<label for="first">Prénom</label><br>
<input class="text-control" type="text" id="first" name="first" minlength="2" /><br>
<span id="firstError"
data-message="Veuillez entrer 2 caractères ou plus pour le champ du prénom"></span>
</div>
<div class="formData">
<label for="last">Nom</label><br>
<input class="text-control" type="text" id="last" name="last" minlength="2" /><br>
<span id="lastError" data-message="Veuillez entrer 2 caractères ou plus pour le champ du nom"></span>
</div>
<div class="formData">
<label for="email">E-mail</label><br>
<input class="text-control" type="email" id="email" name="email" /><br>
<span id="emailError" data-message="Vous devez entrer un email valide."></span>
</div>
<div class="formData">
<label for="birthdate">Date de naissance</label><br>
<input class="text-control" type="date" id="birthdate" name="birthdate" /><br>
<span id="birthdateError" data-message="Vous devez entrer votre date de naissance."></span>
</div>
<div class="formData">
<label for="quantity">À combien de tournois GameOn avez-vous déjà participé ?</label><br>
<input type="number" class="text-control" id="quantity" name="quantity" min="0" max="99">
<span id="quantityError" data-message="Veuillez saisir une quantité"></span>
</div>
<p class="text-label">A quel tournoi souhaitez-vous participer cette année ?</p>
<div class="formData">
<input class="checkbox-input" type="radio" id="location1" name="location" value="New York" />
<label class="checkbox-label" for="location1">
<span class="checkbox-icon"></span>
New York</label>
<input class="checkbox-input" type="radio" id="location2" name="location" value="San Francisco" />
<label class="checkbox-label" for="location2">
<span class="checkbox-icon"></span>
San Francisco</label>
<input class="checkbox-input" type="radio" id="location3" name="location" value="Seattle" />
<label class="checkbox-label" for="location3">
<span class="checkbox-icon"></span>
Seattle</label>
<input class="checkbox-input" type="radio" id="location4" name="location" value="Chicago" />
<label class="checkbox-label" for="location4">
<span class="checkbox-icon"></span>
Chicago</label>
<input class="checkbox-input" type="radio" id="location5" name="location" value="Boston" />
<label class="checkbox-label" for="location5">
<span class="checkbox-icon"></span>
Boston</label>
<input class="checkbox-input" type="radio" id="location6" name="location" value="Portland" />
<label class="checkbox-label" for="location6">
<span class="checkbox-icon"></span>
Portland</label><br>
<span id="checkboxError" data-message="Vous devez choisir une option."></span>
</div>

<div class="formData">
<input class="checkbox-input" type="checkbox" id="checkbox1" name="checkbox" />
<label class="checkbox2-label" for="checkbox1">
<span class="checkbox-icon"></span>
J'ai lu et accepté les conditions générales
</label><br>
<span id="condGeneError" data-message="Vous devez valider les CGU."></span>
<br>
<input class="checkbox-input" type="checkbox" id="checkbox2" />
<label class="checkbox2-label" for="checkbox2">
<span class="checkbox-icon"></span>
Je souhaite être prévenu des prochains évènements.
</label>
<br>
</div>

<!-- button de submit -->
<input type="submit" class="button" value="C'est parti" />
</form>
</div>
</div>
</div>
</div>

</div></code>


merci

System Configuration: Windows / Chrome 100.0.4896.75

1 reply

HelpiOS Posts 13159 Registration date Friday October 30, 2015 Status Moderator Last seen January 26, 2023 1,870
Apr 12, 2022 at 09:53 AM
Hi,

You're on CCM in English. I invite you to repost your query on the French forum.

Regards
1