jQuery 验证在第二遍时不起作用

Question

我有一个密码更新表单，它对三个字段使用 jQuery 验证。第一次显示表单时验证功能正确，如果输入的数据有效，则第二次显示成功消息和表单。如果用户在第二次显示表单时单击了提交按钮，则表单将在没有任何验证的情况下提交。

应该注意的一点，虽然我不确定它是否重要，但在同一个 js 文件中存在多个表单的验证规则，因为这些表单都位于同一页面上并通过 show/hide 显示js.

此外，当显示成功消息时，对我的其他表单（预订表单）的验证也不起作用，但是一旦密码更新表单上方的成功消息被任何其他数据替换，所有验证都会正常运行。

知道为什么当密码更新表单上方显示成功消息时，密码更新表单的验证在下一次提交时不起作用？

成功时会生成以下输出：

$output = '<p class="message">Your password has been updated.</p>

然后添加到以下内容：

    <!-- php snippet -->

   $output .=    '<form method="post" action="thispage.php" method="post" name="updatepassword" id="updatePasswordForm">
       <input type="hidden" value="updatePassword" name="task">
       <table class="members">
       <tr>
       <td class="formlabel top">Current Password: </td>
       <td><input name="currentpassword" id="currentpassword" type="password" size="30" class="inputbox" placeholder="Your Current Password"></td>
       </tr>
       <tr>
       <td class="formlabel top">New Password: </td>
       <td><input name="newpassword" id="newpassword" type="password" size="30" class="inputbox" placeholder="Your New Password"></span></td>
       </tr>
       <tr>
       <td class="formlabel top">Re-enter New Password: </td>
       <td><input name="newpassword2" id="newpassword2" type="password" size="30" class="inputbox" placeholder="New Password Again for Validation"></td>
       </tr>
       <tr>
       <td colspan="2" class="center"><input type="submit" name="Submit" class="button" value="Update Password"></td>
       </tr>
       </table>
       </form>  ';

    <!-- end snippet -->

并显示：

    echo $output;

js:

    $().ready(function() {
      // validate reservation form on keyup and submit
      $("#ReservationForm").validate({
        rules: {
          datepicker: {
            required: true
          },
          number: {
            required: true,
            digits: true
          }
        },
        messages: {
          datepicker: {
            required: "Enter the date<br />Use the calendar to select the date"
          },
          number: {
            required: "Enter your number",
            digits: "Enter only digits"
          }
        }
      });

      // validate select segments form on keyup and submit
      $("#selectSegments").validate({
        rules: {
          'segment[]': {
            required: true
          }
        },
        messages: {
          'segment[]': {
            required: "Select at least one segment"
          }
        }
      });

      // validate update password form on keyup and submit
      $("#updatePasswordForm").validate({
        rules: {
          currentpassword: {
            required: true,
            remote: "remote/check.current.password.php"
          },
          newpassword: {
            required: true,
            minlength: 6
          },
          newpassword2: {
            required: true,
            minlength: 6,
            equalTo: "#newpassword"
          }
        },
        messages: {
          currentpassword: {
            required: "Enter your current password",
            remote: "Your password is incorrect"
          },
          newpassword: {
            required: "Enter your new password",
            minlength: "Enter at least 6 characters"
          },
          newpassword2: {
            required: "Reenter your new password",
            minlength: "Enter at least 6 characters",
            equalTo: "New passwords don't match"
          }
        }
      });
    });

<!-- end snippet -->

Answer 1

此问题已解决。

当页面加载成功消息时，我未能包含所需的 jQuery 代码和库。一旦我重新添加它，它就完美地工作了。