使用 jQuery Validate 不显示错误消息

Question

我有以下 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 个字符

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

如果有帮助，我会将这个表单放在 jQuery UI 对话框中，但我认为这并不重要。

有什么想法吗？

Answer 1

要验证 html 表单，最简单的方法是结合两个强大的开源框架 twitter bootstrap（以获得漂亮的表单）和 jquery.validate.js 插件（用于验证）。

引导框架：http://getbootstrap.com/getting-started/。

Jquery 验证插件：http://jqueryvalidation.org/

所以你的html代码和你的脚本可能看起来像这样

HTML 代码： 先加这个链接

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

然后

<form  method="post" action="/User/AddExperience" id="add-experience-form" class="form-horizontal">
    <fieldset>

        <h4 class="text-primary">fields required * </h4>

       <div class="form-group">
          <div class="control-group">
            <label class="control-label col-xs-3" for="experienceTitle">Experience Title<span class="req">*</span></label> 
            <div class="col-xs-9">
              <input type="text" class="form-control" id="eventTitle" name="eventTitle">
              <span class="help-block"></span>
           </div>
         </div>
       </div>

 <div class="form-group">
        <div class="col-xs-offset-3 col-xs-9">
                   <div class="form-actions">
                <input type="submit" class="btn btn-primary" name="newsubmit" id="newsubmit" value="Submit">
                <input type="reset" class="btn btn-default" value="Reset">
                   </div>
           </div>
        </div>
    </fieldset>


</form>

Jquery 脚本：将其放入一个名为 validate.js 的 js 文件中

$(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

});

您可以将所有这些脚本放在一个名为 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>

更多细节可以参考文档http://jqueryvalidation.org/documentation/