Bloquear caracteres especiais e exibir uma mensagem

Front-end JavaScript
,
#1

Em outro tópico eu achei uma função em javascript que faz isso e deu certo para oque eu queria

<script language="javascript">
    function sem_acento(e,args)
    {		
        if (document.all){var evt=event.keyCode;} // caso seja IE
        else{var evt = e.charCode;}	// do contrário deve ser Mozilla

        // criando a lista de teclas permitidas
        var valid_chars = '0123456789abcdefghijlmnopqrstuvxzwykABCDEFGHIJLMNOPQRSTUVXZWYK-_ '+args;	
        var chr= String.fromCharCode(evt);	// pegando a tecla digitada
        if (valid_chars.indexOf(chr)>-1){return true;}
        return false;	// do contrário nega
    }
</script>

Mas o problema é que ele apenas bloqueia e não exibe nenhuma mensagem de alerta ou “erro” como: Não é permitido caracteres especiais '!@#$@%.

Meu input está assim:

<p:inputText id="cidade" value="#{cidadeControler.cidades.cidade}" 
                                     validatorMessage="" 
                                     required="true" 
                                     onkeypress="return sem_acento(event);" 
                                     requiredMessage="O nome da cidade é obrigatório"
/>
#2

Basta que você altere a função que encontrou e coloque a mensagem nela. É bem simples fazer isso.

#3

Eu consegui fazer isso com um alert, mas queria uma forma menos “agressiva”, como a caixa de texto que aparece com o pattern
Poderia me explicar como faz isso @Luis_Augusto_Santos