detecting input pattern verification by the event object

Question

is there a way to validate the pattern of an input by it's event object (without using a form)?

something like:

<input type='email' onChange={e => e.isPatternOk} />

You mean <input oninput="if (re.test(this.value)) ...."

mplungjan
– mplungjan

2019-03-22 13:00:10 +00:00
Commented Mar 22, 2019 at 13:00 — mplungjan
– mplungjan, Commented Mar 22, 2019 at 13:00

Craig Wayne · Accepted Answer · 2019-03-22 13:18:55Z

3

Beat me to it :), glad you figure it out

Below uses pure css AND a js solution, pick your fancy

.status * {
  display: none;
  margin-bottom: 20px;
}

input:valid+.status .valid {
  display: inline-block;
  background: limegreen;
}

input:invalid+.status .invalid {
  display: inline-block;
  background: red;
}

<input id="textfield" type="text" pattern=".{3,}" required/>
<div class="status">
  <span class="invalid">input is invalid</span>
  <span class="valid">input is valid</span>
</div>
<input type=button onclick="document.getElementById('js-result').innerHTML = 'Input is valid: '+ document.getElementById('textfield').validity.valid;" value="Check with JS" />
<fieldset>
  <legend>JS Result</legend>
  <div id="js-result"></div>
</fieldset>

answered Mar 22, 2019 at 13:18

Craig Wayne

5,1674 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

M Brichta · Accepted Answer · 2019-03-22 13:16:37Z

1

ok i just got it.

<input type='email' onChange={e => e.currentTarget.checkValidity()} />

answered Mar 22, 2019 at 13:16

M Brichta

2874 silver badges12 bronze badges

Collectives™ on Stack Overflow

detecting input pattern verification by the event object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related