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 - Change your pattern to pattern="[^'\x22]+" — Tyler Roper
– Tyler Roper, Commented Oct 2, 2017 at 21:01
I changed pattern to suggested, but it's still not changing, based on what is in value. — parti
– parti, Commented Oct 2, 2017 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
– parti, Commented Oct 2, 2017 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. — Tyler Roper
– Tyler Roper, Commented Oct 2, 2017 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
– parti, Commented Oct 2, 2017 at 21:48

curveball · Accepted Answer · 2017-10-02 22:04:16Z

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.

Collectives™ on Stack Overflow

Detect character in input using CSS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related