JSFiddle - React, Tailwind, and code Playground

by Rikin Patel

HTML

<form id="myform">
    <input type="text" pattern="[0-9]{10}" oninvalid="InvalidMsg(this);" name="email" oninput="InvalidMsg(this);"  />
    <input type="submit" />
</form>

JavaScript

function InvalidMsg(textbox) {
    
     if(textbox.validity.patternMismatch){
        textbox.setCustomValidity('please enter 10 numeric value.');
    }    
    else {
        textbox.setCustomValidity('');
    }
    return true;
}