jQuery Validation 没有得到选项答案

【问题标题】：jQuery Validation not getting optionsjQuery Validation 没有得到选项
【发布时间】：2015-07-06 18:58:42
【问题描述】：

我正在尝试自定义表单验证，但没有成功。

当我测试时，消息或自定义错误类都不会触发。尽管如此，它似乎仍然有效，因为它在无效字段之后显示标准错误消息。

我的代码：

HTML

<form role="form" method="POST" id="account-edit">
            <div class="box-body">
                <div class="form-group">
                    <label for="address">Address</label>
                    <input type="text" class="form-control" id="address" name="address" placeholder="Endereço">
                </div>
                <div class="form-group">
                    <label for="telephone">Telephone</label>
                    <input type="text" class="form-control" id="telephone" name="telephone" placeholder="Telefone">
                </div>
                <div class="form-group">
                    <label for="telephone">Contact-email</label>
                    <input type="email" class="form-control" id="email" name="contact_email" placeholder="E-mail">
                </div>
                <div class="form-group">
                    <label for="telephone">Website</label>
                    <input type="text" class="form-control" id="website" name="website" placeholder="Website" >
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-primary">Update Info</button>
            </div>
        </form>

Javascript：

 $('#account-edit').validate({
            errorClass: "has-error",
            rules: {
                email: {
                    email: true
                }
            },
     messages: {
         email: {
             email: 'Please enter a valid email format: name@domain'
         }
     },
            highlight: function(element, errorClass) {
                $(element).closest('.control-group').addClass(errorClass);
            },
            unhighlight: function(element, errorClass) {
                $(element).closest('.control-group').removeClass(errorClass);
            }
        });

CSS：

.has-error input {
    border: 1px solid red;
}

我的代码的 JSFiddle：http://jsfiddle.net/ov8zx694/1/

另外，我设法通过数据属性自定义错误消息。

【问题讨论】：

标签： javascript jquery html css jquery-validate

【解决方案1】：

rules 对象只能使用name 属性来构造。在您的情况下，name 是 contact_email，而不是 email...

rules: {
    contact_email: {
        email: true
    }
},
messages: {
    contact_email: {
        email: 'Please enter a valid email format: name@domain'
    }
},

演示：http://jsfiddle.net/ov8zx694/2/

此外，CSS 不起作用，因为您没有任何包含 control-group 类的标记。

$(element).closest('.control-group').addClass(errorClass);

要么更改标记以使其包含此类，要么将类名更改为您的标记中已经存在的名称...

$(element).closest('.form-group').addClass(errorClass);

演示 2：http://jsfiddle.net/ov8zx694/3/

【讨论】：

谢谢，伙计。使用您提供的信息更新了代码，并像魅力一样工作。