使用jQuery验证不会显示错误消息

我有以下jQuery脚本

function updateItem(form) {
    var validator = $("#add-experience-form").validate({
        debug: true,
        rules: {
            eventTitle: {
                required: true
            }
        },
        messages: {
            eventTitle: {
                required: "Please, enter a title."
            }
        }
    });

    if (!validator.valid()) {
        return;
    }

}

以下是HTML：

<form action="/User/AddExperience" id="add-experience-form" method="post" novalidate="novalidate">                    
    <p>
        <label>Experience Title<span class="required">*</span></label>                    
        <input id="eventTitle" name="eventTitle" required="required" style="width: 350px;" type="text" value="">
        <span class="field-validation-valid" data-valmsg-for="eventTitle" data-valmsg-replace="true"></span>
        <br>                 
        <label>&nbsp;</label><span class="tip">50 character maximum</span>                          
    </p>

经验职称*


最多50个字符

{ 经验头衔
@*@ 最多50个字符

由于某些原因，即使validator.valid（）的计算结果为false，上述表单也不会显示错误消息

如果有帮助的话，我会把这个表单放在jQueryUI对话框中，但我认为这并不重要

---

有什么想法吗？

要验证html表单，最简单的方法是将两个开源的强大框架twitter bootstrap（为了获得好的表单）和jquery.validate.js插件（为了验证）结合起来

引导框架：

Jquery验证插件：

因此，您的html代码和脚本可能如下所示

Html代码： 首先添加此链接

<link href="bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">

}))

您可以将所有这些脚本放在一个名为js的文件夹中，然后将它们添加到代码中

<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/validate.js"></script>

有关更多详细信息，请参阅文档

$(document).ready(function(){

jQuery.validator.addMethod("lettersonly", function(value, element) {
    return this.optional(element) || /^[a-z]+$/i.test(value);
});     

$('#add-experience-form').validate({
    rules: {
        eventTitle: {
            minlength: 2,
            lettersonly:true,
            required: true
        }
    },

    messages: {

        eventTitle: {
            required:"blablabla",
            minlenght:"blablabla",
            maxlenght:"50 character maximum",
            lettersonly: "Letters only please"
        }
    },


    highlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('success').addClass('error');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).closest('.control-group').removeClass('error').addClass('success');
    },
    success: function (label) {
        $(label).closest('form').find('.valid').removeClass("invalid");
    },
    errorPlacement: function (error, element) {
        element.closest('.control-group').find('.help-block').html(error.text());
    }
}).cancelSubmit=true; // to block the submit of this plugin and call submit to php file

<script src="//code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/validate.js"></script>