如何将错误弹出窗口与字段中心对齐

分类：编程问答

如何解决如何将错误弹出窗口与字段中心对齐

问题：如果弹出窗口中的文本很长，它会使弹出窗口的 div 变大，从而导致它没有在其字段的中心对齐。左侧位置也会根据弹出 div 的大小而变化。

目标：我试图将错误弹出窗口垂直对齐到每个字段的中心。并使所有弹出窗口的左侧位置相同。有没有办法实现这一目标？

另外，在移动设备上有没有好的解决方案？正在考虑将弹出窗口放置在每个字段的顶部，但根据文本，弹出窗口可能太大而掩盖了其他一些元素。决定创建这些自定义弹出窗口，而不是使用内置 HTML，因为如果用户打开自动完成下拉菜单，它们会隐藏在自动完成下拉列表中。

function check_form_validity(button,form,event) {

  event.preventDefault();

  // check if the form has any invalid fields
  if (form.checkValidity() == false) {

    const form_fields = form.querySelectorAll('input:not([type="submit"],[type="hidden"]),select,textarea');

    form_fields.forEach(field => {

      let field_label;
      let error_msg_div;
      let field_parent_element = field.parentElement;


      if (field_parent_element.classList.contains('input-field-div')) {
        field_label = field_parent_element.querySelector('label');
        error_msg_div = field_parent_element.querySelector('.error-popup');
      } else {
        field_label = field_parent_element.parentElement.querySelector('label');
        error_msg_div = field_parent_element.parentElement.querySelector('.error-popup');
      }


      // check which fields are invalid
      if (field.checkValidity() == false) {

        field.focus();

        if (field_label.getBoundingClientRect().top < 0) {
          field_label.scrollIntoView();
        }

        if (field.type == 'email') {

          if (field.validity.patternMismatch == true && field.validity.typeMismatch == false) {
            field.setCustomValidity('Please enter a proper email address.');
          } else {
            field.setCustomValidity('');
            error_msg_div.textContent = '';
            field_label.classList.remove('error')
            error_msg_div.classList.remove('show-element');
          }

        }

        // add the error message into the div
        error_msg_div.textContent = field.validationMessage;

        if (error_msg_div.textContent.length > 1) {
          // add class to show div
          error_msg_div.classList.add('show-element');

          // add class to color the fields label red
          field_label.classList.add('error')
        }

      } else {
        field_label.classList.remove('error')
        error_msg_div.classList.remove('show-element');
      }

    });
  } else {
    form.submit();
    button.disabled = true;
  }
};
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

#contact-page .form-type-nav {
  margin-bottom: 15px;
}

#contact-page .form-type-btn {
  padding: 8px;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid;
  -webkit-Box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-Box;
  display: -ms-inline-flexBox;
  display: inline-flex;
  background: transparent;
}

#contact-page .form-type-btn:hover,#contact-page .form-type-btn.selected {
  color: #fff;
  background: #478bb8;
}

#contact-page .form-type-btn.selected {
  cursor: default;
  pointer-events: none;
}

#contact-page .form-type-btn .icon {
  -webkit-mask-size: cover;
  mask-size: cover;
  margin-right: 4px;
  background: black;
}

#contact-page .form-type-btn:hover .icon,#contact-page .form-type-btn.selected .icon {
  background: #fff;
}

#contact-page #form-section>form {
  display: none;
  min-height: 549px;
}

#contact-page #form-section>form.show-element {
  display: block;
}

#contact-page #form-section>form input[type="submit"] {
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 9px 37px;
  font-weight: bold;
  border-radius: 6px;
  background: #f37321;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#contact-page #form-section>form input[type="submit"]:hover {
  -webkit-filter: brightness(107%);
  filter: brightness(107%);
}

#contact-page .input-field-div {
  display: -ms-grid;
  display: grid;
  position: relative;
  margin-bottom: 24px;
}

#contact-page .input-field-div label.error {
  color: red;
}

.error-popup {
  right: 0;
  top: 45%;
  padding: 7px;
  display: none;
  color: #fff;
  z-index: 10000;
  font-weight: bold;
  position: absolute;
  border-radius: 5px;
  max-width: 256px;
  /* background: #a8a8a8; */
  /* background: #c8c8c8; */
  background: #478bb8;
  transform: translateX(110%);
  Box-shadow: 1px 1px 1px rgba(0,0.1);
}

.error-popup.show-element {
  display: block;
}

.error-popup::before {
  content: "";
  top: 50%;
  left: -9px;
  position: absolute;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-right: 10px solid #478bb8;
  border-bottom: 6px solid transparent;
}

#contact-page .input-field-div label {
  font-size: 14px;
  margin-bottom: 8px;
}

#contact-page .input-field-div input,#contact-page .input-field-div select,#contact-page .input-field-div textarea {
  border-radius: 5px;
  border: 1px solid #000000;
}

#contact-page .input-field-div input,#contact-page .input-field-div textarea {
  padding: 9px 10px;
}

#contact-page #contact-topic {
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* color: #939393; */
  background: transparent;
}

#contact-page #contact-topic option:not(disabled) {
  color: #000;
}

#contact-page .login-benefits-list {
  padding: 0;
  list-style: none;
  margin: -6px 0 16px 0;
}

#contact-page .login-benefits-list li:not(:last-of-type) {
  margin-bottom: 6px;
}

#contact-page .login-benefits-list li::before {
  content: "\2713";
  margin-right: 4px;
  color: #f37321;
}

#contact-page .password-div {
  position: relative;
}

#contact-page .password-div>input {
  width: 100%;
  padding: 9px 30px 9px 10px;
}

#contact-page .password-div>button {
  top: 50%;
  border: 0;
  right: -5px;
  position: absolute;
  background: transparent;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

#contact-page .guest-form-success-msg {
  padding: 10px;
  display: none;
  color: #fff;
  margin: 25px 0 0;
  border-radius: 5px;
  background: #478bb8;
}

#contact-page .guest-form-success-msg.show-element {
  display: block;
}

#contact-page .messageStackSuccess img,#contact-page .messageStackWarning img,#contact-page .messageStackerror img {
  display: none;
}

#contact-page .messageStackerror,#contact-page .messageStackWarning,#contact-page .messageStackSuccess {
  padding: 10px;
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  background: #478bb8;
}

#contact-page .error-msg {
  font-size: 18px;
  margin-top: 20px;
  color: red;
  text-align: center;
}

#contact-page .contact-topic-selector-div {
  position: relative;
}

#contact-page .contact-topic-selector-div .select-arrow {
  top: 50%;
  right: 5px;
  position: absolute;
  pointer-events: none;
  -webkit-transform: translate(-50%,-50%);
}


/* ==================================================================================================================================================================
                                                                         Small screen sizes - mobile,ect..
      ================================================================================================================================================================== */

@media (max-width: 767px) {
  #contact-info-section {
    display: none;
  }
  #contact-page .info-div {
    margin: 0 -2% 20px -2%;
    padding: 10px 10px 12px 10px;
    background: rgba(71,139,184,0.2);
  }
  #contact-page .layout main h1 {
    font-size: 18px !important;
  }
  #contact-page .info-div p:last-of-type {
    line-height: 1.3;
    margin-bottom: 0;
  }
  #contact-page .info-div p>a {
    font-size: 17px;
  }
  #contact-page .form-type-btn .text {
    font-size: 14px;
  }
  #contact-page .form-type-btn .icon {
    width: 11px;
    height: 11px;
  }
  #contact-page .form-type-btn .add-user-icon {
    -webkit-mask: url(../images/contact-page/icons/mobile/add-user.svg);
    mask: url(images/contact-page/icons/mobile/add-user.svg);
  }
  #contact-page .form-type-btn .current-user-icon {
    width: 9.6px;
    -webkit-mask: url(../images/contact-page/icons/mobile/current-user.svg);
    mask: url(images/contact-page/icons/mobile/current-user.svg);
  }
  #contact-page .form-type-btn .mail-center-icon {
    -webkit-mask: url(../images/contact-page/icons/mobile/chart.svg);
    mask: url(images/contact-page/icons/mobile/chart.svg);
  }
}


/* ==================================================================================================================================================================
                                                                         Medium screen sizes - tablets,desktop,ect..
      ================================================================================================================================================================== */

@media (min-width: 768px) {
  #contact-page .grid-div {
    display: flex;
    -webkit-Box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  #contact-page #form-section,#contact-page #contact-info-section {
    padding-top: 32px;
  }
  #contact-page #form-section {
    max-width: 460px;
    margin-right: 15px;
  }
  #contact-page .info-div {
    margin-bottom: 32px;
  }
  #contact-page #form-section h1 {
    font-size: 22px;
    margin: 0 0 15px 0;
  }
  #contact-page #form-section>p {
    margin-bottom: 16px;
  }
  #contact-page .info-div p.mobile-only {
    display: none;
  }
  #contact-page .form-type-btn .text {
    font-size: 18px;
  }
  #contact-page .form-type-btn .add-user-icon {
    width: 19px;
    height: 17px;
    -webkit-mask: url(../images/contact-page/icons/desktop/add-user.svg);
    mask: url(images/contact-page/icons/desktop/add-user.svg);
  }
  #contact-page .form-type-btn .current-user-icon {
    width: 15.1px;
    height: 17px;
    -webkit-mask: url(../images/contact-page/icons/desktop/current-user.svg);
    mask: url(images/contact-page/icons/desktop/current-user.svg);
  }
  #contact-page .form-type-btn .mail-center-icon {
    width: 16px;
    height: 16px;
    -webkit-mask: url(../images/contact-page/icons/desktop/chart.svg);
    mask: url(images/contact-page/icons/desktop/chart.svg);
  }
  #contact-page #contact-info-section {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: 330px;
    padding: 32px 40px 40px;
    background: rgba(71,0.1);
  }
  #contact-page #contact-info-section>img {
    max-width: 100%;
    margin-bottom: 20px;
  }
  #contact-page #contact-info-section>p {
    display: flex;
    justify-content: center;
    font-size: 18px;
  }
  #contact-page #contact-info-section>p img {
    margin-right: 5px;
  }
  #contact-page #contact-info-section>p {
    margin-bottom: 8px;
  }
}
<div id="contact-page">

  <section id="form-section">



    <form action="#" name="guest-form" id="guest-form" class="form-type show-element" method="post">


      <input type="hidden" name="page_type" id="page_type" value="">

      <div class="input-field-div">
        <label for="guest-name">Name</label>
        <input type="text" id="guest-name" name="guest-name" required minlength="2">
        <div class="error-popup"></div>
      </div>

      <div class="input-field-div">
        <label for="guest-email">Email</label>
        <input type="email" id="guest-email" name="guest-email" required pattern="^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$">
        <div class="error-popup"></div>
      </div>

      <div class="input-field-div">
        <label for="guest-email">Topic</label>

        <div class="contact-topic-selector-div">
          <select name="contact-topic" id="contact-topic" required>
            <option value="" selected disabled>Please select a topic</option>
            <option value="Signing-Up">Signing up</option>
            <option value="General-Questions">General Questions</option>
            <option value="Finding-a-Location">Find a Location</option>
            <option value="information-Request">information Request</option>
          </select>

          <img src="/images/contact-page/icons/select-arrow.svg" class="select-arrow" alt="Arrow">
        </div>
        <div class="error-popup"></div>
      </div>

      <div class="input-field-div">
        <label for="contact-subject">Subject</label>
        <input type="text" name="contact-subject" id="contact-subject" required minlength="2">
        <div class="error-popup"></div>
      </div>


      <div class="input-field-div">
        <label for="contact-message">Message</label>
        <textarea name="contact-message" id="contact-message" cols="30" rows="6" required minlength="2"></textarea>

        <div class="error-popup"></div>
      </div>

      <input type="submit" name="guest-form-submit" value="Submit" id="guest-form-submit-btn" onclick="check_form_validity(this,this.form,event)">


    </form>


  </section>

</div>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Selenium Web驱动程序和Java元素在(x，y)点处不可单击其他元素将获得点击?
Selenium Web驱动程序和Java。元素在(x，y)点处不可单击。其他元素将获得点击?
Python-如何使用点“” 访问字典成员？
Python-如何使用点“。” 访问字典成员？
Java 字符串是不可变的到底是什么意思？
Java 字符串是不可变的。到底是什么意思？
Java中的“ final”关键字如何工作？我仍然可以修改对象
Java中的“ final”关键字如何工作？（我仍然可以修改对象。）
“loop:”在Java代码中这是什么，为什么要编译？
“loop:”在Java代码中。这是什么，为什么要编译？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常为什么？
java.lang.ClassNotFoundException：sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么？
这是用Java进行XML解析的最佳库
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构为什么？
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么？
如何在Java中聆听按键时移动图像
如何在Java中聆听按键时移动图像。
Java“Program to an interface”这是什么意思？
Java“Program to an interface”。这是什么意思？
Java在半透明框架/面板/组件上重新绘画
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName”和“ Class.forNamenewInstance”之间有什么区别？
Java“ Class.forName（）”和“ Class.forName（）。newInstance（）”之间有什么区别？
在此环境中不提供编译器也许是在JRE而不是JDK上运行？
在此环境中不提供编译器。也许是在JRE而不是JDK上运行？
Java用相同的方法在一个类中实现两个接口哪种接口方法被覆盖？
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖？
Java 什么是Runtime.getRuntimetotalMemory和freeMemory？
Java 什么是Runtime.getRuntime（）。totalMemory（）和freeMemory（）？
java.library.path中的java.lang.UnsatisfiedLinkError否*****dll
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的” 即使在同一包装中
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类怎么处理？
Java 导入两个具有相同名称的类。怎么处理？
Java 是否应该在HttpServletResponse.getOutputStream/getWriter上调用.close？
Java 是否应该在HttpServletResponse.getOutputStream（）/。getWriter（）上调用.close（）？
Java RegEx元字符和普通点？
Java RegEx元字符（。）和普通点？
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot