jQuery UI のダイアログで jQuery Validation を使う方法

公開日: : ASP.NET, JavaScript, jQuery

リアルタイムフォームバリデーションが行えるjQuery Validationを使ってみました。
発生した問題を中心に最後にはASP.NETで工夫した全ソースコード公開です。

 

jQuery Validationはformへ

ダイアログをdivタグで構成していて、divタグに対して「$(‘#dialog’).validate()」のようにvalidateを指定しても動いてくれません。下記のエラーにさんざん悩まされました。validateはformタグへ行う必要があります。

 

ダイアログ内をformタグで囲みます。

 

formタグにvalidateを設定します。

 

validメソッドでチェックすることができます。
問題がなければtrueが返ります。

 

jQuery Validationのデモ

Openボタンからダイアログを開いて、Sendボタンで動作を確認できます。

[CodePen height=300 show=result href=BAdIq user=iw3 ]

 

ASP.NET WebフォームでのjQuery Validation

ASP.NETはASPXファイル内にformは1つだけという制約があって、ダイアログ内にformタグを記述しても消えてしまいます。そこでダイアログ内にformは記述せず、jQueryのwrapInner関数を使って動的に囲うことにしました。

こうすることでASP.NETでも複数のダイアログにvalidationを設定できます。

 

ASPXでjQuery Validationを使ったソースコード

 

利用したCDN

http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.1.min.js

http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js

http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/redmond/jquery-ui.css

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/localization/messages_ja.js

※ 最新のURLは Microsoft Ajax Content Delivery Network で確認できます。

 

参考情報

http://stacktrace.jp/jquery/ui/widgets/dialog.html

http://jqueryvalidation.org/

https://github.com/jzaefferer/jquery-validation

 

ad

関連記事

8937324062_e417d7866f_o

台湾の女子学生制服マップの写真を並べてみた

ロケットニュース24で絶賛されている台湾の女子学生の写真をjQuery Masonryプラグインを使

記事を読む

pics 006

JavaScriptからASP.NETのWebMethod(PageMethod)を呼び出す方法

ジェネリックハンドラー(.ashx)やWCFサービス(.svc)を試してみましたが、PageMeth

記事を読む

By: Rose Braverman

Site.Master(マスターページ)を動的に変更する方法

ある特定のページのときだけhead内にlinkタグを追加したいと思い調べました。 この方法ならマス

記事を読む

By: Bex Walton

閏年(うるうどし)を調べる関数

Wikipediaの情報を参考に閏年を判定する関数を作成してみました。   仕様 西

記事を読む

By: Julien Potron

ASP.NETでのCDN利用とフォールバック対応

ASP.NETでCDN(Content Delivery Network)を利用する方法です。

記事を読む

By: Chris Lott

FullCalendarにGoogleカレンダーを読み込む方法

FullCalendarにGoogleカレンダーのイベントを読み込んでみました。   g

記事を読む

Business Calendar & Schedule

FullCalendarの日本語化やオプションいろいろ

Google Calendarライクなカレンダーと噂のFullCalendarの使い勝手が知りたくて

記事を読む

By: USAG- Humphreys

JavaScriptライブラリーのCDN利用、フォールバック対応しました

かぶめもで使用しているJavaScriptライブラリーのCDN利用、フォールバック対応を行いました。

記事を読む

By: Gabriela Pinto

WebRTCのgetUserMediaでビデオ出力する方法

チャットワークのビデオ会議機能で使われている技術ということで調べてみました。 WebRTC(Web

記事を読む

ad

ad

By: cea +
24時を超えた時刻を入力できるテキストフィールドを作ってみた

時刻を入力するためのフィールドをVaadinのTextFieldを継承

By: GotCredit
Vaadin+Spring Bootでログイン画面を作成

Spring BootをベースにVaadinでログイン画面を作ってみま

lombok cant find ide
Spring Tool SuiteへLombokをインストールする方法

下記のURLから"lombok.jar"をダウンロードします。 ht

Spring Tool Suite
Spring Tool Suiteのインストールと日本語化

 Spring Tool Suiteのインストール 下記のURLから

spotlight -> terminal
ターミナルの起動方法

Spotlightから起動する "control"キーを押しな

→もっと見る

PAGE TOP ↑