JSFiddle - React, Tailwind, and code Playground

by Lex Robinson

HTML

<form data-info="pattern">
    <input pattern="ed balls" placeholder="ed balls" required>
    <input type="submit" value="Test pattern!">
</form>
<form data-info="customValidity">
    <input id="ed-balls" placeholder="ed balls" required>
    <input type="submit" value="Test customValidity!">
</form>
<form data-info="file constraint">
    <input id="ed-balls-file" type="file" required>
    <input type="submit" value="Test file!">
</form>

JavaScript

function onSubmit(e) {
    e.preventDefault();
    alert( "The " + this.attributes['data-info'].value + " validation passed!" );
}
Array.prototype.forEach.call(document.forms, function(form) { form.addEventListener('submit', onSubmit) });
document.querySelector('#ed-balls').addEventListener('change', function(e) {
    if ( this.value !== 'ed balls' )
        this.setCustomValidity( 'Please type ed balls' );
    else
        this.setCustomValidity( '' );
})
document.querySelector('#ed-balls-file').addEventListener('change', function(e) {
    if ( this.files[0] && this.files[0].name !== 'ed balls.txt' )
        this.setCustomValidity( 'Pick a better file' );
    else
        this.setCustomValidity( '' );
})