JSON Schema をクックパッドマートの商品登録画面に導入した話 - クックパッド開発者ブログ
主にバックエンドのエンジニアとしてクックパッドマートの開発に携わっている塩出（ @solt9029 ）です。 美味しい食材をユーザにお届けするサービスであるクックパッドマートでは、日々街の販売店や地域の生産者が商品の登録を行っています。 商品を登録する際、販売者は消費期限をはじめとする様々な品質保証の情報を正確に入力する必要があります。 しかし、商品の種類や状態に応じて記載するべき品質保証の情報は異なるため、全項目が羅列されるフォームでは正確な入力が困難であり、販売者および商品の審査を行う社内の運用メンバに対して大きな負担をかけていました。 そこで、 JSON Schema を利用して複雑なフォームの出し分けを自動で制御し、またバックエンド側でのバリデーションも行うことが出来る仕組みを導入しました。 その結果、商品の種類や状態を選択するだけで、適切な品質保証の情報が自動的に入力され、必要な
便利なのが登場！フォームのバリデーションをシンプルな記述で実装できる超軽量JavaScriptライブラリ -v8n | コリス
Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8nのドキュメント v8nの使い方 v8nの特徴 v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。 流暢でチェーン化可能なAPI チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。 有用な標準検証ルール フォームの検証でよく使用される30個以上のルールが用意されています。 カスタマイズ性 フォームの検証用ルールは、簡単にカスタマイズできます。 非同期検証をサポート バックエンドでの検証のように時間のかかるル
転職会議の会員情報ページをReact化しました - LIVESENSE ENGINEER BLOG
はじめまして。16卒で入社したエンジニアの渡部です。 現在は転職会議のプロダクト開発グループに所属していて、最近は会員情報ページのフロントエンド開発を行っています。 今回はReact化にあたって直面した問題、それを解決するために採用・参考にした技術を幾つか紹介したいと思います。 コード例はTypeScriptで書いています。 目次 型を欲する声の高まり(TypeScript) action層の肥大化(redux-observable) formのvalidation(Computing Derived Data(reselect)) viewをシンプルに保つ(High Order Components) 型を欲する声の高まり(TypeScript) react-reduxで実装していると関数から関数へと値を引き回すので、型をつけて安心して実装したいという声がチーム内で高まってきました。 そ
Vue.jsを使ってて、フロントサイドのバリデーションには VeeValidate が便利 - Qiita
先日、フロントサイドのバリデーションにはvalidatorjsが便利という記事を拝見し、現在作っているシステムで使ってみようとしたのですが、挫折しました。 理由としては、複雑なフロントを作ろうとしているためで、下記の要件を満たす必要がありました。 1:n のデータで、ユーザーが追加できる要素がある (例: 複数メールアドレス登録) ページローティング直後はバリデーションしない ユーザーがインプット開始時に、 入力中の要素のみ バリデーション フォームを送信する直前に 全ての要素 に対してバリデーション エラーのある要素は赤くする エラーのある 要素の直後 に、 「メールアドレスは必須項目です。」などというメッセージを表示 バリデーションのルールは一箇所にまとめたい。入力中と送信時でほぼ使いまわしたい。 そこで見つけたのが VeeValidate です。 素晴らしかったので使い方を書いておき
フロントサイドのバリデーションにはvalidatorjsが便利 - Qiita
Webフォームのバリデーションをするのって面倒ですよね。どうせサーバサイドでバリデーションするのに…。 といいつつも、利用者を苛つかせないためにも、無駄な通信を減らすためにもフロントサイドのバリデーションは重要です。 何か良いライブラリが無いかなと思ってgithubを漁っていたら、良さげなライブラリを見つけました。 validatorjs "A data validation library in JavaScript for the browser and Node.js, inspired by Laravel's Validator."とあるとおり、LaravelのValidatorに似た感じになっているのが特徴です。 Laravelといえば、JSはreact.jsではなくてvue.jsだろうということで、Vueのコンポーネントでのサンプルです。(CSSはBootstrap) もちろ
Capture form validation back from the browser - Hyperform - Capture form validation back from the browser
Capture form validation back from the browser Hyperform is a complete implementation of the HTML 5 form validation API in Javascript. It replaces or polyfills the browser’s native methods and eases your validation task with custom events and hooks. Hyperform is neatly packed in a single Javascript file, weights only 36kB (10.3kB gzipped!) and includes: a full, working and compliant implementation
地味に書きためていくWeb開発セキュリティのキホン - f-shin (@fshin2000) の日記
XSS対策 インターネットから送られてくる入力値は絶対に信用しない。（post /get に留まらず、URLそのもの、Headerの中身や、画像のexif情報なども！） 情報を出力する時のescapeは、文脈にあわせて変える。htmlに出す場合とJavaScriptに出す場合、CSVに出す場合、JSONに出す場合でescapeの方法が変わる！ echoする時は、基本全部にescape。コントローラ側の文脈に依存する「この変数にそもそもescapeは必要か？否か？」に任せると、後で技術的負債化する！ そうではなく「ここの出力方法が適切か？」を一目でチェックできるようにすると簡単にチェックできる。あとから数千個、数万個をチェックする人の身になってコードを書く。 外部からの引数で、処理を分岐する場合は、必ず値を比較して想定する文字に一致した時のみ処理するように書く。 絶対に、そのままの値を引き回
AngularJSのバリデーションにハマった件をまとめてみた。その１ | DevelopersIO
はじめに 好物はインフラとフロントエンドのかじわらゆたかです。 今回の案件ではAngularJSのFormのバリデーションを用いました。 チェックの条件をView側に埋め込むことができ、 また、ngMessage ディレクティブを用いることで、エラーメッセージの表示まで行うことができます。 非常に便利な機能ではあるのですが、２点ほどハマった点があったので紹介します。 Modelにバインディングされていない 冷静に考えればそのとおりなのですが、バリデーションでエラーとなった値はModelにはバインディングされません。 これを意識しておかないとパスワードとパスワード（再入力）の同値評価をバリデーションで行おうとした際に、 ちょっと困ったことになります。 現象説明 Validation Form Check Sample 上記はパスワードとパスワード確認用を入力するフォームです。 両方のフォーム
PHPに無いセキュリティ機能 – PHPカンファレンス関西2015
(Last Updated On: 2018年8月13日)PHPカンファレンス関西に参加してきました。私のセッションの資料をPDFまたはSlideshareで見れるようにしました。 PHPにないセキュリティ機能（PDF） ここに書いたPHPに無い機能ですが、他の言語／フレームワークでも無い物の多いです。PHPに限った話しではありません。言語／ライブラリに潜む脆弱性もPHPに限った話しではありません。他の言語やPHP＋フレームワークで利用されている方も十分注意してください。 このスライドを見れば何故私が「出力のセキュリティ対策としてエスケープ（エンコード）を第一に考えるべき」と解説しているのか解ると思います。 「入力をセキュリティ対策としてバリデーションしない」「出力のエスケープをセキュリティ対策として考えない」これらは攻撃者と一部のセキュリティ業者を喜ばせるだけで、開発者とシステムの利用者
AngularJSの強力なフォームバリデーションを活用しよう
連載企画「AngularJS徹底解説」の第2回目は、Angularが備えている強力なフォームバリデーションについて解説します。 AngularJS の強力なフォームバリデーション ご存知の通り、HTML5の仕様にもフォームバリデーションがあり、主要なモダンブラウザであれば既に実装されています。しかし、ブラウザに実装されたバリデーション機能は、まだ実践で使うには使い勝手がよいものとは言えません。もうしばらくは、プラグインやライブラリに頼ったり、または、自身で実装していく必要がありそうです。 今回からデモページを用意してみました。実際に動作していることを確認できます。レイアウト調整をしているため、本稿で掲載するサンプルコードとは多少異なること、ご了承ください。 各input要素のバリデーション まず、Angularでのバリデーションは、双方向バインディングの特性を活かして、入力と同時にチェック
is.jsというマイクロチェックライブラリのコードを読んだのでメモ - axross blog
2015-03-17 is.jsというマイクロチェックライブラリのコードを読んだのでメモ JavaScript Node.js npm is.js is.jsは、値の中身や型を様々な条件でチェックするマイクロチェックライブラリ。 Node.jsでもブラウザでも動作し、最近よく使うであろうユーザーエージェントのチェックだとかにも対応している。 is.js - micro check library コードを読みつつ機能を舐めたので、そのメモ。 共通 is.jsの関数には、interfaceという機能がある。 is.string('abc'); // => true // 反転 is.not.string('abc'); // => false // すべてが... is.all.string('abc', 123, 'fgh'); // => false // いずれかが... is.any
PHPで各種バリデーション - Qiita
$a = filter_input(INPUT_GET, 'a'); // "foo" $b = filter_input(INPUT_GET, 'b'); // false $c = filter_input(INPUT_GET, 'c'); // null $a = (string)filter_input(INPUT_GET, 'a'); // "foo" $b = (string)filter_input(INPUT_GET, 'b'); // "" $c = (string)filter_input(INPUT_GET, 'c'); // "" /* 1. 未定義や想定外の型の検出 */ $email = (string)filter_input(INPUT_POST, 'email'); /* 2. 値の形式に関するバリデーション */ if (false !== filter
フォームの入力必須項目のマークアップ | Accessible & Usable
公開日 : 2013年4月12日 (2020年8月30日 更新) カテゴリー : ユーザビリティ / アクセシビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 <label for="name">お名前 (必須)</label> <input type="text" id="name" name="name" /> 上記のように、<label> 要素の中に「必須」と書かれていれば、たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素 (<input> 要素、<textarea> 要素、<select> 要素) にフォーカスが当たるとその入力要素に紐づいたラベルが音声で読み上げられ、ラベルに包含された「必須」
Parsley - The ultimate JavaScript form validation library
Parsley, the ultimate JavaScript form validation library Validating forms frontend have never been so powerful and easy. Get started today v2.9.2 Intuitive DOM API Like no other form validation library, simply write in English your requirements inside your form HTML tags, Parsley will do the rest! No need to write even a single JavaScript line for simple form validation. View example » Dynamic for
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで ｜https://wp.yat-net.com/name
2011年 07月 11日 HTML5、CSS3に関する情報まとめ。リファレンス情報、辞典サイト、CSSジェネレーター、Validatorなど知識～活用まで カテゴリ： CSS3 HTML HTMLとCSS タグ：CodingCSS3ジェネレーター作成支援ツール 現状HTML5とCSS3を利用したサイトの構築は自分の仕事上では出てきそうにないのですが、そうは言っても何も情報を収集しないわけにも行かないのでブックマークは当然しています。しかし、ただ単に貯めてるだけだといざという時活用出来ないので、一度ブログに書き留めておこうと思います。 html5 現状深く調べておらずリファレンスやタグ辞典的なものを収集しています。最近友人のクロ（@CROO1379）が色々情報を収集してサイトを構築しており、リファレンス的な意味ではかなり拾えそうな感じになっています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
電話番号を扱う技術
フロントエンド・バリデーション
Smoke
ウェブアプリのセキュリティをちゃんと知ろう
