HTML DOM目标属性自我

Question

我在我的注册页面上有相当数量的字段，但错误信息只显示在页面顶部，我不知道客户端保持向上滚动以查看错误消息时他们的键在这个领域出了问题。我可以知道如何使用“目标”或任何其他方法来处理这种情况？

这里是我的屏幕的例子，错误消息实际上显示在屏幕的顶部，当用户键入错误的东西，但用户必须向上滚动并检查错误消息，是否有任何方法，我可以用于聚焦/目标/向上滚动以查看错误消息？

这是我当前屏幕的示例代码：1SAMPLE
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 = ""; 
 
}