Question

我正在使用javascript进行表单验证。提交时，那些无效的输入字段的背景颜色会变为红色。填充此字段并键入另一个输入字段时，前一个字段的红色背景颜色应该消失。目前情况并非如此。它只会在再次提交时消失。如何在输入另一个字段时使bg颜色恢复正常？

// 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 = "";
  }
  }
 }

表格：

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

提交：

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

Css：

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

更新我尝试了这个，但似乎不起作用：

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();

Answer 1

这里的例子

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

现在你可以输入JavaScript了

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

checkFilled();

此处正在工作demo

Answer 2

尝试

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

如何禁用背景颜色输入字段

2 个答案: