在文本區驗證上更改邊框顏色

需要對textarea的驗證進行自定義錯誤效果。試圖用小腳本來做，它改變了errorClass，也許我做錯了什麼或誤解。在文本區驗證上更改邊框顏色

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

錯誤應該看起來像：http://i.imgur.com/3lnnX8S.png

現在它看起來默認：http://i.imgur.com/U71paPi.png

還有就是我有：JSFiddle

來源

2015-10-05 QuackZilla

你使用了什麼驗證庫？ – vanburen

正如我從您的示例中可以看到的，您正在使用html5驗證。款式那些使用下面的pseudo selector：

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/

來源

2015-10-05 18:35:30 Goowik

Dat只適用於'＃name'和'＃email'。不適用於textarea。 – QuackZilla

抱歉修改了我的答案。我添加了textarea：focus：對選擇器無效 – Goowik

現在，它的工作原理！很好，很容易。我能否以同樣的方式實現'textarea'下的錯誤文本？ – QuackZilla

我想這可能會幫助你。正如我不知道你使用什麼庫，仍然可以用某種方式幫助你。

JS/jQuery代碼

$('.submit').click(function(){ 
    var content = $('textarea').text(); 
    if(content == "") 
    { 
     $('textarea').addClass('redBorder'); 
    } 
    else 
    { 
     $('textarea').removeClass('redBorder'); 
    } 
});

Working:Fiddle

來源

2015-10-05 18:22:52 divy3993

好像還有幾個問題：

你不必在你的CSS定義的.error類 - 這可能是類似於#message.error，並有border: 1px solid red或什麼。
看起來在控制檯中出現錯誤，因爲validates不是一個函數，這意味着你有錯誤的依賴關係，因此請檢查以查看你需要的庫。

來源

2015-10-05 18:24:58

1.明白：http://i.imgur.com/CjkYba6.png也許你只是沒有注意到。 – QuackZilla

如果你想有一個良好的（易用）庫添加聯錯誤消息 - 您可以使用webshim，爲您的工作例如fiddle（不CSS）

JS：

webshim.setOptions('forms', { 
    lazyCustomMessages: true 
}); 

//start polyfilling 
webshim.polyfill('forms');

我使用的內嵌驗證如下所示：

http://afarkas.github.io/webshim/demos/demos/forms.html#UI-replaceValidationUI

來源

2015-10-05 18:31:16 Roko

不錯的選擇。但是，當我輸入'名稱'和'電子郵件'並按提交時，仍然有默認效果：http://i.imgur.com/pkGS0WH.png 當我使'textarea'無效時，它會消失。 – QuackZilla

@QuackZilla啊，我用錯了jsfiddle鏈接 - 我用正確的鏈接更新了答案：https：//jsfiddle.net/42w4w6oL/1/ – Roko

.touch #message:focus { 
box-shadow: none; 
border-color: #383838; 
}

評論此

來源

2015-10-05 19:06:04 Ahamed

在文本區驗證上更改邊框顏色

回答

相關問題