JSFiddle - React, Tailwind, and code Playground

HTML

<div id="conteneur">
<form>
    <div class="champ"><p><label for="nom">Nom :</label><input type="text" id="nom" /></p><div class="message_ok" id="champ_nom">Le champ n'est pas rempli correctement</div></div>
    <div class="champ"><p><label for="prenom">Prénom :</label><input type="text" id="prenom" /></p><div class="message_ok" id="champ_prenom">Le champ est requis</div></div>
    
    <div class="champ"><p><input id="mon_test" type="submit" value="soumettre"/></p></div>
</form>
</div>

CSS

div{
   width:180px;
    margin:0 auto;   
}
.div_erreur{
    width:550px;
}
p{
    display:inline;
}
label{
    display:block;
    float:left;
    width:70px;
}
input {
    width:100px;   
}
.champ{
    height:30px;
}
.champ_erreur{
    margin-left:185px;
    width:550px;
}
.message_ok{
    color:#b00;
    float:right;
    height:30px;
    width:330px;
    display:none;
}
.message_erreur{
    display:block;
}

JavaScript

$("#champ_nom").removeClass("message_erreur");
$("#champ_prenom").removeClass("message_erreur");
$("#conteneur").removeClass("div_erreur"); $(".champ").removeClass("champ_erreur");

$("#mon_test").click(function(){
    if($("#nom").val() == ""){
       event.preventDefault(); $("#champ_nom").addClass("message_erreur"); $("#conteneur").addClass("div_erreur"); $(".champ").addClass("champ_erreur");
    }
    else{    $("#champ_nom").removeClass("message_erreur");
$("#conteneur").removeClass("div_erreur"); $(".champ").removeClass("champ_erreur");   
    }
    if($("#prenom").val() == ""){
       event.preventDefault(); $("#champ_prenom").addClass("message_erreur");
$("#conteneur").addClass("div_erreur"); $(".champ").addClass("champ_erreur");
    }
    else{
$("#champ_prenom").removeClass("message_erreur");
$("#conteneur").removeClass("div_erreur"); $(".champ").removeClass("champ_erreur");
    }
});