JSFiddle - React, Tailwind, and code Playground

by DieuTopGun

HTML

<body>
  <?php include GCT_DIR_ROOT. 'inscriptions/i_header.html'; ?>
  <section>
    <h1> Formulaire Inscription </h1>

    <form method="post" action="/share/inscriptions/i_traitement.php" enctype="multipart/form-data">
      <p>
        <fieldset>
          <legend>Vos Identifiants ?</legend>
          <p>Tous les champs précédés d un astérisque sont obligatoires.</p>
          <label for="identifiant">* Identifiant :</label>
          <input id="identifiant" name="id" type="text" maxlength="12" placeholder="Ex : LeGrandCharles" autofocus="" required="" />
          <br/>
          <label for="motdepasse">* Mot de passe :</label>
          <input id="motdepasse" name="mdp" type="password" maxlength="20" required="" />
          <br/>
          <div id="force_mdp">Force de votre mot de passe :</div>
          <label for="conf_mdp">* Confirmation du Mot de passe :</label>
          <input id="conf_mdp" name="conf_mdp" type="password" maxlength="20" required="" />
        </fieldset>
      </p>
    </form>
  </section>
</body>

JavaScript

$(document).ready(function() {
   $('#motdepasse').keyup(function(e) {
     if ($('#motdepasse').val() != '' && $('#conf_mdp').val() != '' && $('#motdepasse').val() != $('#conf_mdp').val()) {
       $('#force_mdp').html('Mots de passe différents !');

       return false;
     }

     // Must have capital letter, numbers and lowercase letters
     var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

     // Must have either capitals and lowercase letters or lowercase and numbers
     var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

     // Must be at least 6 characters long
     var okRegex = new RegExp("(?=.{6,}).*", "g");

     if (okRegex.test($(this).val()) === false) {
       // If ok regex doesn't match the password
       $('#force_mdp').html('Le mot de passe doit contenir au moins 6 caractères.');

     } else if (strongRegex.test($(this).val())) {
       // If reg ex matches strong password
       $('#force_mdp').html('Fort');
     } else if (mediumRegex.test($(this).val())) {
       // If medium password matches the reg ex
       $('#force_mdp').html('Moyen');
     } else {
       // If password is ok
       $('#force_mdp').html('Faible');
     }

     return true;
   });
 });