Check validity and apply style when user leaves the field

user_17079768 0
Viewed 152

I have an html form somthing like this:

<form id="contactForm">
  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required minlength="3" />
  </div>
  <button type="submit">Submit</button>
</form>

I am using html validations as my requirements are simple. And I want to display input box in red color if user has entered invalid value. I tried using css pseudo classes valid and invalid like this:

input:invalid {
  background-color: red;
}

The problem with this is that all input fields show up in red even when the user has not touched the field. To prevent this issue I am using on blur event in javascript.

const contactForm = document.forms.contactForm;
const nameInp = contactForm.name;

nameInp.onblur = function () {
  if (this.checkValidity()) {
    console.log("valid");
  } else {
    console.error("invalid");
  }
};

Is it possible to achieve this functionality without javascript using only pseudo classes? I do not want the input boxes to display on red until user clicks on them.

css html javascript
4 Answers

Make use of :placeholder-shown, the input needs to have a placeholder

const contactForm = document.forms.contactForm;
const nameInp = contactForm.name;

nameInp.onblur = function () {
  this.removeAttribute('placeholder');
  if (this.checkValidity()) {
    console.log("valid");
  } else {
    console.error("invalid");
  }
};
input:invalid {
  background-color: red;
}
input:placeholder-shown, input:focus {
  background-color: unset;
}
<form id="contactForm">
  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required minlength="3" placeholder="name" />
  </div>
  <button type="submit">Submit</button>
</form>

user_170161440

No javascript needed!

You can achieve this effect with CSS alone by combining a zero-length placeholder attribute:

  • placeholder=""

with the placeholder-shown pseudo-class:

  • :placeholder-shown

Working Example:

input {
  display: block;
}

input:invalid {
  background-color: red;
}

input:invalid:placeholder-shown {
  background-color: white;
}
<label for="field-1">Field 1:</label>
<input type="text" name="field-1" id="field-1" placeholder="" pattern=".{3,}" required />

<label for="field-2">Field 2:</label>
<input type="text" name="field-2" id="field-2" placeholder="" pattern=".{3,}" required />

<label for="field-3">Field 3:</label>
<input type="text" name="field-3" id="field-3" placeholder="" pattern=".{3,}" required />

Further Reading

user_38977750

You can use javascript to change the bgcolor when the input is invalid. See the below code snippet.

const contactForm = document.forms.contactForm;
const nameInp = contactForm.name;

nameInp.onblur = function () {
  if (this.checkValidity()) {
    console.log("valid");
    this.style.background="white"
  } else {
    console.error("invalid");
    this.style.background="tomato"
  }
};
input{
  background:white;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<form id="contactForm">
  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required minlength="3" />
  </div>
  <button type="submit">Submit</button>
</form>
</body>
</html>

user_76091080

OP problem:

The problem with this is that all input fields show up in red even when the user has not touched the field. Is it possible to achieve this functionality without javascript using only pseudo classes? I do not want the input boxes to display on red until user clicks on them.

Add the following after the input:invalid {}

input:not(:focus) {
  background-color: white;
}

input:placeholder-shown {
   background-color: white;
}

Add placeholder= ' ' to each <input>

It's the behavior you described with no JavaScript, just CSS.

input:invalid {
  background-color: red;
}

input:not(:focus) {
  background-color: white;
}

input:placeholder-shown {
  background-color: white;
}
   
<form id="contactForm">
  <fieldset>
    <label>Name</label>
    <input type="text" name="name" placeholder=' ' required minlength="3" /><br>

    <label>Email</label>
    <input type="email" name="email" placeholder=' ' required><br>

    <label>Lucky Number</label>
    <input type="number" name="number" placeholder=' ' required min='0' max='999'>

    <button type="submit">Submit</button>
  </fieldset>
</form>

user_28132240
Related