Probably this is pretty dummy question, but I couldn't find a simple solution (something like special HTML5 attribute).

For example I have a simple form with enabled validation for email field:

<form>
    <input required type="email" placeholder="[email protected]"></input>
</form>

And some styles for :valid, :invalid pseudoclasses:

input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}

So, when I'm opening a page with this form, input is already red bordered, because it's empty. The question is - how can I enable validation only after user has changed smth?

Probably this is pretty dummy question, but I couldn't find a simple solution (something like special HTML5 attribute).

For example I have a simple form with enabled validation for email field:

<form>
    <input required type="email" placeholder="[email protected]"></input>
</form>

And some styles for :valid, :invalid pseudoclasses:

input:valid {
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}

So, when I'm opening a page with this form, input is already red bordered, because it's empty. The question is - how can I enable validation only after user has changed smth?

• javascript
• html
• forms
• validation
• input

• I don't know why everyone missed this, but it's *placeholder – zfrisch Commented Feb 16, 2017 at 23:15

4 Answers 4

You can use onchange event, see:

<!-- added a ID to get it easier later -->
<input required id="myInput" type="email" placehodler="[email protected]"></input>

In your css, use classes to set your styles:

input.valid {
  border: 1px solid green;
}
input.invalid {
  border: 1px solid red;
}

In your javascript:

document.getElementById('myInput').onchange = function(){
     // validation code here

     this.classList.add('valid') // if validation is true
     this.classList.add('invalid') // if validation is false
}

Input value will be checked dynamically with every key pressed by the user. You can adjust the requirements by yourself.

var input = document.getElementById('input');

function validate(){
  if (input.value.length > 2) {
    input.className = 'valid';
  } else {
    input.className = 'invalid';
  }
}

.valid {
  border: 1px solid green;
}
.invalid {
  border: 1px solid red;
}

<form>
    <input required type="email" placehodler="[email protected]" id='input' onkeyup='validate()'>
</form>

You have a wide open set of methods to achieve this. I'll go for the easiest ones: blur || input.

You can attach the input or blur events and validate when they happen. The difference is that blur will be called when the user focuses another element (clicks the submit button, goes to another input, clicks elsewhere in the page, whatever) and input is called right after the user changes something in the input, usually by keypressing, but also happens when the user pastes or cuts. input is the "official" html5 way of listening to input elements.

document.getElementById('emailInput').oninput = function(){
    // validateinput
}

Also, you can go for change event, that is exactly the same as blur but it fires only if the user changed the content. The "bad" thing is the same as blur: no live validation while writing.

You can use the querySelector to make the distinction between valid and invalid instead of css. You should use keyup or keydown instead of change event because change requires you to refocus to verify.

JS

myform.querySelector('input').addEventListener('keyup', function() {
  if (myform.querySelector('input:invalid')) myform.querySelector('input:invalid').style.border = "1px red solid";
  else myform.querySelector('input:valid').style.border = "1px solid green";
});

HTML

<form id="myform">
  <input required type="email" placeholder="[email protected]"></input>
</form>