実現したいこと
progateなどをみながら勉強をしているrails初心者です。勉強用にログイン機能を作りたいのですが、目標で現在(2018年10月29日)のTwitterのようなログイン画面を作ってみたいと思っています。
自分なりに考えたのが、javascriptでページ内にタブ移動できるものを作成して、それぞれのタブにinput要素とbutton要素などの切り替えボタンをつけて
・名前入力
・メールアドレス入力
・パスワード入力
をして最後に送信ボタンを押して登録完了という流れにしたいです。(登録完了後はユーザーページに飛べるようにしたいです)
実際にかなり調べながら組んでみたのですが、躓いてしまったのでここで質問させていただきたいです。
複数あるので、箇条書きで書かせていただきます。
1. input要素に名前を入力した際にrailsのバリデーションで設定した項目に引っかかると、リアルタイムでinput要素の下に赤字で任意のエラーメッセージを出す方法
リアルタイムとは入力した際にバリデーションによって制限されている内容に引っかかる入力をしたらすぐにその場でエラーメッセージを表示させるといった意味です。
かなり調べたのですが、バリデーションによるエラーメッセージをinput要素の下に表示する方法が全くわかりませんでした...
2. タブの切り替えボタン(button要素)をinput要素の入力内容が正しくない間は半透明で押せない状態にして、入力内容が正しければ押せるボタンにしたいです。
現状タブ切り替えはjavascriptで作成していて、button要素の部分はp要素にしています。p要素をbutton要素に変えるとタブ切り替えとして機能せずページ移動の判定になりルーティングエラーが起こってしまいます。
3. ページ内でタブ切り替えをしたいため、切り替えのためのボタンをbutton要素にするとルーティングを設定する必要があると思うのですが、ページ内でボタンを押してjavascriptで設定した次のタブに進むにはどのようにするのか
4. input要素の入力文字数のカウンターの付け方
現状のTwitterのアカウント作成画面では名前の入力欄の下に「0/50」と書いてあり、文字を入力するとそのカウントが文字数に合わせて増加するようになっていたので、仕組みを知りたいです。
それから、Twitterのコードをみてみたら、HTMLの部分で一つの要素にすごい数のクラス名が付いていました。
(例:class="rn-1oszu61 rn-1efd50x rn-14skgim rn-rull8r rn-mm0ijv rn-dcshts rn-9c4l86 rn-18tdi8m rn-1cn4eqa rn-deolkf rn-1xk2f4g rn-6koalj rn-1qe8dj5 rn-1mlwlqe rn-eqz5dr rn-poiln3 rn-7cikom rn-o11vmf rn-ebii48 rn-gul640 rn-109y4c4 rn-t9a87b rn-1mnahxq rn-61z16t rn-p1pxzi rn-11wrixw rn-ifefl9 rn-bcqeeo rn-11yh6sk rn-buy8e9 rn-12ckced rn-17qa1i2 rn-od9mb7 rn-hinvm4 rn-u8s1d rn-92ng3h rn-1lgpqti" <=こんな感じ)
それぞれのクラスには「margin-right: 0;」など簡単な内容しか設定されていなかったのですが、これを一つずつ分ける必要はあるのでしょうか?
それから、一つ一つのクラス名の原型がわからないのですが、どのような定義でそれぞれのクラス名がつけられているのかも気になります...
調べても全くわからなかったので、回答が難しいことは承知しています...一つでも教えていただけると幸いです。
よろしくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/29 06:05
2018/10/29 07:09 編集
2018/10/29 07:08
2018/10/29 08:25