バリデーションの実装
参加したテーマ
- フォームバリデーション機能を実装しよう
- 参加日時: 2020.05.26
作品情報
- リポジトリ: https://github.com/Fielsyuka/form-validation
- 提出日: 2020.05.29
- 開発期間: 3日間
コメント
プラグインを使わずにバリデーションを実装したのは初めてでした。
正規表現を使用してバリデーションの種類を増やしたり、
テキストフィールドに入力したらエラーが消える処理を追加するなど
より実践的な機能を実装してみたいと思いました。
Netlifyで公開したので、今後も自身で開発を進めていきたいです。
今回実装できなかったところ
デプロイでNetlifyを試してみたらとても簡単で、
gitと連動して自動的にアップデートしてくれる点が便利で驚きました。
レンタルサーバー以外の手段を習得出来ました。
使用した技術
フロントエンド
- HTML
- CSS
- JavaScript
- jQuery
バックエンド
インフラ
- Netlify
データベース
開発ログ
「フォームバリデーション機能を実装しよう」に参加。開発をスタート!
「要件を確認しよう」を完了しました!
「技術選定をしよう」を完了しました!
「ワイヤーフレームを書こう」を完了しました!
「設計しよう」を完了しました!
「リポジトリを作ろう」を完了しました!
「提出期限を決めよう」を完了しました!
- 要件の確認
- Sketchでワイヤーフレームを作成
- Githubでリポジトリを作成
- 提出期限を2020年6月2日に設定
要件=「そのシステムに必要な機能」
これを前もって明確にしておくのはとても大切なこと。
ワイヤーフレームは簡単な内容で作成しました。
明日から実装に入ります。
「入力されていない項目がある場合はエラーを表示する機能」を完了しました!
5/28までにやったこと
- HTML、SCSSのコーディング
- 送信ボタンクリック時のバリデーション実装
送信ボタンクリックでバリデーションを実行するようにしましたが、このままではsubmitが実行されてしまうので修正が必要だと気付きました。
「「プライバシーポリシーに同意する」にチェックが入っていなければ「送信」ボタンが押せない機能」を完了しました!
- プライバシーポリシーに同意にチェックが入れば送信ボタンを表示する
- 内容が全て入力された場合のみsubmitするよう修正
フォーム周りのタグやの書き方や属性の書き換えなどを忘れていたので復習になりました。
jsの書き方はいつも悩みます...
「実装しよう」を完了しました!
「デプロイしよう」を完了しました!
「動作をテストしよう」を完了しました!
「作品を提出しよう」を完了しました!