JSFiddle - React, Tailwind, and code Playground

HTML

<?php
include('hautdepage.php');
?>
	

<!-- Nous chargeons le framework Jquery  et notre script de validation --> 
   

 <script  src="js/jquery.js"></script>     
 <script src="js/validation.js"></script>
 
   



	



	 

	 
                


	<body>
		<form method="post"   id ="monForm"  action="contact.php"  >
		
			<h1>Poser une question</h1>
		<div id='cadrecontent'>	
			Pour vos questions d’ordre général sur Touristas, son offre, son activité, nous mettons à votre disposition un formulaire de contact:<br>
			<br>
		<table>
			<tr><td><label for="nom">Nom*</label></td> <td><input id="nom" type="text" name="nom" size="40"></td></tr>
			<tr><td><label for="prenom">Prénom*</label></td> <td><input id="prenom" type="text" name="prenom" size="40"></td></tr>
			
			<tr><td><label for="adresse">Adresse</label></td> <td><input id="adresse" type="text" name="adresse" size="40"></td></tr>
			<tr><td></td> <td><input id="adresse" type="text" name="adresse" size="40"></td></tr>
			
			<tr><td><label for="CP">Code Postal</label></td> <td><input id="CP" type="text" name="CP" size="40"></td></tr>
			<tr><td><label for="ville">Ville</label></td> <td><input id="ville" type="text" name="ville" size="40"></td></tr>
			<tr><td><label for="pays">Pays</label></td> <td><input id="pays" type="text" name="pays" size="40"></td></tr>
			
			<tr><td><label for="mail">E-mail*</label></td> <td><input id="email" type="text" name="mail" size="40"></td></tr>
			<tr><td><label for="tel">Téléphone</label></td> <td><input id="tel" type="text" name="tel" size="40"></td></tr>
			
			<tr><td><label for="message">Message<br>
			(pour toutes questions <br>
			relatives à votre voyage,<br>
			veuillez préciser votre n° de dossier<br>
			ou n° de billet)*</label></td>
			<td><textarea id="message" value="message" name="message" rows=5 cols=40 placeholder="Votre message..."></textarea></td>
			</tr>
		</table>
		
		<br>
			<input type="checkbox" name="recevoir" value="offre" checked>Je souhaite...

JavaScript

$(document).ready(function(){
/* Travaille sur document en cours */ 
  
  
	$("#monForm").bind("submit", function(){
		
/* ce que l'on met ici s'effectura sur le "submit" du formulaire "monForm" */
var valid = true;
/* Si les champs ne sont pas remplis la couleur des champs obligatoires change */
       if ( $("#message").val()==""   )    {
           $("#message").css("background","red");  
          valid= false; 
        }
		
	   
	   
	    if ( $("#nom").val()==""   )    {
         $("#nom").css("background","red");  
		
          valid= false; 
        }
		if ( ($("#prenom").val())==""   )    {
          $("#prenom").css("background","red");  
          valid= false; 
        }
		
		if ( ($("#email").val())==""   )    {
           $("#email").css("background","red");  
          valid= false; 
        } else {
			 /* va vérifier les expressions régulières et affichera une alerte si l'e-mai n'est pas au bon format */
			   if(!$("#email").val().match (/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)){
			alert("votre email n'est pas au bon format");
			valid= false;
            } 
			
			}
		
		
		
		 

/* Remet la couleur par défaut dans les champs obligatoires  */
		  $( "#email" ).mouseover(function() {
			 $("#email").css("background","white");

		  });
		  
		  $( "#nom" ).mouseover(function() {
			 $("#nom").css("background","white");   
		  });
		  
		  $( "#prenom" ).mouseover(function() {
			 $("#prenom").css("background","white");   
		  });
		  
		  $( "#message" ).mouseover(function() {
			 $("#message").css("background","white");   
		  });
		  
		 return valid;
});


 
});