填写第一个文本框后提交的Javascript按钮不会更改下一个文本框的颜色

Question

I have found help here before and I am totally new to coding in general. I am writing a Javascript script to change colours when I insert text. When there is text, the first one goes red. I want all of them to go to red. And when they are filled in they must go blue one by one. I have used an if statement for this. Should I rather look at a different method?

function btnSubmit(input) {
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var message = document.getElementById('message');

    if (name.value == '') {

      name.style.borderColor = 'red';
      return false;

      // stop submission until textbox is not ''
    }else{
      name.style.borderColor = 'blue';
      return false;
    }

    if (email.value == '') {
      email.style.borderColor = 'red';
      return false;
    }else{
      email.style.borderColor = 'blue';
      return false;
    }

    if (message.value == '') {
      message.style.borderColor = 'red';
      return false;
    }else{
      message.style.borderColor = 'blue';
      return false;
    }

    if (name.value != '' && email.value != '' && message.value != ''){
      alert('all fields filled in');
      return true;
    }
} 

Answer 1

You should not return false in else statements, return statement stops function execution and all lines after return statement will not get executed. In your code, function btnSubmit will always check name field only as you are have return in both if and else conditions.

You code should be like

function btnSubmit(input) {
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var message = document.getElementById('message');

    if (name.value == '') {

      name.style.borderColor = 'red';
      return false;
    }else{
      name.style.borderColor = 'blue';
    }

    if (email.value == '') {
      email.style.borderColor = 'red';
      return false;
    }else{
      email.style.borderColor = 'blue';
    }

    if (message.value == '') {
      message.style.borderColor = 'red';
      return false;
    }else{
      message.style.borderColor = 'blue';
    }

    // No need to add this condition as you have already checked all three fields individually
    //if (name.value != '' && email.value != '' && message.value != ''){
      alert('all fields filled in');
      return true;
    //}
}

Answer 2

I'll just show you an example, how to iterate through all your input tags and apply blue or red style to them based on content. It's a more proper way than declaring every input inside your function. I think it's a good point to start, so you need to modify this code a little to get what you want:

 function btnSubmit(input) { var inputs = document.getElementsByTagName('input') var counter = 0; for (var i = 0; i < inputs.length; i++) { if (inputs[i].value == '') { inputs[i].style.borderColor = 'red'; } else { counter++ inputs[i].style.borderColor = 'blue'; } } if (inputs.length === counter) { alert('all fields filled in'); } } 

 <input id="name"> <input id="email"> <input id="message"> <button onclick="btnSubmit()">Submit</button> 

Answer 3

 var name = document.getElementById('name'); var email = document.getElementById('email'); var message = document.getElementById('message'); var inputs = [name, email, message]; inputs.forEach(function(input) { input.addEventListener('change', check); input.addEventListener('focusout', check); }); function check() { if (this.value.length === 0) { inputs.forEach(function(el) { if (el.value.length === 0) el.style.borderColor = 'red' }); } else { this.style.borderColor = 'blue'; } } 

 <input id="name" type="text"> <input id="email" type="text"> <input id="message" type="text">