JSFiddle - React, Tailwind, and code Playground

by willystyle

HTML

<input type="text" class="valid" id="input"/>
<button id="submit" disabled>Submit</button>
<div id="output"></div>

CSS

.valid {
  border-color: green;
}

.invalid {
  border-color: red;
}

JavaScript

let input = document.getElementById('input');
let output = document.getElementById('output');
let btnSubmit = document.getElementById('submit');
input.addEventListener('keyup', validator);
btnSubmit.addEventListener('click', submit);

function validator() {
	let pattern = /^[13][0-9A-Za-z]{33}$/; 
  if (pattern.test(this.value)) {       
    this.classList = 'valid';
    btnSubmit.disabled = false;    
  } else {   
    this.classList = 'invalid';
    btnSubmit.disabled = true;    
  }	
}

function submit() {
	validator.apply(input);
  if (!this.disabled) {
  	// send data
    output.textContent = `Send:${input.value}`;
  }
}