Posted at

初回button押下後からvalidationをして見た目を変える。

More than 5 years have passed since last update.

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になる。