时间戳

首页 > 解决方案 > Jquery验证使表单元素的外观不正确，提交按钮？

javascript - Jquery验证使表单元素的外观不正确，提交按钮？

问题描述

我的 php 页面包含以下用于密码字段验证的 html/jquery。下面是我的代码

<form method="post" action="http://localhost:7070/FFTFinals/inverse-php/index.php?getPage=iChgPass" align="center">
Current Password:<br>
<input type="password" name="currentPassword"><span id="currentPassword" class="required"></span>
<br>
New Password:<br>
<input type="password" id="newPassword" name="newPassword"><span id="newPassword" class="required"></span>
<br>
Confirm Password:<br>
<input type="password" id="confirmPassword" name="confirmPassword"><span id="confirmPassword" class="required"></span>
<br>
<div class="registrationFormAlert" style="color:green;" id="CheckPasswordMatch">
<script>
    function checkPasswordMatch() {
        var password = $("#newPassword").val();
        var confirmPassword = $("#confirmPassword").val();
        if (password != confirmPassword)
            $("#CheckPasswordMatch").html("Passwords does not match!");
        else
            $("#CheckPasswordMatch").html("Passwords match.");
    }
    $(document).ready(function () {
       $("#confirmPassword").keyup(checkPasswordMatch);
       
    });
    </script>
<br>
<input id="submit" type="submit" name="submit" value="Submit" />
</form>

问题是当我在新密码字段中输入值时，验证效果很好，但提交按钮消失了？有什么我想念的吗？我从网上找到了这个代码片段。请帮助解决此代码。

标签： javascriptphphtmljqueryforms

解决方案

您的输入可能在使用.html(). 如果是这种情况，只需将其取出。但是在您的代码中，您没有正确关闭 div 。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<form method="post" action="http://localhost:7070/FFTFinals/inverse-php/index.php?getPage=iChgPass" align="center">
  Current Password:<br>
  <input type="password" name="currentPassword"><span id="currentPassword" class="required"></span>
  <br> New Password:<br>
  <input type="password" id="newPassword" name="newPassword"><span id="newPassword" class="required"></span>
  <br> Confirm Password:<br>
  <input type="password" id="confirmPassword" name="confirmPassword"><span id="confirmPassword" class="required"></span>
  <br>
  <div class="registrationFormAlert" style="color:green;" id="CheckPasswordMatch">
    <script>
      function checkPasswordMatch() {
        var password = $("#newPassword").val();
        var confirmPassword = $("#confirmPassword").val();
        if (password != confirmPassword)
          $("#CheckPasswordMatch").html("Passwords does not match!");
        else
          $("#CheckPasswordMatch").html("Passwords match.");
      }
      $(document).ready(function() {
        $("#confirmPassword").keyup(checkPasswordMatch);

      });
    </script>
    <br>
  </div>
  <input id="submit" type="submit" name="submit" value="Submit" />
</form>

推荐阅读