FormikでReactのformを簡単に扱おう！ - Qiita
はじめに この記事はPOL AdventCalenderの8日目の記事です。 こんにちは！株式会社POLでフロントエンドエンジニアをしております、橋本ことブリボンと申します！ 弊社では、フロントエンドはReactを用いて開発をしております。 みなさんは、Reactでformを作る際、どのように実装しますか？ ライブラリーを使わずに実装する、Formikを使う、redux-formを使うなどなど…… 弊社では、Formikを使ってformの実装しております。 また、formのバリデーションを実装するために、 Yup というライブラリーを使っているのですが、Formikの説明だけに注力したいため、詳細な説明は致しません。 別の記事で、Yupを使ったformのバリデーションの解説をしようと思っております。 Formikとは何か？ Formikとは、 Reactでformをより簡単で簡潔に実装でき
Formikが使いたい！ - Qiita
React.jsのバリデーションライブラリ「Formik」がかなり人気を博しているようなので、早速勉強することにしました！ 今回参考にさせて頂いた動画＆記事はこちらです♫ Youtbe: Better React Forms with Formik 2020/02/26 追記 Formikの別記事を書きました。 → Formikを導入する 何もライブラリを使用しなかったときのコード シンプルですが記事タイトルと本文に入力文字数に関するバリデーションを設けたフォームを作成してみました。 ▼ 出来上がり ▼ ソースコード 元になるソースコードも載せます。 あえて、かなり冗長的に作ってます。 import React, { Component } from 'react' class Form extends Component { constructor(props) { super(prop
Angular2のFormについて（その１） - Qiita
概要 Angular2とionic2でformを使った際に，バリデーションが少し面倒だったので，Angular2のformについて調べてみました．この記事は The Ultimate Guide to Forms in Angular2 を元にしています．元の記事は少々長いため，以下のように二部に分けて記事にします．うまく訳せていないところもあるので，元の記事はご自身で確認いただければと思います． なおionic2に関しては第２部の最後に，フォームのサンプルを書いてみたいと思います． 第１部 FormControl FormGroup FormBuilder バリデーション 第２部 カスタムバリデーション 変更をWatchする ngModelによる双方向データバインディング ionic2に組み込んでみる 第１部ではAngular2が用意するツールを用いてバリデーションを実装するまでを見てい
Laravelでの各Form要素でのValidationやエラー制御（のメモ） - Qiita
Laravelにかぎらず、いろいろなフレームワークにForm処理に関する便利機能がありますが、input textではうまく動くものでも、checkboxやfile処理とかだと結局使えず、むしろイライラすることありますね。。。 ここではいざというときに困らないようにFormの主要要素とLaravelのバリデーション、さらにはBootstrapとの組み合わせをまとめておきたいと思います。本当は、各バーツ毎にテストしたいのですが、とりあえずここでは全体をメモ。 やりたいこと Laravel + Bootstrapを利用してFormデータのエラー処理パターンをまとめておきたい。 細かく書くと、 正常時の値の受け取り(checkboxとか選択しないとそもそもnullのやつの扱いとかチェック）。 エラーの検知（Validation）。 エラー時の表示の整理（エラーメッセージの受け取り方、表示やスタイ
Laravel5 Bladeで簡単なForm - Qiita
<!doctype> <html> <head> <meta charset="utf-8"> <title> @yield('title') </title> </head> <body> @yield('body') </body> </html> Lavaral5からはHtmlファサードとか標準で読み込まれないので、使わないことにする（Helperとかほとんどメリットないので）。 ポイントは、普通のフォームでもname='_token'でcsrf_token()を送るところ。 ここでは、/public/res/というURLにpostする。 resources/views/input.blade.php @extends('master') @section('title') input @stop @section('body') <form action="res" method=
Bootstrap の File input の見た目を Cool にする - Qiita
概要 Bootstrap を使うと見た目がかなりキレイになりますが、まだまだイケてない部分があります。 例えば、Forms の File input。 汚い！！！せっかくその他のボタン等は綺麗なのに、もったいないですね。 そこで、少しでも見た目が Cool になるように改善したい思います。 今回は Bootstrap File Input というライブラリを導入してみました。 そして、このライブラリを利用して、実際に CSV ファイルをアップロードするための form を作ってみたいと思います。 お断り 本当は Bootstrap File Input を使うと、 例えば画像ファイルを選択した際にとても Cool なプレビューが表示されたりするのですが、 今回は CSV ファイルをアップロードするという用途に限定したいと思います。 気になる方は公式の デモ をご覧ください。 Bootstr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
