JSFiddle - React, Tailwind, and code Playground

HTML

<form action="#" method="get">
    <p>Type the first 2 characters as a-z, A-Z, 0-9 or -.</p>
    <input type="text" name="a" value="" pattern="^[\w-]{2}" />
    <button type="submit">Validate</button>
</form>

JavaScript

document.forms[0].addEventListener('submit', function(event) {
    event.preventDefault();
    var input = document.getElementsByName('a')[0];

    // For argument's sake let's let pretend our browser doesn't support the `pattern` attribute.
    if (~input.value.search(input.pattern)) {
        alert('Is valid!');
    } else {
        alert('It\'s invalid dude!');
    }
});