Блог

Я пытаюсь использовать плагин проверки jQuery для моей контактной формы, но продолжаю получать эту ошибку. Я попытался поместить внешний тег скрипта js-файла ниже других для jquery и плагина и т. Д., Однако получаю сообщение об ошибке, в котором говорится, что validate не является функцией 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;300amp;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

 

Это может быть из-за другой версии 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>

Обратитесь к этому