JSFiddle - React, Tailwind, and code Playground

HTML

<form id="Formulaire" name="Formulaire" enctype="text/plain" method="post" action="mailto:monmail@monserveur.com?subject=test">
		<h2>Formulaire de réservation :</h2>
		<p>(* = champ obligatoire)</p>
		<ul>
			<li>
				<label for="nom">Nom :*</label><input type="text" id="nom" name="nom" placeholder="Votre nom ici" required />
			</li>
			<li>
				<label for="prenom">Prénom :</label><input type="text" id="prenom" name="prenom" placeholder="Votre prénom ici" />
			</li>
			<li>
				<label for="tel">Téléphone :</label><input type="tel" id="tel" name="tel" maxlength="10" placeholder="0123456789" />
			</li>
			<li>
				<label for="mail">Email :*</label><input type="email" id="mail" name="mail" placeholder="xxx@yyyy.zzz" required />
			</li>
			<li>
				<label for="resa">Votre réservation est pour :</label>
				<select id="resa1" name="resa1" >
					<option value="demijour">Demi-journée</option>
					<option value="jour">Journée</option>
					<option value="repas">Repas</option>
				</select>
				<input type="text" id="nombre1" name="nombre1" placeholder="Qté" />
				<input type="text" id="stot1" name="stot1" placeholder="Sous-total HT" disabled /><br>
				<label></label>
				<select id="resa2" name="resa2" >
					<option value="demijour">Demi-journée</option>
					<option value="jour" selected>Journée</option>
					<option value="repas">Repas</option>
				</select>
				<input type="text" id="nombre2" name="nombre2" placeholder="Qté" />
				<input type="text" id="stot2" name="stot2" placeholder="Sous-total HT" disabled /><br>
				<label></label>
				<select id="resa3" name="resa3" >
					<option value="demijour">Demi-journée</option>
					<option value="jour">Journée</option>
					<option value="repas" selected>Repas</option>
				</select>
				<input type="text" id="nombre3" name="nombre3" placeholder="Qté" />
				<input type="text" id="stot3" name="stot3" placeholder="Sous-total HT" disabled />
			</li>
			<li>
				<label for="st">Sous-total HT:</label><input...

JavaScript

var VerifFormulaire = 0;

function conditionsVerifiees() {
   var erreur=0;
   var erreurnom=0;
   var erreurmail=0;
   var Nom = document.getElementById("nom").value;
   var Mail = document.getElementById("mail").value;
        var testMail = Mail.search("@");
   var IDNom = document.getElementById("nom");
   var IDMail = document.getElementById("mail");
   var Condition = document.getElementById("cg").checked;
   VerifFormulaire = 1;		
    if (Nom == "") {
        alert("Merci de saisir un nom.");
        IDNom.style.borderColor = "#FF0000";
        erreur++; 
		erreurnom=1;
    }
    else if (Mail=="") {
        IDNom.style.borderColor = "#808080";
        alert("Merci de rentrer votre adresse e-mail");
        IDMail.style.borderColor = "#FF0000";
        erreur++;
		erreurmail=1;
    }
    else if (Mail !=="" && testMail <= 0) {
		alert("Votre adresse e-mail n'est pas valide.");
		IDMail.style.borderColor = "#FF0000";
		erreur++;
		erreurmail=1;
    }else if (Condition==false) {
		document.getElementById("cg").style.borderColor = "#FF0000";
        alert("Avant l'envoie du formulaire, veuillez accepter les conditions générales en cochant la case.");
        erreur++;
    }else
	{        
        document.getElementById("cg").style.borderColor = "#808080";
		var nomMinuscules = Nom, nomMajuscules = nomMinuscules.toUpperCase();
        Nom = nomMajuscules;    
	}
	
	if (erreurnom==0) {
        IDNom.style.borderColor = "#808080";
	}
	if (erreurmail==0) {
        IDMail.style.borderColor = "#808080";
	}
	if (erreur>0)
    return VerifFormulaire=0
	else{
	return VerifFormulaire=1;
		
	}
	
	
}

// Fonction impression du formulaire
function impressionFormulaire() {
    window.print();
}

// Fonction On change value
function CalculerTotal() {
	var Valeur;
	var choix;
	Valeur = parseInt(document.getElementById("nombre1").value);
	alert(Valeur);
	if (isNaN(Valeur)) { 
         Valeur = 0; 
	choix = document.getElementById("resa1").value;
}
	
	if (Valeur!=''){
  if...