JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <input pattern="[\w\d _\-\.]+"  />
    <p>You suck at form input</p>
</form>

JavaScript

var $error = $( 'p' ),
    $input = $( 'input' );

$error.css( 'color', 'red' ).hide();

$input.on( 'input', function( e ) {
    if ( $input.get( 0 ).validity.patternMismatch ) {
        $error.show();    
    } else {
        $error.hide();    
    }
});