2016-09-17

「onclick="submit();"」をinputに指定すると必須入力を無視する

はじめに

以前に書いた記事で、フォーム部品のinputの属性に「onclick="submit();"」を指定することで、複数の入力フォームがある場合の入力途中でEnterキーを押してしまうと、それ以後に空欄などがあっても情報が送信されてしまう事を防ぐことが出来るという事を書きました。ですが、その方法にも一つ欠点があったので書いておきたいと思います。

「onclick="submit();"」の欠点

その欠点とは、この属性を指定することによって、必須入力を無視してしまうようになるという点です。inputには、必須入力にする際に「required」という属性を付与しますが、これを入力すると空欄に対して警告文が表示されるようになります(こちらの記事を参照)。しかし、「onclick="submit();"」を指定すると、入力を促す警告文が表示されず、本来空欄であるべきではない項目を空欄のまま送信できてしまいます。

一番良い方法の考察

「onclick="submit();"」を指定した場合、フォームの入力数が多い場合、うっかり見落としによる空欄の誤送信が、指定しない場合、Enter誤入力による誤送信が発生する恐れがあります。そうなると、現状各フォーム部品に「required」を指定して必須入力にし、Enterによる誤送信を防ぎつつ、見落としがあっても警告文が表示される、という状態がベストなように思います。しかし、これにも憂慮すべき点があり、リスト形式の入力の場合で、あらかじめ入力が予想される値に初期値が設定されていた場合は、入力者が意図しなかった値の誤送信が起こりうると考えています。選択してください、などの先頭のナビゲーションに初期値が指定されていればよいのですが、5段階評価を付けてもらう場合に、初期値を3にしておく場合などあると思いますし、4をつけたかったのにEnterを押したら3で入ってしまった、なんて事も起こりうるかもしれません。

ごちゃごちゃ書きましたが、現状では、「required」指定にして、リスト類はフォーム上部にまとめてしまうというのが最良に思います。リストより下に必須入力項目があれば、そこを入力するまではうっかりEnterでの想定外評価の送信は防げるし、要はフォームの末端に必須入力項目を設けておけばよいように思います。

さいごに

この点については、あんまり調べて書いていないので、もっと良い方法があるとは思います。ユーザーに正しい入力情報を求めるのも、色々な可能性を考慮しなければなりませんね。



コメントする(※は必須項目です)













画像認証