Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 2px solid #000;
}
input:invalid:focus {
background-image: linear-gradient(#34ebba, #6eeb34);
}
</style>
</head>
<body>
<form action="/form/submit" method="post">
<input pattern=".{0}|.{5,8}" required title="Either 0 OR (5 to 8 chars)">
<input pattern=".{0}|.{6,}" required title="Either 0 OR (6 chars minimum)">
</form>
</body>
</html>