how to disable background

I am using a form validation with javascript. When submitting, the background-color of those input fields which are not valid changes to red color. When filling up this field and typing into another input field, the red background-color of the former field should go away. This is at the moment not the case. It only disappears when submitting again. How can I make this possible that the bg color changes back to normal when typing into another field?

// Return true if the input value is not empty
function isNotEmpty(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + "Error");
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length !== 0);  // boolean
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

/* If "isValid" is false, print the errorMsg; else, reset to normal display.
* The errorMsg shall be displayed on errorElement if it exists;
*   otherwise via an alert().
*/
function showMessage(isValid, inputElement, errorMsg, errorElement) {
if (!isValid) {
  // Put up error message on errorElement or via alert()
  if (errorElement !== null) {
     errorElement.innerHTML = errorMsg;
  } else {
     alert(errorMsg);
  }
  // Change "class" of inputElement, so that CSS displays differently
  if (inputElement !== null) {
     inputElement.className = "error";
     inputElement.focus();
  }
  } else {
  // Reset to normal display
  if (errorElement !== null) {
     errorElement.innerHTML = "";
  }
  if (inputElement !== null) {
     inputElement.className = "";
  }
  }
 }

The form:

  <td>Name<span class="red">*</span></td>
  <td><input type="text" id="name" name="firstname"/></td>
  <p id="nameError" class="red">&nbsp;</p>

The submit:

<input type="submit" value="SEND" id="submit"/>

Css:

input.error {  /* for the error input text fields */
background-color: #fbc0c0;
}

Update: I tried this but it seems not to work:

function checkFilled() {
var inputVal = document.querySelectorAll("#offerteFirstname, #offerteLastname, #offertePhone, #offertePoster, #offerteStreet").value;
if (inputVal == "") {
    document.querySelectorAll("#offerteFirstname, #offerteLastname, #offertePhone, #offertePoster, #offerteStreet").style.backgroundColor = "red";
}
else{
    document.querySelectorAll("#offerteFirstname, #offerteLastname, #offertePhone, #offertePoster, #offerteStreet").style.backgroundColor = "white";
}
}

checkFilled();

---

here example of it

<input type="text" id="subEmail" onchange="checkFilled();"/>

and now you can JavaScript on input

function checkFilled() {
var inputVal = document.getElementById("subEmail").value;
if (inputVal == "") {
    document.getElementById("subEmail").style.backgroundColor = "white";
}
else{
    document.getElementById("subEmail").style.backgroundColor = "red";
}
}

checkFilled();

here working demo

---

尝试

$(formElement).on('keyup','input.error', function(){
    if(<values changed>){
        $(this).removeClass('error');
    }
});

链接地址: http://www.djcxy.com/p/70514.html

上一篇: 一次选择特定的CSS选择器

下一篇: 如何禁用背景