css擬似セレクタ :valid, :invalid でみためをかえると、フォーム表示直後からinputが赤かったりしてわただたしい感じがするので、初回submitボタンを押すまでは見た目を変えず、初回submit後からvalidationにより見た目の変更を開始したい。そしてもちろんメッセージは独自のものにしたい。
こんなかんじで、inpuタグにoninvalidで
hoge.coffee.js
$("input").bind 'invalid', (e)->
e.target.setCustomValidity( $(this).data("validation-message") )
$(e.target).addClass("with_validation")
hoge.css.scss
input.with_validation:valid{
background-color: #ddffdd;
}
input.with_validation:invalid{
background-color: #ffdddd;
border: red 1px solid;
}
とすると、できる。
ただsetCustomeValidity()で設定すると、inputに何をいれてもvalidにならないので、いったん解除しなければいけない。
解除するとvalidにはなるが、エラーメッセージもデフォルトのもになる。それはかっこ悪い。
なので
hoge.coffee.js
$("input").bind 'input', (e)->
return unless $(e.target).hasClass("with_validation")
e.target.setCustomValidity("")
unless e.target.validity.valid
e.target.setCustomValidity( $(this).data("validation-message") )
$(e.target).addClass("with_validation")
を追加。
オリジナルのメッセージのまま、中身が正しくなるとちゃんとvalidになる。