Reprenons l'exercice de la fin du TP-1, on va le renommer exo-1:

exo-1.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>exo-1</title>
		<link type="text/css" rel="stylesheet" href="exo-1.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="exo-1.js"></script>
	</head>
	<body>
		<h1>Vos identifiants:</h1>
		<form method="POST">
			<p><label>Nom :   <input id="nom"   name="nom"   type="text"/></label><span id="erreur-nom">Non valide !</span></p>
			<p><label>Login : <input id="login" name="login" type="text"/></label></p>
		</form>
	</body>
</html>

CSS:

#erreur-nom
{
	color: red;
	margin-left: 1em;
	display: none;
}

JS:

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est prêt");

	$('#nom').keyup(function(event)
		{
			console.log("Une touche a été appuyée");
			var texte=$("#nom").val();
			if(/[^a-zA-Z '-]/.test(texte))
			{
				$('#erreur-nom').show();
			}
			else
			{
				$('#erreur-nom').hide();
			}
			texte=texte.toLowerCase();
			$('#login').val(texte);
		});
	console.log("La mise en place est finie. En attente d'événements...");
});

Vérifiez que tout marche bien.