How to Change Border Color of Required Input Fields

How to change input filed border color into red. When fields are empty

Here is my answer for your code example, it will work when you click on next button.

Updated HTML and Inputs:

<div id="vk_app">
    <form>
      <div v-if="step === 1">
        <h1>Step One</h1>
        <legend for="name">Your Name:</legend>
        <input id="name" :class="errorField.name ? 'error-input' : ''" name="name" v-model="name" />
        <input id="name" :class="errorField.age ? 'error-input' : ''" name="name" v-model="age" />
        <button @click.prevent="next()">Next</button>
      </div>
      <div v-if="step === 2">
          <template>
          <input id="name" name="name" :class="errorField.address ? 'error-input' : ''" v-model="address" />
            <input id="name" name="name" :class="errorField.h_no ? 'error-input' : ''" v-model="h_no" />
            <input id="name" name="name" :class="errorField.mobile ? 'error-input' : ''" v-model="mobile" />
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
          </template>
      </div>
      <div v-if="step === 3">
        <template>
          <input id="name" name="name" v-model="subject">
            <input id="name" name="name" v-model="occupation">
            <button @click.prevent="prev()">Previous</button>
            <button @click.prevent="next()">Next</button>
          </template>
        <button @click.prevent="prev()">Previous</button>
        <button @click.prevent="submit()">Save</button>
      </div>
    </form>
  </div>

Vue Functions and Data Update:

data() {
      return {
        errorField: { name: false, age: false, city: false, state: false },
        step:1,
          name:null,
          age:null,
          city:null,
          state:null,
      }
    },
    methods:{
      prev() {
        if(this.checkForm()) {
          this.step--;
        }
      },
      next() {
        if(this.checkForm()) {
          this.step++;
        }
      },
      checkForm: function (e) {
        if (this.name && this.age) {
          return true;
        }

        this.errors = [];

        if (!this.name) {
          this.errorField.name = true
          this.errors.push('Name required.');
        }
        if (!this.age) {
          this.errorField.age = true
          this.errors.push('Age required.');
        }
      }
    }

Change border color for an invalid input after submit

If you are planning on using required attribute, you can use input:invalid selector in CSS

input:invalid
{
  border: 2px solid pink;
}

This will automatically style the elements without need submitting the form.

However in many cases there is a more comprehensive form validation required in which case required attribute should be avoided and an invalid field can be manually styled by applying a css class to them:

const contactForm = document.querySelector(".contact-form");
const firstName = document.querySelector("#first-name");
const lastName = document.querySelector("#last-name");

contactForm.addEventListener("submit", submitForm);
contactForm.addEventListener("input", validateInput);

function validateInput(e) {
  let isInvalid = false;
  const value = e.target.value.trim();
  switch (e.target.name) {
    case "first-name":
      isInvalid = value === "" || value == "test";
      break;

    case "last-name":
      isInvalid = value === "";
      break;

    case "message":
      isInvalid = value === "";
      break;
  }
  e.target.classList.toggle("invalid", isInvalid);
  return isInvalid;
}

function submitForm(e) {
  e.preventDefault();

  const isInvalid = validateInput({target: firstName}) |
                    validateInput({target: lastName}) |
                    validateInput({target: message});

  if (isInvalid) {
    //not all fields are valid do something here
  }
}

.invalid {
  border: 2px solid red;
  background-color: pink;
}

<form action="" class="contact-form">
  <div class="form-check">
    <input type="text" id="first-name" name="first-name" placeholder="First Name" value="test">
  </div>
  <div class="form-check">
    <input type="text" id="last-name" name="last-name" placeholder="Last Name">
  </div>
  <div class="form-check">
    <textarea id="message" name="message" placeholder="Message"></textarea>
  </div>
  <button>submit</button>
</form>

How to change border color of the html input when

Attach blur event to the input.

document.querySelectorAll('input').forEach((input) => {  input.addEventListener('blur', function() {    this.classList.toggle('green', this.value.length > 0);  });});

.green {    border: 2px solid green;}

<input type="text"><input type="text"><button>Click Me</button>

Can't change border color when input field is active

So this is a few things, your css isn't valid, you've written scss syntax. If you're aware of this and the question is meant to say "scss", then you need to add outline: none;. Also #black isn't a valid colour.

Example in scss:

input {
    margin-top: 20px;
    border-radius: 0px;
    background-color: #FFFFFF;
    border: 1px solid black;
    height: 33px;
    width: 200px;

    &:active, &:focus { // I think you said you wanted focus as well
      font-size: 13px;
      border: 2px solid red;
      outline: none; // add this
      background-color: #ffffff;
    }

    &:disabled {
      border: 1px solid black; // update this
      border-radius: 0px;
      background-color: #F9FAFB;
    }
}

In css:

input:active, input:focus { // I think you said you wanted focus as well
      font-size: 13px;
      border: 2px solid red;
      outline: none; // add this
      background-color: #ffffff;
    }

• You can't use the & in regular css.
• #Black isn't a css colour value.
• You need outline: none to override the browser's default focus behaviour.

How to change border color when fields are empty

Try this code.
Plunker LINK

HTML

<div class="log">
          <input id="user" class="inputlog" type="text" required="" />
          <span class="highlight"></span>
          <span class="bar"></span>
          <label>Email Address</label>
        </div>
        <div class="log">
          <input id="pwd" class="inputlog" type="password" required="" />
          <span class="highlight"></span>
          <span class="bar"></span>
          <label>Password</label>
        </div>

JS

$( document ).ready(function() {

   $(".login-btn").click(function(){
     var user = $("#user").val();
    var pwd = $("#pwd").val();

     if(!user){

       $("#user").addClass("makeRed");
     }
       else
       {
       $("#user").removeClass("makeRed");
       }
  if(!pwd){

       $("#pwd").addClass("makeRed");
     }
       else
       {
       $("#pwd").removeClass("makeRed");
       }     
   });
    $("#user").click(function(){
      $("#user").removeClass("makeRed");
   });
  $("#pwd").click(function(){
    $("#pwd").removeClass("makeRed");
  });
});

CSS

 .makeRed{

      border-bottom: 1px solid red !important;

    }

Overriding the border for required inputs with jquery

The red border around the input is only added when they are in an invalid state, and only in Firefox. To remove this you can apply the following CSS to the element:

input:invalid {
  box-shadow: none;
}

With regard to your jQuery code, the first argument to the each() handler function is the index of the current element in the collection, not a reference to the element itself. As such the code should be:

inputs.each(function(i, input) {

That being said, the each() loop itself is redundant as jQuery will apply the event handlers to all elements in the collection when you call the relevant method. The code can be simplified to just this:

$('input, select').on({
  invalid: e => $(e.target).addClass('invalid'),
  input: e => $(e.target).toggleClass('invalid', e.target.validity.valid)
});

JavaScript change input field border color when detect one of specific inputs

A few issues:

• cisla is an id, not a class name
• you don't have any event binded to your zmenitBarvu function
• you aren't applying the borders to the input elements themselves nor checking the values on them, but only the form with id cisla
• else will overwrite styles set when "0" is matched with value, because else is on anything that's not "2" only. You need to chain the else if so only one executes.

Demo using event delegation. I recommend just using the same class name so they use the same selector for class, and same name (unless form data requires incremented names), and not using an id at all, since it's unnecessary. I'm using cislo prefixed class name input elements selector to match elements:

function zmenitBarvu() {    document.getElementById("cisla").addEventListener('input',event=>{    var inputVal = event.target;    if(!inputVal.matches('input[class^=cislo]')) return;
    if (inputVal.value === "0") {         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');    }    else if (inputVal.value === "2") {         inputVal.setAttribute( 'style', 'border: 5px solid #f5d442 !important;');    }    else {        inputVal.setAttribute( 'style', 'border: 1px solid #ccc !important;');    }
    });}zmenitBarvu()

<div class="form">    <form id="cisla">         <input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>        <input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>        <input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>        <input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>        <input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>        <input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>        <input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>        <input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>        <input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>        <input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>        <input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>        <input name="cislo12" type="text" class=cislo12 placeholder="" id="cislo12" /><br>    </form></div>

---

Related Topics