フォームバリデーションを楽にするライブラリを車輪の再発明してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 去年はひたすらAngularJSをやっていましたが、今年はAngular2への乗り換えのためにいろいろと苦労しています。Angular2づくしの1年になりそうです。そして、去年の暮れからbabel教からTypeScript教へと改宗ました。 まだジェネリクスなどをあまり理解していない部分もありますが、TypeScriptの練習がてら、よくあるお問い合わせフォームのバリデーションライブラリを実装してみました。 リポジトリはこちら。 https://github.com/i78s/ValidateJS 対応ブラウザはモダンブラウザ（IEは10以上）、モバイルも対応しているつもりです。（なにか不具合があれば、issueを立ててもらえるとありがたいです） jQueryのバリデーションプラグインなどではデザインによっては仕様が合わず、使いずらいこと
スクロールで何かするための処理まとめ。（JavaScriptおれおれAdvent Calendar 2014 – 21日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 21日目 よくある処理についてまとめました。 スクロールの監視 windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。 $(window ).on('scroll', function(event){ console.log('window'); }); $(document).on('scroll', function(event){ console.log('document'); }); // IE 8では呼ばれない スクロール位置の取得 document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElemen
Examples - jQuery Steps ステップ形式のウィザードが作れる「jQuery Steps」
See how beautiful jQuery Steps is and what you can do with it! HTML <div id="example-basic"> <h3>Keyboard</h3> <section> <p>Try the keyboard navigation by clicking arrow left or right!</p> </section> <h3>Effects</h3> <section> <p>Wonderful transition effects.</p> </section> <h3>Pager</h3> <section> <p>The next and previous buttons help you to navigate through your content.</p> </section> </div> Ja
jQuery Novelist Plugin Demo
maxCharacters:100 Character limit. If the limit is not defined, the plugin will try get the value from the 'data-max-characters' attribute of the HTML element. Otherwise, the limit is set to the default value (100). hardLimit:true If set to true, all characters that go over the limit will be truncated. backgroundImage:'' Can be used to customize the background image. backgroundScale:false Should t
免费国产高清片www.96533.comxxx成年人大片*免费高清.无码区
PRODUCTS 主要致力于冲压、免费国产高清片www.96533.comxxx成年人大片*免费高清.无码区钣金、锻造等各类中高端金属成形装备及自动化装备的研发和制造, 产品广泛服务于国内外汽车、家电、五金、电子、电气等领域。
Ideal Forms 3 - Documentation
Features On the spot validation Fully adaptive (adapts to the container, no css media queries needed) Keyboard support Custom checkboxes, radios and file inputs Custom seamless jQuery UI datepicker Support for third party extensions Localization Major changes since version 2 Ideal Forms 3 is not compatible with version 2. You can still find Ideal Forms 2 under jq-idealforms-old, but support has be
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
UseJquery - Web Design Development Hosting
Thinking to create a website? Of course, to sustain in this fast moving culture, you should have a website on your own.Now having an appealing and informative quality web site becomes a compulsion. Because through the websites, you can broaden your business and your thoughts by interacting with more people. While beginning, you may land … Read more How do you feel if there is an interface for crea
jQueryで要素の表示・非表示を判定する方法
jQueryの要素の表示・非表示を判定する方法を紹介します。 １．基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 ２．css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
Dan Palmer
Complexify - a jQuery Plugin Many websites give an indicator of how secure a password is, and require a minimum standard of security. However this is always poorly implemented with rules such as 'must require a number' even if the password is 30 characters long and clearly very secure. Often the only requirement is a minimum number of characters, a very poor indicator of password strength. Complex
jQuery Credit Card Validator — Pawel Decowski
Try some of these numbers: 4000000000000002 4026000000000002 501800000009 5100000000000008 6011000000000004 How to use it $('#cc_number').validateCreditCard(function(result) { alert('CC type: ' + result.card_type + '\nLength validation: ' + result.length_valid + '\nLuhn validation: + result.luhn_valid'); }); How it works jQuery Credit Card Validator is written in CoffeeScript and (surprise, surpri
GitHub - mailcheck/mailcheck: Reduce misspelled email addresses in your web apps.
mailcheck.js The Javascript library and jQuery plugin that suggests a right domain when your users misspell it in an email address. mailcheck.js is part of the Mailcheck family, and we're always on the lookout for more ports and adaptions. Get in touch! What does it do? When your user types in "user@gmil.con", Mailcheck will suggest "user@gmail.com". Mailcheck will offer up suggestions for second
Eメールの入力間違えを防いでくれるjQueryプラグイン「mailcheck」:phpspot開発日誌
How we decreased sign up confirmation email bounces by 50% - Kicksend Blog Eメールの入力間違えを防いでくれるjQueryプラグイン「mailcheck」。 hotmailがhotnailになっていたり、yahooがyhooになっているのを検出してくれます。 よくありがちな間違いかと思うのでサイトのメール入力欄に入れておくと問題を解消できそう 英語仕様ですが、配列を次のように定義してあげれば対応できそうです。 docomo.ne.jp とか yahoo.co.jp とか自由に入れるだけです 関連エントリ 円形に広がるソーシャルシェアボタン実装jQueryプラグイン「jOrbital」 ページめくりを実現するためのjQueryプラグイン集 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン
ht5ifv - HTML (5) inline form validator
It is an extensible and highly configurable jquery plugin which allows validation of the HTML5's forms while the user is typing It is extensible because it allows the programmer to define new restrictions beyond those already defined by HTML5 It is highly configurable because not only does it allow changes to the validation rules defined by HTML5, but also the addition of new ones. Moreover, altho
jQuery.is*()シリーズを、どれだけご存知ですか。 | Ginpen.com
jQueryを使うと要素を探したりスタイルを変更したりってのが簡単なんですが、それ以外に「地味に便利」な機能がたくさんありますよね。 その中から、変数の中身の種類を判定するメソッドのシリーズを紹介します。 jQuery.is – Search Results – jQuery API ちなみに .is()というものもありますが、今回は関係ありません。 jQuery.isFunction() 関数であればtrueを返します。 個人的には一番頻繁に使います。使いどころとしては、オプションでコールバック関数を受け付ける場面でしょう。与えられたものが本当に関数であれば実行する、変なものが渡されたときは無視する、というように使えます。 JavaScriptの型の扱いはゆるいと良く言われますが、関数じゃないものに括弧()をくっつけても実行できなくてエラーになってしまいますので。 jQuery.isEm
シンプル、軽量でカスタマイズしやすいフォームバリデーションjQueryプラグイン・validate.js
フォームバリデーション系のプラグインは 既に数多く良質なものが揃っているので、 今更、という気もしますが、自分と相性が 良さそうだったので備忘録。軽量でシンプル で、カスタマイズもしやすかったです。 高機能ではなくていいので、こういうのが 欲しいんですよね・・ もちろん、クロスブラウザで動作してくれます。圧縮すれば2KB以下にまで落とせる軽量ライブラリです。 バリデーション用のライブラリです。軽量でクロスブラウザ対応。コードもシンプルでカスタマイズしやすい印象でした。 サンプルです。エラーメッセージは適当なので気にしないで下さい。 Sample コード<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script t
パスワードの強度チェックを簡単に導入できるjQueryプラグイン「jQuery Strong Password」:phpspot開発日誌
パスワードの強度チェックを簡単に導入できるjQueryプラグイン「jQuery Strong Password」 2011年10月03日- jQuery Strong Password Plugin: Power PWChecker | EGrappler パスワードの強度チェックを簡単に導入できるjQueryプラグイン「jQuery Strong Password」 自分で実装しようとすると面倒そうな機能ですが、これを使って比較的簡単に実装できます。 記号などを入れないとStrongにならないように設定されているみたいです 日本サイトへの適用は翻訳のカスタマイズが必要かもしれませんが１から作るよりはるかに楽に導入できそうですね。 各種コールバックの設定も可能なので柔軟に使えそうです 関連エントリ 中身が画像のselectボックスを作るjQueryプラグイン リッチなドロップダウンメニュー
クレジットカード番号をバリデートできるjQueryプラグイン「Smart Validate」:phpspot開発日誌
jQuery Credit Card Format Valiation Plugin: Smart Validate | EGrappler クレジットカード番号をバリデートできるjQueryプラグイン「Smart Validate」。 jQueryプラグインでフロントエンド側でデータのバリデーションが行えます。 あくまでフロントエンド側のチェックなのですが、入力ミスを防げるのは便利そうです エラーの場合はアラートを表示したり独自の処理がイベントハンドラにかけるようになっています コードは次のように書けて超簡単 関連エントリ HTML5動画に字幕が付けられるjQueryプラグイン「Cuepoint.js」 かなりクールなjQueryのメニュープラグインやチュートリアル集 ３つの状態を保持できるフォームエレメント実装jQueryプラグイン「jQuery 3 State Switch」 小さく
パスワード入力欄に必須！キーボードのCAPS LOCKがONかどうかを調べられるjQueryプラグイン:phpspot開発日誌
パスワード入力欄に必須！キーボードのCAPS LOCKがONかどうかを調べられるjQueryプラグイン 2011年07月05日- Caps Lock jQuery Plug-In キーボードのCAPS LOCKがONかどうかを調べられるjQueryプラグイン パスワードの入力の際なんかにCAPS LOCKがONになっていると正しいパスワードを入れたつもりがちゃんとはいってないなんていうことも結構ありますね。 そのような問題を解決するのがこのプラグインです。jQueryでその状態をチェックし、アラート等を表示することが出来ます 例えば次のように設定すれば、input type="password" の場合でCAPS LOCKがONの場合にalertをあげられます。 デモページはこちら 関連エントリ 独自デザインselectボックス実装時に使えそうなjQueryプラグイン「EasySelect
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-idealforms-2.html