jQuery validate - 在文本字段中显示错误消息

Question

我正在为我的客户端构建一个简单的表单,他们希望在文本字段中显示错误消息.使用jQuery的Validation插件可以实现这一目标吗？

谢谢!

Answer 1

引用OP:

"他们想在文本字段中显示错误消息.使用jQuery的Validation插件可以实现这一点吗？"

是.可以 使用插件的errorPlacement回调函数/选项.

不,我永远不会这样做. 这使得用户几乎不可能正确地与表单交互.该错误消除了用户已输入的任何数据,并且用户必须删除消息文本以输入其数据.我相信你可以想出克服这些问题的聪明方法,但IMO,从UI的角度来看,这是一个非常糟糕的设计.向您的客户展示此演示,然后向下滚动并向他们展示我的第二个演示.

演示:http: //jsfiddle.net/6fUTV/

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // rules & options,
        errorPlacement: function(error, element) {
            element.val(error.text());
        }
    });

});

编辑:相反,你可以使用该placeholder属性.该消息仍然在输入元素内部,但它不会被视为一个消息,value因此它不会干扰用户交互. 然而,大的缺点,以这种方式是,如果你有一个规则来验证数据格式,如email,minlength等...该用户将再也看不到验证消息,因为没有对占位符的顶部坐在里面的字段的值!

errorPlacement: function(error, element) {
    element.attr("placeholder", error.text());
}

演示2:http: //jsfiddle.net/n5saemj7/

备择方案:

使用消息气泡显示错误:http: //jsfiddle.net/kyK4G/

更多信息: 如何在Tooltipster工具提示中显示来自jQuery Validate插件的消息？

Answer 2

他们告诉你这是一个糟糕的方法,也许是.

但是你可以使用占位符,而不是替换已经存在的内容,只需更改:

errorPlacement: function(error, element) {
    element.val(error.text());
}

为了这:

errorPlacement: function(error, element) {
    element.attr("placeholder",error.text());
}

希望对你有所帮助,保重!