JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form">
	<label for="field">Favorite number</label>
    <input type="text" id="field" required />
    <input type="submit" />
</form>

CSS

input:invalid {
    background-color: #d9534f;
}

JavaScript

var form = document.getElementById("form");
	var field = document.getElementById("field");

	form.onsubmit = validateForm;

	function validateForm() {

		if(isNaN(field.value)) {
			field.setCustomValidity("Field must be a number.");
		} else {
			return true;
		}

		return false;
	}