すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
クリーンアーキテクチャで web アプリケーションを作る際に、バリデーションはどのレイヤの責務なのか？と悩むことが多いため、それについての考察を行ってみる。 あと、バリデーションについて書いてたはずがドメインロジックとアプリケーションロジックの違いについても結構言及せざるを得ない感じになったので、そのへんの話もしてみる。 結論から言うと バリデーションはどのレイヤの責務なのか？という問い自体が間違いであり、レイヤごとにそのレイヤの責務となるバリデーションを行うべき、というのが今のところの結論。 バリデーションという単語は意味があまりに広い。「意図していないもの/ことを防ぐ」ことはすべてバリデーションと呼ばれている節がある。そのことにより、バリデーションというのはあたかも唯一つの責務であるかのように錯覚しがちだが、そうではない。クリーンアーキテクチャではレイヤによって責務を分担しているが、同
TypeScriptの型と値とバリデーション
TypeScript は本質的に自分に型が付与されていると思っているだけの JavaScript です。 いくら型を付与しようが、それが実行時に影響を与えることはありません。 コードレビューをしているとここを誤解している人が本当に多いです。何度も解説しているのですが、なかなか浸透しないので、TypeScript におけるバリデーションという視点で記事を書くことにしました。 あと TS でバリデータ使って色々作ろうとしている友人と、プログラミング始めたてで zod と openapi を使っいる友人がいたので、彼らが想定読者です。 型と値の名前空間 TypeScript 上での名前空間(スコープ)は2つに分類できます。 値: 実行時にランタイム上のメモリに存在するもの 型: 静的解析時にのみ参照可能なもの。コンパイル時に完全に消滅する。 TypeScript は基本的に JavaScript
はじめに Go のウェブアプリで使う入力バリデーションに関して、ozzo-validation を検討した。 これまでのバリデーション 普段、仕事では labstack/echo という Go のウェブフレームワークを使う事が多いのだけど、バリデーションに関しては labstack/echo のサンプルに合わせて go-playground/validator を使ってきた。 go-playground/validator は機能も豊富で(一応)痒い所に手は届くのだけど、struct にタグを付けて判定させないといけない。これが実に煩わしい。以前 labstack/echo を使ったサンプルを書いたので、それを見て欲しい。 // Comment is a struct to hold unit of request and response. type Comment struct { I
どうも、 uzimaru です。 最近、react-hook-form と zod を使っていい感じにやっているのでそれについてまとめようと思います。 react-hook-form で zod を使う 公式から利用する方法が提供されています。 https://www.npmjs.com/package/@hookform/resolvers これを useForm の resolver で利用することで zod が使えるようになります。 zod 以外にも Yup, Superstruct, Joi, io-ts などが利用できます import { useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import * as z from "zod"; const
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
フロントエンドとバックエンドの一貫したバリデーションで開発プロセスに調和と効率化をもたらす - Sansan Tech Blog
技術本部 Digitization部の湯村です。 新規アプリケーション開発で採用したバリデーションロジックの管理方法を紹介します。 1. はじめに 2023年末に以下の技術スタックでデータ化アプリケーションの開発をしました。 フロントエンド: TypeScript + Next.js バックエンド: TypeScript + Express Next.js では App Router を採用しましたが、Server Components、Route Handler は利用せず、ブラウザから Express の API を呼び出す構成にしました。 SPA + API で開発する際の課題 この構成で開発をする際の課題の1つにフロントエンドとバックエンドでのコードの重複があります。 特にバリデーションのロジックの管理方法は頭を悩ませた方も多いはずです。 バリデーションに対するアプローチ バリデー
create-validator-tsというTypeScriptの型定義からJSON Schemaを使ったバリデーションコードを生成するツールを書きました。 モチベーション expressなどでAPIを書くときに、Request/Responseが意図したものかどうかをバリデーションする必要があります。 特にreq.queryなどはStringが入ると予想しますが、オブジェクトが入ってくることもあります。 これは、expressの内部で使っているqsというURLクエリのパーサが、オブジェクトや配列へ展開する機能を持っているためです。 expressを使ってるサイトは ?q=text があるときに req.query.q には オブジェクトが入る可能性をちゃんと考慮しないといけない。 ?q[a]=text で req.query.q ; // { a: "text" } になる — azu
こんにちは、バックエンドエンジニアの日下です。 CSV から JSON へ変換するスクリプトを、TypeScript で実装する機会がありました。 今回は、CSV のデータのバリデーションに Zod を使った話をします。 スクリプトの目的 システム間のデータ連携が目的です。 連携元のシステムから CSV 出力されたデータを、連携先のシステムで利用する JSON へ変換します。 また、JSON への変換以外にも以下の要件があります。 CSV のデータをバリデーションする 連携先のシステムで利用できるデータであることを保証するために、バリデーションを実行します。 バリデーション失敗時に、日本語のエラーメッセージを表示する スクリプトの実行は業務担当のエンドユーザーが行うため、日本語のエラーメッセージを表示します。 CSV の読み込み 元データとなる CSV の読み込みは、csv-parse を
業務委託で STORES の開発をしている @inouetakuya です。 先日 STORES のフロントエンドチーム内でクライアントサイドのバリデーションについて見直す機会があり、特にバリデーションエラーのデータ型をどうするかについての議論が興味深かったので、共有させていただきます。 背景 議論の背景について簡単に触れておくと、STORES のクライアントサイドでは、バリデーションのライブラリとしてこれまで joi-browser を使ってきました。 しかしながら、本家の Node.js 版の joi がブラウザ対応したことにより joi-browser が deprecated になったことを受けて、今後も joi を使い続けるかを検討したところ、 joi-browser と joi の最新バージョンとの間で API の差異がいくつかあり、joi-browser から joi への乗
Pythonスキーマバリデーションライブラリ比較 (pydantic, marshmallow, attrs, cerberus) - Attsun blog
Pythonスキーマバリデーションライブラリ比較 (pydantic, marshmallow, attrs, cerberus) ウェブAPIの作成など、外部からやってくるデータを安全に捌く上で、スキーマ定義とバリデーションは非常に重要です。 また、特にPythonのような動的型付け言語において、内部でもレイヤをまたぐ場合はきちんと定義されたデータモデルを利用することで、知らない間にデータモデルが変わっていた、というようなケースを防ぐことができます。 Pythonには標準でスキーマバリデーションライブラリがないため3rdパーティのものを使うことになりますが、様々なライブラリがあるので比較してみました。 比較対象のライブラリ概要※Pythonバージョンは3.9.0を利用します。 lib versionGithub Star (2020/1/5)memo
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
Clean Architectureにおいてバリデーションはどこでやるべきか
Go の入力バリデーションパッケージ ozzo-validation を試した。
react-hook-form と zod でバリデーションのその先へ
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
TypeScriptの型定義からバリデーションコードを生成するツールを書いた
Zod を使って CSV からの入力データをバリデーションする - ドワンゴ教育サービス開発者ブログ
クライアントサイドのバリデーションエラーのデータ型についての考察 - STORES Product Blog