Question

我正在尝试将一些验证错误应用于像文本框这样的控件。我最初使用的是qtip.js，但由于某种原因，它运行不佳。所以，我试图在我想要显示的位置手动显示错误。我如何准确地获得控件右上角的坐标（例如：文本框如图所示），这样我就可以显示错误信息。我试图使用偏移功能但无济于事。

var x = $("txtBox1").offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);

Answer 1

我认为最好只使用纯HTML定位将错误放在文本框下面。不需要使用JavaScript进行手动定位。

这是一个小提琴：https://jsfiddle.net/v0k1jbug/

<input type="text">
<div class="error">Error</div>

然后，如果您使用的是JQuery，则可以根据需要显示/隐藏/填充错误消息。

希望这有帮助。

Answer 2

以下内容可能会有所帮助。

想法是在absolute中放置一个relative元素，然后根据position调整top（根据您的问题）。它甚至可以在不使用外部库的情况下完成。

使用的示例：

$(document).ready(function() {

  $("#validate").click(function(e) {
    $(".inputForm").find(".inputFormMessage").show();
  });
});

.inputForm {
  position: relative;
}
.inputFormMessage {
  display: none;
  position: absolute;
  top: -10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="inputForm">
    <label for="txtBox">Enter Input:</label>
    <input type="text" id="txtBox" />
    <span class="inputFormMessage">Input is not valid!</span>
  </div>
  <div>
    <input type="button" id="validate" value="Validate" />
  </div>
</div>

可以使用的另一个片段（定位由Styles控制并在action上呈现）

window.onload = function() {

  // Attach handler to `validate` button 
  document.querySelector("#validate").onclick = function(e) {
    var isValid = false;
    var elementToCheck = null;

    // Disable if any `message` elements are active
    Object.values(document.querySelectorAll(".inputFormRowMessage")).forEach(function(element, index, array) {
      element.style.display = "none";
    });

    // Validate First name
    elementToCheck = document.querySelector("#txtBoxFirstName");
    isValid = elementToCheck.value.length > 0;
    if (!isValid) {
      // Show the error message
      document.querySelector(".inputFormRowMessageFirstName").style.display = "inline-block";
    }

    // Validate Last name
    elementToCheck = document.querySelector("#txtBoxLasttName");
    isValid = elementToCheck.value.length > 0;
    if (!isValid) {
      // Show the error message
      document.querySelector(".inputFormRowMessageLasttName").style.display = "inline-block";
    }

    // .. do other validations and stylings...
    // ...
  };

};

.inputForm {
  font-family: "Trebuchet MS", Verdana, Tahoma;
  font-size: 12px;
}
.inputFormRow {
  position: relative;
  padding: 10px;
  margin: 10px;
}
.inputFormRow > label {
  width: 100px;
  display: block;
  float: left;
}
.inputFormRowMessage {
  display: none;
  position: absolute;
  top: -10px;
  padding: 2px;
  color: red;
}

<div>
  
  <div class="inputForm">

    <div class="inputFormRow">
      <label for="txtBoxFirstName">First Name:</label>
      <input type="text" id="txtBoxFirstName" />
      <span class="inputFormRowMessage inputFormRowMessageFirstName">Please enter First Name.</span>
    </div>

    <div class="inputFormRow">
      <label for="txtBoxLasttName">Last Name:</label>
      <input type="text" id="txtBoxLasttName" />
      <span class="inputFormRowMessage inputFormRowMessageLasttName">Please enter Last Name.</span>
    </div>

    <div class="inputFormRow">
      <label for="txtBoxAge">Age:</label>
      <input type="text" id="txtBoxAge" />
      <span class="inputFormRowMessage">Not a valid age format.</span>
    </div>

    <div>
      <input type="button" id="validate" value="Validate" />
    </div>
    
  </div>

Answer 3

jsFiddle：https://jsfiddle.net/jchotdjk/1/

HTML

<div class="container">

  <div class="input-group">
    <input type="text" />
    <span class="error">Invalid email address</span>
  </div>

</div>

CSS

.container {
  padding: 25px;
  background-color: #9b9;
}

.input-group input{
  height: 20px;
}

.input-group .error{
  position: relative;
  top: -20px;
}

要将错误放在输入上方和右侧，请将错误放在范围内。然后你需要将误差的位置设置为相对，然后用我指定为20px的输入的总高度强制它

Answer 4

您需要做的是：

创建3个元素，一个容器，一个input和一个错误元素。

<div class="input__group">
  <input type="text">
  <span class="error">Error Message.</span>
</div>

然后定义以下CSS：

.input__group {
  position: relative;
  display: inline-block;
  margin-top: 50px; /* Since the error position is absolute, you will need
                       to add some space, in this demo we are using a margin.*/
}

.error {
  position: absolute;
  bottom: 100%; /* Used to place the element to 
                   the top by the total container's height (100%) */
  left: 100%; /* Used to place the element to
                 the right by the total container's width (100%) */
}

.input__group {
  position: relative;
  display: inline-block;
  margin-top: 50px;
}
.error {
  position: absolute;
  bottom: 100%;
  left: 100%;
  color: whitesmoke;
  background-color: coral;
}

<div class="input__group">
  <input type="text">
  <span class="error">Error Message.</span>
</div>

将错误消息应用于文本框

4 个答案: