[JS]フォームのエラー判定を行い、アドバイスを表示するスクリプト -Ketchup

カスタマイズ性に優れた、フォームのエラー箇所にツールチップをふわりとアニメーションで表示するスクリプトを紹介します。

デモのキャプチャ

Ketchup

Ketchupは既存のフォームにも簡単に導入が可能で、マークアップの変更やツールチップのデザイン変更も簡単に行えます。

また、エラー判定も多彩な項目で設定が可能です。

  • 入力の有無
  • 最大・最小文字数
  • 最大・最小数値
  • メールアドレスのチェック
  • urlのチェック
  • 日付のチェック
  • ユーザーネーム(a-z0-9_-)のチェック
  • など

これらの判定は組み合わせて使用することも可能です。

設置方法は、スクリプトとスタイルシートを外部ファイルとして記述し、各フィールドに下記のように追加します。

HTML(変更前)

HTML(変更後)

入力の有無とユーザーネームの妥当性をチェック

sponsors

top of page

©2018 coliss