Почему JQuery validate.js не работает с Spring Form?

Question

Я пытаюсь проверить правильность добавления элемента select, используя JQuery validate.js в весенней форме. но проверка происходит только для одного поля, и если я отправляю пустую категорию передается. Я не знаю, что здесь происходит не так.

Я добавил это jquery файлы

 <!-- JQuery -->
    <script src="${js}/jquery.js"></script>

    <!-- validate js-->
    <script src="${js}/jquery.validate.js"></script>

   <!-- Bootstrap core JavaScript -->
   <script src="${js}/bootstrap.min.js"></script>

Это мой код, в котором я использовал пружинную форму.

form.jsp

<div class="modal fade" id="myCategoryModal" tabindex="-1"
    role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Category</h5>
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <!-- Category form  -->
                <sf:form id = "categoryForm" modelAttribute="category"
                    action="${contextRoot}/manage/category" method="POST" class="">

                    <div class="form-group row">
                        <label for="category_name" class="col-sm-4 col-form-label">Category
                            Name</label>
                        <div class="col-sm-8">
                            <sf:input type="text" path="name" class="form-control"
                                id="category_name" />
                        </div>
                    </div>

                    <div class="form-group row">
                        <label for="category_description" class="col-sm-4 col-form-label">Category
                            Description</label>
                        <div class="col-sm-8">
                            <sf:textarea type="text" cols="" rows="4" path="description"
                                class="form-control" id="category_description" />
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="offset-sm-4 col-sm-8">
                            <input type="submit" value="Add Category"
                                class="btn btn-primary" />
                        </div>
                    </div>

                </sf:form>
            </div>

        </div>
    </div>
</div>

customjs.js

// validation code for category
var $categoryForm = $('#categoryForm');
if ($categoryForm.length) {
    $categoryForm
            .validate({
                rules : {
                    name : {
                        required : true,
                        minlength : 2
                    },
                    description : {
                        requried : true
                    }
                },
                messages : {
                    name : {
                        required : 'Please add the category name!',
                        minlength : 'The category name should not be less than 2 characters'
                    },
                    description : {
                        required : 'Please add a description for this category!'
                    }
                },
                errorElement : 'em',
                errorPlacement : function(error, element) {
                    // add the class of help-block
                    error.addClass('help-block');
                    // add the error element after the input element
                    error.insertAfter(element);
                }
            });
}

// -------------------------

что я делаю не так, пожалуйста, помогите мне.