JAVASCRIPT fermer une modal formulaire

malo91
Posts
50
Registration date
Tuesday February 2, 2021
Status
Member
Last seen
April 10, 2022
- Apr 10, 2022 at 01:31 AM
HelpiOS
Posts
12346
Registration date
Friday October 30, 2015
Status
Moderator
Last seen
May 21, 2022
- 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
12346
Registration date
Friday October 30, 2015
Status
Moderator
Last seen
May 21, 2022
1,801
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