jQuery validation does not work. jQuery.Deferred exception: $(...).validate is not a function

Viewed 835

Yes, I tried to read all questions about this and searching information about this. It seems, that all is ok. But I have an error in browser.I spent a lot of time for understanding whats wrong, need help.

What i tried to do:

  1. Change libraries
  2. Change order of libraries
  3. Make out scripts to other file
  4. Change place of script in file
  5. Change names and id of form
  6. Check syntax, of course, check syntax

Thank you for your time.

picture with error in browser

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="root" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Edit account</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

    <script src="resources/jsScripts/addInput.js" language="Javascript" type="text/javascript"></script>
    <script src="resources/jsScripts/addInputWithValue.js" language="Javascript" type="text/javascript"></script>
</head>
<body>

<script type="text/javascript">

    $().ready(function () {
        $('#registration').validate({
            rules: {
                name: {
                    "required": true,
                    minlength: 2
                },
                surname: "required",
                password: {
                    required: true,
                    minlength: 3
                },
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                name: "Please enter your firstname",
                surname: "Please enter your lastname",
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least 3 characters long"
                },
                email: "Please enter a valid email address"
            },
            submitHandler: function (form) { // for demo
                alert('valid form');
                return false;
            }
        });
    });
</script>

<%@ include file="search.jsp" %>
<div class="container-fluid jumbotron">

    <div class="form-group row-center">
        <form action="<c:url value="/account"/>" id="registration" name="registration" method="post"
        class="form-horizontal"
        enctype="multipart/form-data">

        <div class="form-group" align="right">
            <label for="name" class="col-sm-3 control-label">Имя</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="name" id="name"
                <c:if test="${not empty account.name}">
                    value=${account.name}
                </c:if>
                >
            </div>

        </div>

        <div class="form-group" align="right">
            <label for="surname" class="col-sm-3 control-label">Фамилия</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="surname" id="surname"
                <c:if test="${not empty account.surname}">
                    value=${account.surname}
                </c:if>
                >
            </div>
        </div>

        <div class="form-group" align="right">
            <label for="patronymic" class="col-sm-3 control-label">Отчество</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="patronymic" id="patronymic"
                <c:if test="${not empty account.patronymic}">
                    value=${account.patronymic}
                </c:if>
                >
            </div>
        </div>

        <div class="form-group" align="right">
            <label for="login" class="col-sm-3 control-label">Логин</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="login" id="login"
                <c:if test="${not empty account.login}">
                    value=${account.login}
                </c:if>>
            </div>
        </div>

        <div class="form-group">
            <label for="password" class="col-sm-3 control-label">Пароль</label>
            <div class="col-sm-4">
                <input type="password" class="form-control" name="password" id="password"
                       placeholder="Введите новый пароль">
            </div>
        </div>

        <div class="form-group" align="right">
            <label for="phone" class="col-sm-3 control-label">Телефонный номер</label>
            <div class="col-sm-4">
                <input type="tel" class="form-control" id="phone" name="phones"
                <%--onchange="return validate(phones.value())"--%>
                onkeyup="alert('text some ext')"
                <c:if test="${not empty account.contactInfo}">
                    <c:if test="${not empty account.contactInfo.phones}">
                        value=${account.contactInfo.phones.get(0).number}
                    </c:if>
                </c:if>
                >

            </div>
            <div class="col-sm-1">
                <input class="btn btn-success btn-add form-control" type="button"
                       value="+"
                       onClick="addInput('dynamicInput');"
                >
            </div>
        </div>

        <div id="dynamicInput">
        </div>

        <c:if test="${not empty account.contactInfo.phones}">
            <c:forEach var="phone" items="${account.contactInfo.phones}" varStatus="loopCount">
                <c:if test="${loopCount.count > 1}">
                    <script>
                        addInputWithValue('dynamicInput', '${phone.number}');
                    </script>
                </c:if>
            </c:forEach>
        </c:if>

        <div class="form-group" align="right">
            <label for="email" class="col-sm-3 control-label">email</label>
            <div class="col-sm-4">
                <input type="email" class="form-control" name="email" id="email"
                <c:if test="${not empty account.contactInfo}"> value=${account.contactInfo.email}</c:if>
                >
            </div>
        </div>

        </form>
    </div>
</div>
</body>
</html>    
2 Answers
Related