错误验证适用于一种形式，但不适用于另一种形式（非常相似的形式）

Question

我无法在我的网站上获取表单以在提交时进行适当的验证（我们称之为表单 #1）。验证目前正在处理我网站上的另一个表格（表格 #2）。为澄清起见，表单 #2 在出现错误时正确地在字段周围显示红色边框，如下所示：

但是，表单 #1 仅显示丑陋的默认 js 验证，例如：

通过中心访问表格 #1（错误）link ("Launch Lightbox") 表格 #2（右）可通过右上角 "Contact" link.

访问

两种形式的代码几乎相同，只是它们的父形式 div 不同，因为它们的打开方式不同。 这是表格 #1（错误）代码：

<aside class="lightbox">
  <input type="checkbox" class="state" id="lightbox-demo" />
  <article class="content">

    <main class="main">
    <a href="#" class="closest"><img src="img/x.png" class="btn_close" title="Close Window" alt="Close Contact Window" /></a>
  <form method="post" action="submit.php" id="contactform" class="signin">

        <input name="name" id="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" id="email" type="email" class="feedback-input" placeholder="Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" required title="Whoops! Invalid email"/>
       <div class="antispam">
       <br /><input name="url" type="hidden" /></div>
       <textarea name="message" id="message" class="feedback-input" placeholder="Write away!" required minlength="15" required title="Must be at least 15 characters"></textarea>
        <button id="flybutton">
            <p>Submit </p>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
            </svg>
        </button>
</form>
    </main>
    <footer class="footer">
      <button class="button" type="button">Do something</button>
    <label id="lightbox-demo-close" class="button" for="lightbox-demo">Close</label>
    </footer>
  </article>
  <label class="backdrop" for="lightbox-demo"></label>
</aside>

这是表格 #2（右）代码：

<div id="login-box" class="login-popup">
<a href="#" class="closest"><img src="img/x.png" class="btn_close" title="Close Window" alt="Close Contact Window" /></a>
  <form method="post" action="submit.php" id="contactform" class="signin">

        <input name="name" id="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" id="email" type="email" class="feedback-input" placeholder="Email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)" required title="Whoops! Invalid email"/>
       <div class="antispam">
       <br /><input name="url" type="hidden" /></div>
       <textarea name="message" id="message" class="feedback-input" placeholder="Write away!" required minlength="15" required title="Must be at least 15 characters"></textarea>
        <button id="flybutton">
            <p>Submit</p>
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
                <path id="paper-plane-icon" d="M462,54.955L355.371,437.187l-135.92-128.842L353.388,167l-179.53,124.074L50,260.973L462,54.955z
M202.992,332.528v124.517l58.738-67.927L202.992,332.528z"></path>
            </svg>
        </button>
</form>
<div id="result"></div>

</div>

拜访 <script src="js/jquery.validation.js"></script>

你能发现问题吗？非常感谢！！

Answer 1

首先你有2个id相同的元素，一个元素的id必须是唯一的。

所以对这些元素使用不同的ID，然后你需要为这两个元素初始化插件

<div id="login-box" class="login-popup">
    <a href="#" class="closest"><img src="img/x.png" class="btn_close" title="Close Window" alt="Close Contact Window" /></a>
    <form method="post" action="submit.php" id="contactform2" class="signin">

然后将插件初始化移动到 dom 就绪处理程序（第 515 行）

jQuery(function ($) {
    $("#contactformm, #contactform2").validate({
        submitHandler: function (form) {
            fly(form);
        }
    });
})

错误验证适用于一种形式，但不适用于另一种形式（非常相似的形式）

Error validation works on one form but not another (very similar form)

html

forms

validation

jquery

popup