Toggle div when text input has pattern match

Question

I'm trying to show a div when someone has entered the correct answer into a text field. I'm using CSS psuedo selectors to hide the div when the field is invalid, but an empty field counts as valid, which shows the div before anything has been entered.

input:invalid + #next {
  display:none;
}

input:valid + #next {
  display:block;
}

<form>
  <input type="text" maxlength="4" pattern="1234">
  <div id="next">SUCCESS</div>
</form>

Answer 1

Here you just need to add required attribute so that some value should be needed before validating the input

 input:invalid + #next { display:none; } input:valid + #next { display:block; }

 <form> <input type="text" maxlength="4" pattern="1234" required> <div id="next">SUCCESS</div> </form>