HTML DOM Target属性self

Question

我的注册页面上有相当数量的字段，但错误消息只显示在页面顶部，我不想让客户端向上滚动以查看当他们输入错误信息时出现的错误消息是什么领域。我可以知道如何在这种情况下使用“目标”或任何其他方法吗？

以下是我的屏幕示例，当用户输入错误信息时，错误信息实际显示在屏幕顶部，但用户必须向上滚动并检查错误信息，是否有任何方法可以使用聚焦/目标/向上滚动以查看错误消息？

以下是我当前的屏幕示例代码：1 SAMPLE
P / s：我只为username字段执行功能，当用户名字段上的onblur运行时javascript函数

Answer 1

是的，如果您设置location.hash，它会将页面滚动到包含id的元素。

示例：

document.querySelector("input[type=button]").onclick = function() {
  document.getElementById("error").style.display = "";
  location.href = "#error";
};

<p>Scroll all the way to the bottom</p>
<p id="error" style="display: none">This is the error message</p>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<div>filler</div>
<input type="button" value="Click me">

Answer 2

在不更改任何HTML的情况下，一种解决方案是在导致验证错误的输入旁边添加错误消息。

您可以使用浮动div和多种其他方式 - 取决于您希望如何显示错误，但就目前而言，问题点上的消息是我认为您想要的。

将验证功能更改为以下内容，允许消息在失去焦点时出现在无效输入旁边，并在有效时将其删除。显然，你可以用不同的方式定位它并设置它的样式，但功能在这里：

var errorLabelSuffix = "ErrorMessage";

function fnIC(ID, value) {
  if (value == "") {
    // Data failed validation...

    // Check if Label is already displayed, and just return if it is.
    if (document.getElementById(ID + errorLabelSuffix)) {
      return;
    }
    // Otherwise, get the parent element of the invalid element (a <p> element at present).
    var invalidElement = document.getElementById(ID).parentNode;
    // Create a <span> to display the error message.
    var errorMessageLabel = document.createElement("span");
    // Give the <span> the Id of the ID passed in along with something to indicate it is the error label.
    errorMessageLabel.id = ID + errorLabelSuffix;
    // Set whatever error message is required.
    errorMessageLabel.innerHTML = "Invalid input";
    // Add the new element to the DOM where the invalid input is.
    invalidElement.appendChild(errorMessageLabel);
    // Can still do this as well (or use it for an error summary).
    error_function("ERRORMSG", ID, "errMsg");
  } else {
    // Has passed validation...

    // Get the input element and its parent.
    var validElement = document.getElementById(ID).parentNode;
    var errorMessageLabel = document.getElementById(ID + errorLabelSuffix);

    // If the error label is already displayed (may not be if the input has always been valid, and still is) - remove it from the DOM.
    if (errorMessageLabel && validElement) {
      validElement.removeChild(errorMessageLabel);
    }
  }
}

function error_function(message, ID, labelID) {
  debugger;
  document.getElementById(labelID).target = "_self";
  document.getElementById(labelID).innerHTML = message;
  document.getElementById(labelID).style.display = "inline";
  document.getElementById(ID).style.background = "#FFCECE";
  document.getElementById(ID).style.border = "thin solid red";
  document.getElementById(ID).value = "";
}