JSFiddle - React, Tailwind, and code Playground

by Marie Gérard

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
            <header id="header" class="row">
                <h1 class="col-12 text-center">Validate Form</h1>
            </header><!-- /header -->
            <main class="row pt-2 mt-3">
                <section class="col-6 offset-3 text-center form-bloc">
                    <h2>Inscription</h2>
                    <div id="erreur">
                        <p>Vous n'avez pas rempli correctement les champs du formulaire !</p>
                    </div>

                    <form class="text-left needs-validation" novalidate>
                        <div class="form-group">
                            <input type="text" id="pseudo" class="field form-control"/>
                            <label for="pseudo">Pseudonyme</label>
                            <i class="icon-bind fas"></i>
                            <div class="valid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <input type="password" id="mdp" class="field form-control" />
                            <label for="mdp">Mot de passe</label>
                            <i class="icon-bind fas"></i>
                            <div class="valid-feedback"></div>
                        </div>
                        <div class="form-group">
                            <input type="password" id="confirmation" class="field form-control" />
                            <label for="confirmation">Confirmation</label>
                            <i...

CSS

.form-bloc{
    width: 460px;
    margin: 0 auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.24);
    border-radius: 5px;
    padding: 20px 25px;
    text-align: center;
    margin-top: 60px;
}

.form-bloc h2 {
    border-bottom: 2px solid #19acb7;
    color: #19acb7;
    display: inline-block;
    margin-bottom: 30px;
    margin-top: 5px;
}

.form-group {
    position: relative;
    margin-bottom: 20px;
}

.form-control{
  background: none;
  padding: 15px 40px;
  font-size: 18px;
  color: #000000;
  width: 100%;
}

.form-control,
.form-control:active,
.form-control:focus{
  outline: none;
  box-shadow: none;
}
input[type=text],
input[type=email],
input[type=password]{
  padding: 15px 0;
  border: none;
  border-bottom: 2px solid #51f3ff;
}
input[type=submit]{
  background-color: #0db5c2;
  color: #fff;
  border-radius: 5px;
  border-style: none;
  cursor: pointer;
  margin-top: 20px;
  -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
input[type=submit]:hover{
  background-color: #fff;
  color: #0db5c2;
  text-shadow: 0 0 5px RGBA(0, 0, 0, 0.27);
  box-shadow: 0 0 5px RGBA(0, 0, 0, 0.27);
}
label {
  position: absolute;
  left: 0;
  top: 13%;
  color: #999;
  font-style: italic;
  font-size: 15px;
  pointer-events: none;
  -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
input[type=text]:focus + label,
input[type=email]:focus + label,
input[type=password]:focus + label,
.float-label + label{
  top: -8px;
  color: #0db5c2;
  font-size: 13px;
}

#erreur {
    display: none;
}

.form-control.success {
    border-color: green;
    color:  green;
}


.form-control.error {
    border-color: red;
    color:  red;
}

JavaScript

$('.form-bloc input').focusout(function(){
        var textValue = $(this).val();

        if (textValue === "") {
            $(this).removeClass('float-label');
        } else {
            $(this).addClass('float-label');
        }
    });

    var $pseudo = $('#pseudo'),
        $mdp = $('#mdp'),
        $confirmation = $('#confirmation'),
        $mail = $('#mail'),
        $envoi = $('#envoi'),
        $reset = $('#rafraichir'),
        $erreur = $('#erreur'),
        $field = $('.field');

    $field.keyup(function(){
        if($(this).val().length < 5){ // si la chaîne de caractères est inférieure à 5
            $(this).removeData('success').addClass('error');
            $(this).closest('.icon-bind.fas').removeClass('fa-check').addClass('fa-cross');
        }
        else{
            $(this).removeClass('error').addClass('success');
            $(this).closest('.icon-bind').removeClass('fa-cross').addClass('fa-check');
        }
    });

    $confirmation.keyup(function(){
        if($(this).val() != $mdp.val()){ // si la confirmation est différente du mot de passe
            $(this).css({ // on rend le champ rouge
                borderColor : 'red',
                color : 'red'
            });
        } else {
            $(this).css({ // si tout est bon, on le rend vert
                borderColor : 'green',
                color : 'green'
            });
        }
    });

    $envoi.click(function(e){
        e.preventDefault(); // on annule la fonction par défaut du bouton d'envoi

        // puis on lance la fonction de vérification sur tous les champs :
        verifier($pseudo);
        verifier($mdp);
        verifier($confirmation);
        verifier($mail);
    });

    $reset.click(function(){
        $field.css({ // on remet le style des champs comme on l'avait défini dans le style CSS
            borderColor : '#ccc',
            color : '#555'
        });
        $erreur.css('display', 'none'); // on prend soin de cacher le message...