Skip to content
Advertisement

Jquery validation making incorrect appearance of form elements, submit button? [closed]

my php page contain the following html/jquery for password field validation. Below is my code

<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>

The problem is when I input values in new password fields the validation works well but the submit button is disappearing ? is there something I missing ? I found this code snippet from web. Please help to solve this code.

Advertisement

Answer

Your input might be inside the div that’s getting it’s content replaced using .html(). Simply get it out if that’s the case. But in your code as is, you’re not closing the div properly.

<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>
User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement