PHP表单提交无效(Javascript用于验证目的)

时间:2017-11-07 02:45:58

标签: javascript php jquery

我正在尝试使用带有客户端javascript的PHP提交表单来验证密码。没有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,这也出现在同一个脚本中。

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

1 个答案:

答案 0 :(得分:1)

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

来源:https://jqueryvalidation.org/