JSFiddle - React, Tailwind, and code Playground

by micmic

HTML

<div id="erreur" style="color:red;font-size:2em;text-shadow:1px 1px 5px #C9A0DC;">Vous n'avez pas rempli tous les champs obligatoire du formulaire</div>
<br />
<br />
<form>
    <label>Nom :</label>
    <input type="text" id="nom" class="champ" />
    <br />
    <br />
    <label>Prénom :</label>
    <input type="text" id="prenom" class="champ" />
    <br />
    <br />
    <label>Email :</label>
    <input type="text" id="email" class="champ" />
    <br />
    <br />
    <label>Message :</label>
    <textarea id="message" class="champ"></textarea>
    <br/>
    <br />
    <input type="submit" id="submit" />&nbsp;&nbsp;&nbsp;&nbsp;
    <button type="reset" value="Reset" id="reset">Reset</button>
</form>

JavaScript

$(document).ready(function () {
    var $nom = $('#nom'),
        $prenom = $('#prenom'),
        $email = $('#email'),
        $message = $('#message'),
        $submit = $('#submit'),
        $erreur = $('#erreur'),
        $reset = $('#reset'),
        $champ = $('.champ'),
        statut = 1;

    $erreur.hide();

    $champ.keyup(function () {
        if ($(this).val().length < 3) {
            $(this).css({
                borderColor: 'red',
                color: 'red'
            });
        } else {
            $(this).css({
                borderColor: 'green',
                boxShadow: '3px 3px 5px green',
                color: 'green'
            });
        }
    });
    $submit.click(function (e) {
        e.preventDefault();
        verifier($nom);
        verifier($prenom);
        verifier($email);
        verifier($message);
        if (statut === 1) {
            $erreur.fadeOut();
            if ($('p').size() < 1) {                
                $('body').append('<p style="color:red;font-size:2em;text-shadow:1px 1px 5px #C9A0DC;">vous avez correctement rempli le formulaire !!!</p>');
            }
        }
    });


    $reset.click(function () {
        $champ.css({
            border: '#a9a9a9 1px solid',
            color: 'black',
            boxShadow: '0px 0px 0px white'
        });
        $erreur.fadeOut();
        $('p').remove();
        statut = 1;
    });


    function verifier(champ) {
        if (champ.val() === "") {
            $('#erreur').fadeIn('slow');
            champ.css({
                borderColor: 'red',
                boxShadow: '3px 3px 5px red'
            });
            statut = 0;
        } else {
            statut = 1;
        }
    }
});