JSFiddle - React, Tailwind, and code Playground

by Derek Leung

HTML

<h3>JavaScript validation</h3>
<form id="form1">
    Please enter a 3 digit number:<br>
    <input type="text" id="text1"/>
    <input type="submit"/>
</form>
    
<h3>Native HTML5 validation</h3>
<form>
    Please enter a 3 digit number:<br>
    <input type="text" id="text2" required pattern="\d{3}"/>
    <input type="submit"/>
</form>

JavaScript

document.querySelector("#form1").addEventListener("submit", function(e){
    if(!doValidation()){
        e.preventDefault();    //stop form from submitting
        alert("Not valid!");
    }
});

function doValidation(){
    var isValid = false;
    //do your validation
    isValid = /^\d{3}$/.test(document.querySelector("#text1").value);
    return isValid;
}

document.querySelector("#text2").addEventListener("invalid", function(){
    this.setCustomValidity("This is not a 3 digit number");
});
document.querySelector("#text2").addEventListener("input", function(){
    this.setCustomValidity("");
});