Help us understand the problem. What is going on with this article?

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

goy
m3career
医療従事者及び医療機関向けのHRサービスを展開
https://career.m3career.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away