当文本输入具有模式匹配时切换 div

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>