JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form1" novalidate>
    <input type="email" placeholder="enter email" name="q" required="" />
    <input type="url" placeholder="enter url" name="n" required="" />
    <input type="submit" value="Go" onclick="document.getElementById('form1').removeAttribute('novalidate')" />
</form>

<form id="form2">
    <input type="email" placeholder="enter email" name="q" required="" />
    <input type="url" placeholder="enter url" name="n" required="" />
    <input type="submit" value="Go" onclick="document.getElementById('form2').className='submissionAttempt'" />
</form>

CSS

#form2 input {
    box-shadow:none;
}
/*
#form2 input:-moz-placeholder,
#form2 input:focus {
    box-shadow:none !important;
}
*/
#form2.submissionAttempt input:invalid {
    box-shadow:0 0 2px 1px purple;
}