JSFiddle - React, Tailwind, and code Playground
HTML
<form id="myform">
<input name="myInput"
required="required"
placeholder="Must contain Mickey"
pattern=".*Mickey.*"
title="must contain Mickey somewhere."
/>
<input type="submit" />
</form>
JavaScript
/* javascript fallback for old browsers */
//get a collection of all required fields
var requiredFields = document.querySelectorAll("#myform [required]");
//test for native validation
if (typeof requiredFields[0].willValidate !== "undefined") {
// native validation available
} else {
// native validation not available
// so implement our own:
document.getElementById("myform").onsubmit = function(){
for (i = 0; i < requiredFields.length; ++i) {
var thisField = requiredFields[i];
var re = new RegExp(thisField.pattern, "i");
if(!re.exec(thisField.value)){
//tell the user
alert(thisField.name+" "+thisField.title);
//prevent submission
return false;
}
}
}
}