JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <h1>Formulaire de recherche de bâtiments:</h1>
	
	
	<form method="post" id="form">
		<p>Les champs indiqués par une <span>*</span> sont obligatoires. </p>
		<fieldset class="fieldset1"> 
			<legend><h3>Coordonnées</h3></legend>
			<div class="margeDessous">
					<!-- On créer une table afin d'aligner les champs rattachés aux champs label. Sinon les champs test (par exemples) serait tous décalés en fonction
					de la longueur du champs label.	-->
					<table>
						<!-- Première ligne du tableau. -->
						<tr>
							<!-- Première cellule de la ligne. -->
							<td><label for="nom_societe">Nom de la société<span>*</span> :</label></td>
							<!-- Avec l'option for, on lie le champs label et le champs texte pour cet exemple.-->
							<td><input class="champs" type="text" name="nom_societe" id="nom_societe" /></td>
							
							<!-- Trois moyen sont mis en oeuvre pour obliger l'utilisateur à remplir les champs du formulaire:
							1) De manière automatique avec l'attribut "required" qui surligne le champs nom rempli en rouge avec un message mais qui n'est pas supporté
							par certaines versions des naviguateurs comme Internet Explorer 8 par exemple.
							2) Avec du code Javascript qui s'applique sur les classes required.
							Ces deux méthodes permettent de controler le remplissage du formulaire sans chargement de page mais une derniere verification de securite doit être
							effectuée dans le cas où javascript serait désactivé et où le naviguateur ne supporterai pas l'attribut "required" (et par mesure de contrôle
							obligatoirement):
							3) Avec le code PHP de traitement du formulaire: on vérifie si les champs spécifiés sont remplis sinon on retourne à la page du formulaire.
							-->
							
						</tr>

						<tr>
							<td><label for="nom_interlocuteur">Votre nom<span>*</span> :</label></td>
							<td><input class="champs"type="text" name="nom_interlocuteur" id="nom_interlocuteur" ...

JavaScript

$(function() {
	$("#form").bind('submit', function(){
        var bReturn = true;
 $("#nom_societe,#nom_interlocuteur,#adresse,#ville,#tel,#fax,#mail,#activite").each( function(){
     var inp=$(this);
     var clr= (inp.val()=="")?"red":"";
     bord= (inp.val()=="")?'solid 2px red':"solid 1px ";
     inp.css({"border":bord});
     $('[for="'+inp.attr('id')+'"]').css({"color": clr});
		      bReturn = false;
        })
		
      return bReturn;
    });
});