puedes tener un input para meter el nombre y ligarlo a una funcion que valide su contenido y muestre el mensaje. Ponlo en el evento onchange para que lo revise cuando el usuario cambie el contenido. Para validar que los caracteres sean correctos usa una expresión regular, el código sería algo así:
Código:
// en tu js
function validar(){
// obtener lo que el usuario puso
var username = document.getElementById('username').value;
// ver si es valido con la expresion regular
var expresion = /([A-z]|[0-9])+$/;
if (expresion.test(username)){ // si es valida
// mostrar el error
document.getElementById("errorSpan").style.display = "inline";
}
}
// tu html
<input onchange="validar()" id="username"></input>
<!-- este span tiene el error pero no se muestra por defecto -->
<span id="errorSpan" style="display:none" id="error">Caracteres inválidos</span>
La expresión que puse incluye a todas las palabras que tengan letras y números, habría que ajustarla para tus necesidades.