HTML表格:ID和名称更改时Onblur事件无效

Question

我有此HTML表格，在这样写时可以正常工作：

<fieldset>
  <label for="name">Name</label>
  <input type="text" name="name" id="name" onblur="validateName(name)" />
  <span id="nameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span>
</fieldset>

但是，当我将第三行和第4行更改为：

<input type="text" name="firstname" id="firstname" onblur="validateName(firstname)" />
<span id="firstnameError" style="display: none;">You can only use alphabetic characters, hyphens and apostrophes</span>

，Onblur不起作用！怎么会这样？毕竟我刚更改了名称和ID？

这是我的valtateName（名称）函数：

function validateName(x) {
  // Validation rule
  var re = /[A-Za-z -']$/;
  // Check input
  if (re.test(document.getElementById(x).value)) {
    // Style green
    document.getElementById(x).style.background = '#ccffcc';
    // Hide error prompt
    document.getElementById(x + 'Error').style.display = "none";
    return true;
  } else {
    // Style red
    document.getElementById(x).style.background = '#e35152';
    // Show error prompt
    document.getElementById(x + 'Error').style.display = "block";
    return false;
  }
}

谢谢

Answer 1

您也需要更改错误元素的ID（由于x + Error）。

<span id="firstnameError"...>

并将函数参数放入引号：

<input type="text" name="firstname" id="firstname" onblur="validateName('firstname')" />

http://jsfiddle.net/lgp55uwo/