LoginSignup
4

More than 5 years have passed since last update.

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

Posted at

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4