Detect character in input using CSS

Question

I'm trying to detect when an input has a double quote in it (") using ONLY CSS: When invalid, i.e. has character in it, it should then show message. Note: The input value is dynamically placed in my editing interface.

form div#intdblquote > input[type="text"]:valid {
  display: none;
  position: relative}

form div#intdblquote > input[type="text"]:valid ~ .requirements {
  display: none}
  
form div#intdblquote > input[type="text"]:invalid {
  display: block}
  
form div#intdblquote > input[type="text"]:invalid ~ .requirements {
  display: block}

<form>
  <div id="intdblquote">
   <input type="text" id="intdblquote" name="intdblquote" pattern="[^'\x22]+" placeholder= " " value="MyEntry""  required />
   <div class="requirements">Must not contain double quote.</div>
  </div>
</form>

Duplicate of [HTML5 input pattern search for quote](https://stackoverflow.com/questions/9343082/html5-input-pattern-search-for-quote) - Change your pattern to `pattern="[^'\x22]+"` — Tyler Roper, Oct 02 '17 at 21:01
I changed pattern to suggested, but it's still not changing, based on what is in value. — parti, Oct 02 '17 at 21:11
@Santi It's still not working properly, I added a quote to the end of my value, so you can see the new pattern is still not returning invalid. — parti, Oct 02 '17 at 21:26
You can't put double quotes inside an HTML attribute. It isn't valid. The `value` property ends at the second quote, and thinks that your extra `"` is just a mistake. [**It works fine.**](https://jsfiddle.net/cntkzkhz/) — Tyler Roper, Oct 02 '17 at 21:40
@Santi Well, I understand about ending at second quote, but your example stripped out the value, which I need & the text will be dynamically put in there. — parti, Oct 02 '17 at 21:48

curveball · Accepted Answer · 2017-10-02T22:04:16.740

Maybe I am not getting it right, but I guess everything is almost allright. You might have messed up styles and escaping. This seems to work: the warning is shown when " symbol is typed in. If you want your default value to be MyEntry" enclose the attribute in '.

form div#intdblquote > input[type="text"]:valid ~ .requirements {
  display: none;
}
  
form div#intdblquote > input[type="text"]:invalid ~ .requirements {
  display: block;
}

<form>
  <div id="intdblquote">
   <input type="text" id="intdblquote" name="intdblquote" pattern="[^\x22]+" placeholder="" value='MyEntry"' required/>
   <div class="requirements">Required. Must not contain double quote.</div>
  </div>
</form>

The pattern attribute specifies a regular expression that the element's value is checked against. When the regexp is not satisfied, then :invalid pseudoclass takes over. Otherwise the :valid one comes into play.

Also notice that if nothing typed in :invalid pseudoclass comes into force since attribute required is present.

Detect character in input using CSS

1 Answers1