JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input id="texto" type="text" pattern="[^-]*" required>
</form>

JavaScript

var elemento = document.getElementById('texto');

elemento.addEventListener('invalid', function(){
  if(this.validity.patternMismatch)
		this.setCustomValidity('No utilice guiones');
}, false);

elemento.addEventListener('change', function(){
	this.setCustomValidity('');
}, false);