JSFiddle - React, Tailwind, and code Playground

by Peter

HTML

<h1>Detecting Validation Fails</h1>

<p>Sample form designed to demonstrate a variety of possible failed validation scenarios</p>

<form id="sample-form" type="post">
    <div>
        <label for="string-field">Required Text</label>
        <input id="string-field" name="string-field" required type="text" />
    </div>   
    <div>
        <label for="number-field">Required Number Field (min and max)</label>
        <input id="number-field" max="12" min="2" name="number-field" required type="number" value="15" />
    </div>  
    <div>
        <label for="email-field">Email field</label>
        <input required type="email" value="marc" />
    </div>  
    <input type="submit" value="Submit" />
</form>

CSS

input:invalid {
    color: red;
    outline: 1px solid red;
}

JavaScript

//All of this could be done without jQuery

$(document).ready(function () {
    $('#sample-form').on('submit', onFormSubmit)
});

function onFormSubmit (event) {
    console.log('Submit event fired');
    
    //Validation check - could use jQuery for selectors to avoid need to check querySelectorAll availability
    
    if ('querySelectorAll' in document) {
        var sampleForm = document.getElementById('sample-form');
        
        var invalidElements = sampleForm.querySelectorAll('input:invalid');
        
        if (invalidElements.length > 0) {
            event.preventDefault(); //Not really required - browser will stop submit
            alert('Validation failed');
            return;
        }
        
        //Your code - overlay
    }
    
    alert('Form submitted');
}