Uncaught ReferenceError: $ is not defined also getting Uncaught TypeError: $(...).validate is not a function at HTMLDocument.<anonymous>

Question

我正在尝试为我的联系表单使用 jQuery 验证插件，但一直收到此错误。我曾尝试将外部 js 文件脚本标记放在 jquery 和插件等的其他脚本标记下方，但是收到一条错误消息，指出 validate is not a function typeerror $.我看到有人说要使用 cdn，但我再也找不到 jquery 验证插件了。

 <meta charset="UTF-8">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@200;300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.validate.js"></script>
    <script type="text/javascript" src="js/additional-methods.js"></script>
    <script type="text/javascript" src="js/form-validation.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="../bootstrap-boilerplate/css/style.css">
    <link rel="stylesheet" href="css/style.css">
    <title>Winter Adventures</title>

<form action="" name="registration">
                <div class="form-group row">
                    <div class="col-md-12">
                        <input type="text" id="name" name="name" class="form-control" placeholder="Name...">
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-12">
                        <input type="email" id="email" name="email" class="form-control" placeholder="Email address..." >
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-12">
                        <input type="text" id="address" name="address" class="form-control" placeholder="Address..." >
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-12">
                        <input type="text" id="postcode" name="postcode" class="form-control" placeholder="Postcode..." >
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-12">
                        <select id="inputArea" class="form-control" required>
                            <option selected>Please choose an area...</option>
                            <option>Services</option>
                            <option>Accommodation</option>
                            <option>Other</option>
                        </select>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-12">
                        <textarea id="message" name="message" class="form-control" placeholder="Message..."></textarea>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-12 mb-5 submit-btn text-center">
                        <button type="submit" class="btn make-it-bigger">Submit</button>
                    </div>
                </div>

            </form>

    // Wait for the DOM to be ready
    $(document).ready(function() {
        // Initialize form validation on the registration form.
        // It has the name attribute "registration"
        $("form[name='registration']").validate({
        // Specify validation rules
        rules: {
            // The key name on the left side is the name attribute
            // of an input field. Validation rules are defined
            // on the right side
            name: "required",
            address: "required",
            postcode: "required",
            email: {
                required: true,
                // Specify that email should be validated
                // by the built-in "email" rule
                email: true
            }
        },
        // Specify validation error messages
            messages: {
                name: "Please enter your firstname",
                address: "Please enter your address",
                postcode: "Please enter your postcode",
                email: "Please enter a valid email address"
        },
        // Make sure the form is submitted to the destination defined
        // in the "action" attribute of the form when valid
        submitHandler: function(form) {
            form.submit();
        }
    }); // end of validation
    }); //end of document ready

Answer 1

这可能是因为js版本不同。尝试：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

参考this

Uncaught ReferenceError: $ is not defined also getting Uncaught TypeError: $(...).validate is not a function at HTMLDocument.<anonymous>

Uncaught ReferenceError: $ is not defined also getting Uncaught TypeError: $(...).validate is not a function at HTMLDocument.<anonymous>

jquery

jquery-validate