javascript - 更改文本区域验证的边框颜色

Question

需要对 textarea 的验证进行自定义错误效果。尝试使用更改 errorClass 的小脚本来完成，也许我做错了什么或被误解了。

$('#message').validate({ errorClass:'error'});

错误应该是这样的:http://i.imgur.com/3lnnX8S.png

现在它看起来是默认值:http://i.imgur.com/U71paPi.png

我有:JSFiddle

Answer 1

从您的示例中可以看出，您使用的是 html5 验证。要设置这些样式，请使用以下伪选择器:

input:focus:invalid, textarea:focus:invalid{
    border-color: red !important;
    -webkit-box-shadow: inset 0 1px 1px red;
    box-shadow: inset 0 1px 1px red;
}

:focus 当您只想在用户输入时进行验证时是必需的。

在此处查看更新后的示例:https://jsfiddle.net/2436ey01/

要添加自定义消息，您可以使用 javascript 自定义内置验证:

var message = document.querySelector('textarea#message');

message.oninvalid = function(e) {
    e.target.setCustomValidity("");
    if (!e.target.validity.valid) {
        e.target.setCustomValidity("You shall not pass!");
    }
};

这里有一个例子:https://jsfiddle.net/z73gtr6s/