JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="container">
<h2>Formulaire de réservation :</h2>
<p>(* = champ obligatoire)</p>
<form id="formulaire" name="formulaire">
<table cellpadding="0" cellspacing="4" border="0">
<tbody>
<tr>
<td style="width:250px"><label for="nom">Nom :*</label></td>
<td style="width:450px"><input type="text" id="nom" name="nom" required autofocus placeholder="Votre nom ici" required /></td>
</tr>
<tr>
<td><label for="prenom">Prénom :</label></td>
<td><input type="text" id="prenom" name="prenom" placeholder="Votre prénom ici" /></td>
</tr>
<tr>
<td><label for="tel">Téléphone :</label></td>
<td><input type="tel" id="tel" name="tel" maxlength="10" placeholder="0123456789" /></td>
</tr>
<tr>
<td><label for="email">Email :*</label></td>
<td><input type="email" id="mail" name="mail" placeholder="[email protected]" required /></td>
</tr>
<tr>
<td><label for="resa">Votre réservation est pour :</label></td>
<td><select id="resrv1" name="resrv1" >
<option value="demijour" selected>Demi-journée</option>
<option value="jour">Journée</option>
<option value="repas">Repas</option>
</select>
<input type="text" id="nbpl1" name="nbpl1" placeholder="Qté" />
<input type="text" id="st1" name="st1" placeholder="Sous-total HT" disabled /></td>
</tr>
<tr>
<td></td>
<td><select id="resrv2" name="resrv2" >
<option value="demijour">Demi-journée</option>
<option value="jour" selected>Journée</option>
<option value="repas">Repas</option>
</select>
<input type="text" id="nbpl2" name="nbpl2" placeholder="Qté" />
<input type="text" id="st2" name="st2" placeholder="Sous-total HT" disabled /></td>
</tr>
<tr>
<td></td>
<td><select id="resrv3" name="resrv3" >
<option value="demijour">Demi-journée</option>
<option value="jour">Journée</option>
<option value="repas" selected>Repas</option>
</select>
<input type="text" id="nbpl3" name="nbpl3" placeholder="Qté" />
<input type="text" id="st3" name="st3" placeholder="Sous-total HT" disabled /></td>
</tr>
<tr>
<td><label for="st">Sous-total...

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;
redirect;
}

}

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

// Fonction On change value
function CalculerTotal() {

var Valeur;
var choix;
Valeur = parseInt(document.getElementById("nbpl1").value);
alert(Valeur);
choix = document.getElementById("resrv1").value;

if (Valeur != ""){
if (choix=="demijour")
Valeur = Valeur*8;
else
if (choix=="jour")
Valeur = Valeur*15;
else
if (choix=="repas")
Valeur = Valeur*7;
document.getElementById("st1").value = Valeur+" euros" ;
}else
Valeur = 0;


var Valeur2=0;
Valeur2 =...