How to change the input field background color right after I type something?-CodePudding

I wrote the code below and I'm trying to change the input field background color the moment I type something. I have 4 input fields. If I click submit in the first time and any field is empty, the color of this field will change to red, but I need to change the color to green the moment I fill this empty field.

const submitButton = document.getElementById("submit")
const inputField = document.querySelectorAll(".input")
let requiredField = document.querySelectorAll(".requiredField")

inputField.forEach(function (item){
  submitButton.addEventListener("click", function (){
    
    if(item.value == '') {
      item.classList.add("red");
      item.nextElementSibling.classList.add("red");

    }
     else{
      item.classList.add("green") 
      item.nextElementSibling.classList.remove("green");     
    }    
  })
})

CodePudding user response：

Try this:

inputField.forEach(field => {
  field.addEventListener("input", () => {
    field.classList.add("green");
  });
});

If you want only one field to be green at a time:

inputField.forEach(field => {
  field.addEventListener("input", () => {
    inputField.forEach(input => {
      input.classList.remove("green");
    });
    field.classList.add("green");
  });
});

CodePudding user response：

You don't actually need any JavaScript for this. Add the required attribute on the inputs and then style them accordingly with css.

<input type="text" required>
<input type="text" required>
<input type="text" required>
<input type="text" required>

input:valid {
    background-color: green;
}

input:invalid:required {
    background-color: red;
}

CodePudding user response：

try this for a quick fix:

const submitButton = document.getElementById("submit")
const inputField = document.querySelectorAll(".input")

inputField.forEach(field => {
  field.addEventListener("input", () => {
    inputField.forEach(input => {
      input.classList.remove("green");
      input.classList.remove("red");
    });
    if (field.value !== "") {
      field.classList.add("green");
    } else {
      field.classList.add("red");
    }
  });
});

CodePudding user response：

I'm not sure all your code does what you are expecting, but I have an approach that is approaching your requirement by listening to the keyup event and evaluating if the input has content or not; you should be able to reconfigure this to your use case.

I also moved your loop of the four loops inside the submit button click handler-- otherwise you are adding three identical handlers to the button.

const submitButton = document.getElementById("submit")
const inputField = document.querySelectorAll(".input")

submitButton.addEventListener("click", function(e) {
  inputField.forEach(function(item) {
    e.preventDefault();
    if (item.value == '') {
      item.classList.add("red");
      item.nextElementSibling.classList.add("red");

    } else {
      item.classList.add("green")
      item.nextElementSibling.classList.remove("green");
    }
  })
})

inputField.forEach(function (item) {
  item.addEventListener('keyup', function(e) {
    const theInput = e.target;
    if (theInput.value) {
      theInput.classList.remove('red');
      theInput.classList.add('green');
    }
  });
});

.red {
  border: red 2px solid;
}

.green {
  border: green 2px solid;
}

<label for="myfield">My Field:</label>
<input  id="myfield" name="myfield" />
<br/>
<label for="myotherfield">My Other Field:</label>
<input  id="myotherfield" name="myotherfield" />

<button id="submit">Submit</button>

Note another option would be to omit the JavaScript altogether and just go for native validation-- you have less control about when and how the validation styles are applied, but also less JS to write:

const submitButton = document.getElementById("submit")

submitButton.addEventListener("click", function(e) {
  e.preventDefault();
});

.input:invalid {
  border: red 2px solid;
}

.input:valid {
  border: green 2px solid;
}

<label for="myfield">My Field:</label>
<input  id="myfield" name="myfield" required/>
<br/>
<label for="myotherfield">My Other Field:</label>
<input  id="myotherfield" name="myotherfield" required />

<button id="submit">Submit</button>

If you go with the first approach, make sure you are providing adequate feedback for screen readers and assistive technologies to understand the form's state-- if there are no validation or validation-state attributes on the input and you are only indicating validity with a green/red border, screen readers won't be aware of it. Furthermore, those with red/green color blindness might not be able to perceive the difference.