PHPフォームが動作しません（検証のためにJavaScriptが使用されています）

Question

クライアントサイドのJavaScriptを使用してフォームを送信して、パスワードを検証しようとしています。 JavaScriptがなければ、うまく動作します。しかし、両方のパスワードが一致するように検証する必要があります。ここに私のファイルへのコードです。助けてください！

<form id="registration" action="confirmation.php" method="post"> 

    <script> 
     $('#password, #confirm').on('keyup', function() { 
      if ($('#password').val() == $('#confirm').val()) { 
       $('#message').html('Matching').css('color', 'green'); 
      } else 
       $('#message').html('Not Matching').css('color', 'red'); 
     }); 
    </script> 

    <fieldset> 

     <legend>Personal Information</legend> 

     <p> 
      <label for="firstname">First Name:</label> 
      <input name="firstname" id="firstname" type="text" maxlength="29" size="30" required="required" pattern="[a-zA-Z\s]+" placeholder="Example: Bill"> 
     </p> 

     <p> 
      <label for="lastname">Last Name: </label> 
      <input name="lastname" id="lastname" type="text" maxlength="29" size="30" required="required" pattern="[a-zA-Z\s]+" placeholder="Example: Gates"> 
     </p> 

     <p> 
      <label for="date">Date of Birth:</label> 
      <select name="month" required="required"> 
       <?php 
          require('includes/months.html'); 
          ?> 
      </select> 
      <select name="day" required="required"> 
       <?php 
          require('includes/days.html'); 
          ?> 
      </select> 
      <select name="year" required="required"> 
       <?php 
          require('includes/years.html'); 
          ?> 
      </select> 
     </p> 

     <p> 
      <label for="email">Email Address:</label> 
      <input name="email" id="email" type="text" maxlength="39" size="40" required="required" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,3}$" placeholder="Example: bill@microsoft.com"> 
     </p> 

     <p> 
      <label for="password">Password:</label> 
      <input name="password" id="password" type="password" maxlength="19" size="20" required="required" pattern="[a-zA-Z0-9]+" placeholder="Enter your password"> 
     </p> 

     <p> 
      <label for="confirm">Confirm Password:</label> 
      <input name="confirm" id="confirm" type="password" maxlength="19" size="20" required="required" pattern="[a-zA-Z0-9]+" placeholder="Confirm your password"> <span id='message'></span> 
     </p> 

    </fieldset> 

    <fieldset> 

     <legend>Mailing Address</legend> 

     <p> 
      <label for="street">Street Address:</label> 
      <input name="street" id="street" type="text" maxlength="29" size="30" required="required" pattern="^([0-9]+)?[a-zA-Z ]+$" placeholder="Example: 1030 South Park"> 
     </p> 

     <p> 
      <label for="postalcode">Postal Code:</label> 
      <input name="postalcode" id="postalcode" type="text" maxlength="7" size="15" required="required" pattern="^[a-zA-Z]{1}\d{1}[a-zA-Z]{1} *\d{1}[a-zA-Z]{1}\d{1}$" placeholder="Example: B3J 2K9"> 
     </p> 

     <p> 
      <label for="city">City:</label> 
      <input name="city" id="city" type="text" maxlength="29" size="30" required="required" pattern="[a-zA-Z\s]+" placeholder="Example: Halifax"> 
     </p> 

     <p> 
      <label for="country">Country:</label> 
      <input name="country" id="country" type="text" maxlength="29" size="30" required="required" pattern="[a-zA-Z\s]+" placeholder="Example: Canada"> 
     </p> 

    </fieldset> 

    <input type="submit" name="submit" class="button" value="Register!"> 

</form> 

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script> 

私はjquery.validatorを使用していますが、これも同じスクリプトに存在します。

Answer 1

<script> 
    jQuery.validator.setDefaults({ 
     debug: true, 
     success: "valid" 
    }); 
    $(document).ready(function() { 
     $("#registration").validate({ 
      rules: { 
       password: "required", 
       confirm: { 
        equalTo: "#password" 
       } 
      } 
     }) 
    }); 
</script> 

password: { 
     required: "enter your pass" 
    }, 
    confirm_password: { 
     required: "Enter confirm", 
     equalTo: "Enter the same pass" 
    } 

源：https://jqueryvalidation.org/