为什么JQuery validate.js无法与Spring Form一起使用？

Question

我正在尝试使用弹簧形式的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);
                }
            });
}

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

我在这里做错了，请帮助我。