JSFiddle - React, Tailwind, and code Playground

HTML

<div id="erreur"></div>
<input type="text" name="username" id="username" placeholder="Nom d'utilisateur" />
<input type="password" name="pass" id="pass" placeholder="Mot de passe" />

CSS

.bad{ border: 1px solid red; }
.good{ border: 1px solid green; }

#erreur{ color: red; }

JavaScript

var dejaPris = ["rom", "loutre", "test"];

$('#username').change(function(){
	var valeur = $(this).val();
  var erreur = "";
  $('#erreur').text("");
  
  if(valeur.length < 3 || valeur.length > 15)
  	erreur = "Le nom d'utilisateur doit comprendre entre 3 et 15 caractères";
    
  if(dejaPris.indexOf(valeur.toLowerCase()) != -1)
    erreur = "Ce nom d'utilisateur est déjà pris...";
    
  if(erreur === "")
  	$(this).addClass('good').removeClass('bad');
  else{
  	$(this).addClass('bad').removeClass('good');
    $('#erreur').text(erreur);
  }
})