JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <form method="post" id="myForm">

        <fieldset>
            <legend>Nous contacter</legend>
                <p>
                    <label for="nom">Votre nom :</label>
                    <input id="nom" name="nom" type="text">
                    <span class="error">erreur</span>
                </p>
                <p>
                    <label for="nom">Votre prénom :</label>
                    <input id="prenom" name="prenom" type="text">
                    <span class="error">erreur</span>
                </p>
                <p>
                    <label for="nom">Votre téléphone :</label>
                    <input id="telephone" name="telephone" type="text">
                    <span class="error">erreur</span>
                </p>
                <p><input type="submit" id="envoyer"></p>
        </fieldset>

    </form>   
</body>

CSS

p {
    margin-top: 10px;
}
form {
    width:50%;
    margin:auto;
}
fieldset {
    border-radius: 20px;
}
legend {
    margin-left: 20px;
    margin-bottom: 10px;
}
label {
    display: inline-block;
    text-align: right;
    width:20%;
}
input {
    border-radius: 10px;
    outline:0;
    padding-left: 10px;
}

#envoyer{
    margin-left: 130px;
}
.error {
    color:red;
    float: right;
    margin: 0;
    display: none;
}

JavaScript

$(document).ready(function () {
    $("#envoyer").click(function(){ // 1.J'écoute le clic sur le bouton envoyer
        //NOM
        valid = true; // 2.cette variable permet de savoir si le champ a bien été rempli ou pas
        if($("#nom").val() == "") { // 4.on vérifie que le champ "nom" n'est pas vide, donc si le champ est  identique à vide,
            $("#nom").next(".error").fadeIn().text("Veuillez entrer votre nom"); //5. on fait apparaître le message d'erreur
            valid=false; // 3.je mets valid à false comme ça la fonction ne retournera rien
        }
        else if(!$("#nom").val().match(/^[a-z]+$/i)){ //6. Je vérifie que le nom est valide en utilisant les expressions régulière, donc si le nom n'est pas alphabétique,
            $("#nom").next(".error").fadeIn().text("Veuillez entrer un nom valide"); //7. on fait apparaître le message d'erreur si le nom n'est pas valide
            valid=false;
        } 
        else{ // 5. Sinon si il n'y a pas d'erreur, je cache le message d'erreur
            $("#nom").next(".error").fadeOut();
        }
        
        //PRENOM
        valid = true; 
        if($("#prenom").val() == "") { 
            $("#prenom").next(".error").fadeIn().text("Veuillez entrer votre prénom");
            valid=false;
        }
        else{ 
            $("#prenom").next(".error").fadeOut();
        }
        //TELEPHONE
        valid = true; 
        if($("#telephone").val() == "") { 
            $("#telephone").next(".error").fadeIn().text("Veuillez entrer votre numéro de téléphone");
            valid=false;
        }
        else if(!$("#telephone").val().match(/^[0-9]{10}$/i)){ 
            $("#telephone").next(".error").fadeIn().text("Veuillez entrer un numéro de téléphone valide");
            valid=false;
        } 
        else{
            $("#telephone").next(".error").fadeOut();
        }

        return valid;
    });
    
});