Question

我有一个表单，上面有一些基本的输入控件。每个标签都有一个带有跨度的标签，用于在验证时显示错误消息。

问题在于，由于某些原因，当我单击提示按钮并且标签显示的表单上有错误时，我似乎无法弄清楚但是它显示在提交按钮旁边的表单底部而不是元素输入控制错误的位置。

当我检查页面时，标签位于表格的正确dom中，但即使我使用绝对位置，定位也会关闭。

表格代码

＆＃13;

<section>
  <div class="block color-scheme-1">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-8 col-md-offset-2  col-md-offset-2">
          <div class="section-sub-title center">
            <article class="section-title-body white">
              <h1 class="head-title"><span>Adress</span> Information</h1>
            </article>
          </div>
          <div class="text-center white">
            <h4 class="widget-title">Mosaic Design Studio <br><br>Avanue street 255, NA</h4>

          </div>
          <div class="text-center white">
            <p>(10 808) 321-1785-952
              <br>(10 808) 321-1785-953
            </p>
            <p>mosaic-design@domain.com
              <br>support@yoursite.com
            </p>
            <br>
            <br>
          </div>
          <div class="section-sub-title center">
            <article class="section-title-body white">
              <h1 class="head-title"><span>Send</span> Massage</h1>
            </article>
          </div>
          <div id="form-wrapper">
            <div id="form-inner">
              <div id="ErrResults">
                <!-- Error Here -->
              </div>
              <div id="MainResult">
                <!-- Response Here -->
              </div>
              <div id="MainContent">
                <form id="MyContactForm" name="MyContactForm" method="post">
                  <p class="name">
                    <input type="text" name="name" id="name" placeholder="Your Name">
                    <label for="name" id="nameLb"><span class="error">*Name Field Required</span>
                    </label>
                  </p>
                  <p>
                    <input type="email" name="email" id="email" placeholder="Your Email">
                    <label for="email" id="emailLb">
                      <span class="error error1">*Email Field Required</span> 
                      <span class="error error2">*Email Not Valid</span>
                    </label>
                  </p>
                  <p>
                    <input type="text" name="phone" id="phone" placeholder="Your Telephone">
                    <label for="phone" id="phoneLb"><span class="error">*Telephone Field Required</span>
                    </label>
                  </p>
                  <p class="textarea">
                    <textarea name="message" id="message" placeholder="Your Message" rows="4"></textarea>
                    <label for="message" id="messageLb"><span class="error">*Message Field Required</span>
                    </label>
                  </p>
                  <div class="clearfix"></div>
                  <div class="text-center">
                    <a href="#" class="contact-btn">Send Message</a> 
                  </div>

                </form>
              </div>
              <!--MainContent-->
            </div>
            <!--form-inner-->
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

＆＃13;

CSS

＆＃13;

#form-wrapper #MyContactForm .error {
  bottom: 30px;
  color: #FF2255;
  font-family: inherit;
  font-size: 12px;
  font-weight: normal;
  left: auto;
  letter-spacing: 0;
  position: absolute;
  right: 20px;
  text-transform: capitalize;
  width: auto;
}

＆＃13;

Answer 1

从position: absolute

中删除.error

Demo

您已为错误设置了绝对位置，而未设置其容器的相对位置。因此，它们与您页面上的某些内容相关。

更新：要在输入中定位错误，您需要将position:relative添加到p标记。你应该为你想要定位的那些p标签分配一个类，这样它就不会与页面上其他地方的p标签冲突，如果有的话。

示例：

p {
   position: relative;
}

然后在.error和一些定位坐标上使用绝对定位，如下所示：

.error {
  position: absolute;
  top: 5px;
  left: 3px;
}

您会注意到您的错误位于输入框中，并与输入占位符发生冲突。当显示错误时，您可能需要一个脚本来隐藏占位符。

Updated demo

注意：我不确定在输入框中放置错误消息是否合乎一格。将它展示在旁边可能会容易得多吗？

标签位于预期元素

1 个答案: