QUnit,PHP,Netbeans,lubuntu-14.04,VirtualBox
(ﾟωﾟ) の続き。
(ﾟωﾟ) 今回は、exValidationを動かしてみる予定だったが、
(ﾟωﾟ) jQueryのフォームの入力チェックを調べてみようと思う。
(ﾟωﾟ) いろいろな組織からアプリをかき集めるよりも、jQuery一本に絞れば不具合も出ないだろう。
(ﾟωﾟ) という思惑。
http://plugins.jquery.com/?s=validation
http://plugins.jquery.com/validation/
jQuery Validation
Form validation made easy. Validate a simple comment form with inline rules, or a complex signup form with powerful remote checks.
(ﾟωﾟ)「Read the Docs」に最新ソースを置いている。
http://jqueryvalidation.org/
(ﾟωﾟ) ホームページのzipと、GitHubのzip、入ってる内容は同じなのか比較してみた。
(ﾟωﾟ) GitHubのzipのほうがファイル数が多い。
https://github.com/jzaefferer/jquery-validation/tree/1.12.0
(ﾟωﾟ) GitHubの管理ファイルか？
(ﾟωﾟ) "jQuery Validation"は、どういうテストをしたのか見ないと使う気にはなれない。
(ﾟωﾟ)まず、不明な２つのjQueryプラグインから調べよう。
http://plugins.jquery.com/?s=form
(ﾟωﾟ)で、検索・・・。これか。
http://plugins.jquery.com/form/
Form
by M. Alsup
A simple way to AJAX-ify any form on your page; with file upload and progress support.
(ﾟωﾟ)ドキュメントはここか。
http://jquery.malsup.com/form/
(ﾟωﾟ)↓ここの説明が参考になる。
http://weble.org/2012/02/27/jquery-form-plugin
Date: 2012/02/27
Category: jQuery
jQuery でフォームを簡単に Ajax に対応させてしまう jQuery Form Plugin が凄く便利
(ﾟωﾟ)簡単に言うと、画面遷移せずにちょっとした入力画面、例えば人であることを証明するような入力画面等を表示するためのプラグイン。
(ﾟωﾟ)という事か・・。
(ﾟωﾟ)次は、mockjax
http://plugins.jquery.com/?s=mockjax
Search Results for: mockjax
Nothing Found
Apologies, but nothing matched your search criteria.
(ﾟωﾟ) プラグイン登録してないけど、jQuery使ってるライブラリもあるのか・・。
https://www.google.co.jp/search?q=jQuery.mockjax.js
https://github.com/appendto/jquery-mockjax
(ﾟωﾟ)あたかもAjax通信してるように装うことができる。
http://tnakamura.hatenablog.com/entry/20111101/jquery_mockjax
2011-11-01 jquery-mockjax 使えよ色々と捗るぞ
サーバーの API を呼び出すときは、モックを登録しているコードをコメントアウトすればいいだけ。UI の部分には一切手を加える必要なし。
jquery-mockjax を使えば、サーバー側の実装がまったく無くても開発が進められます。JavaScript での UI 開発はもう jquery-mockjax 無しでは考えられないです。
(ﾟωﾟ)念の為、 mockで検索してみると・・・
http://plugins.jquery.com/?s=mock
http://plugins.jquery.com/ajaxmock/
jQuery.ajaxMock – a tiny but yet powerful mocking plugin for jQuery 1.5+
(ﾟωﾟ)上下逆転しただけのネーミングｗ
(ﾟωﾟ)解析は続く・・・・・
(ﾟωﾟ) jQuery ValidationのテストにjQuery.mockjax.jsを使っている理由は、
(ﾟωﾟ) リモートのデータもチェックする機能があるという事なのか？
(ﾟωﾟ) users.phpが検索したユーザー名をチェックしているように見える。
(ﾟωﾟ)奇妙な処理順序①～⑦は、前ブログ
http://ameblo.jp/pochifx/entry-11858257637.html
QUnit,PHP,Netbeans,lubuntu-14.04,VirtualBox
2014-06-04
(ﾟωﾟ) にも書いてある async-control の場合と同じだった。こういうフローなんだろう。
(ﾟωﾟ)とりあえず、APIは全部試してみるか・・。
(ﾟωﾟ)使い方は jquery-validation-1.12.0/test/index.htmlを見たら分かるし。
http://jqueryvalidation.org/documentation/
http://jqueryvalidation.org/documentation/#validate-forms-like-you-ve-never-validated-before
(ﾟωﾟ)最初は簡単に動いた。
http://jqueryvalidation.org/documentation#api-documentation
http://jqueryvalidation.org/validate#debug
(ﾟωﾟ)確かに、サーバーと通信しなかった。
http://jqueryvalidation.org/validate#ignore
(ﾟωﾟ)ignoreも混ぜた書き方は、jQueryと一緒か・・。
http://jqueryvalidation.org/validate#rules
(ﾟωﾟ)name属性の値で、入力チェックのルール付けが出来る。
(ﾟωﾟ) rulesのドキュメントには、動かないExampleを置いている。
(ﾟωﾟ) メール入力欄を２個作ったのだが、下側のほうしか動かない。
(ﾟωﾟ)今後、また試すため、動かなかったExampleを貼っておく。
Example: Specifies a contact element as required and as email address, the latter depending on a checkbox being checked for contact via email.
$(".selector").validate({
rules: {
contact: {
required: true,
email: {
depends: function(element) {
return $("#contactform_email:checked")
}
}
}
}
});
http://jqueryvalidation.org/validate#invalidhandler
(ﾟωﾟ) 同じ処理のinvalidHandlerは、functionとして共通化が出来る。
(ﾟωﾟ) チェックするフォームを振り分ける部分は、これ。
var formId = "#" + validator.currentForm["id"];
(ﾟωﾟ) ブラウザでデバッグしてて、validatorオブジェクトの中を見ていたら気づいた。
(ﾟωﾟ) そして、下記のルールがあることに気づいた。
<body>に記述する要素の順番。
１．<form>
２．<script>
script要素を上に記述すると、デフォルトの動作のみ。
<body>
<!--
http://jqueryvalidation.org/rules
dependsは他の要素を判断することが出来る。
http://jqueryvalidation.org/validate#invalidhandler
$("div.error").show()でエラーメッセージを表示している。
-->
<form class="cmxform" id="commentForm1" method="get" action="">
<fieldset>
<legend>commentForm debug=false</legend>
<p>
<label for="cname">名前 (必須。３文字以上)</label>
<!-- <input id="cname" name="name" minlength="3" type="text" required/> -->
<input id="This_name_is_not_used_in_the_rules" name="name" type="text" />
</p>
<p>
<label for="NG_Example">例が間違ってる</label>
<input type="checkbox" class="selectCLASS" id="NG_Example" ><input name="contactNG"/><BR>
<label for="clickemail">Contact email</label>
<!-- <input id="cemail" type="email" name="email" required/> -->
<input type="checkbox" id="clickemail" ><input id="cemail" name="emailValue"/><BR>
</p>
<p>
<input class="submit" type="submit" value="登録"/>
</p>
<div class="error">エラー★<span></span></div>
</fieldset>
</form>
<BR>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required/>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required/>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url"/>
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
<div class="error">エラー★<span></span></div>
</fieldset>
</form>
<script>
/* ------------------------------------------
* 無効な入力の項目数を表示
* @param {type} event
* @param {type} validator
* @returns {undefined}
*/
var invalidFnc = function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
var formId = "#" + validator.currentForm["id"];
if (errors) {
var message = errors == 1
? 'You missed 1 field. It has been highlighted'
: 'You missed ' + errors + ' fields. They have been highlighted';
$(formId + " div.error span").html(message);
$(formId + " div.error").show();
} else {
$(formId + " div.error").hide();
}
};
$(".selectCLASS").validate({//このクラスを使っている要素は１つのみ
rules: {
contactNG: {
required: true,
email: {
depends: function(element) {
return $("#NG_Example:checked");//動かん・・・
}
}
}
}
});
$("#commentForm1").validate({
rules: {
// simple rule, converted to {required:true}
// name: "required",/* name属性="name"と書くと必須になる。*/
// ルールを複数組み合わせたい場合は括弧{}で囲む。
name: {// name属性="name"は、３文字以上且つ必須。
required: true,
minlength: 3
},
// compound rule
emailValue: {// name="emailValue"属性を持っている要素は、
// id="emailcheck"のチェックボックスが1個選択されると
// return trueし、email風なのかチェックする。
email: {
depends: function(element) {
if (1 === $("#clickemail:checked").length) {
return true;//emailチェックする
} else {
return false;//emailチェックしない
}
}
}
}
},
invalidHandler: invalidFnc
});
$("#commentForm").validate({
debug: false,
submitHandler: function(form) {
$(form).ajaxSubmit();
//form.submit();
},
ignore: ".ignore", // ignoreクラスはチェックしません
invalidHandler: invalidFnc
});
</script>
</body>
http://jqueryvalidation.org/validate#messages
(ﾟωﾟ) messages と rules の例。
http://jqueryvalidation.org/validate#groups
(ﾟωﾟ) groupstとは、同じグループならば、
(ﾟωﾟ) エラーメッセージをどれか１個にする場合に用いる。
http://jqueryvalidation.org/validate#onfocusout
(ﾟωﾟ) onfocusoutを記述すると（true falseの値は何でも良い）
(ﾟωﾟ) フォーカスアウト時のエラーチェックが行われない。
(ﾟωﾟ) jquery-validation-1.12.0/dist/jquery.validate.js を使用。
http://jqueryvalidation.org/validate#focuscleanup
(ﾟωﾟ) onfocusout onkeyup onclick focusInvalid は使い方が不明。
(ﾟωﾟ) これらは、test.jsにも記述が無かったり、使わないほうがよい。
http://jqueryvalidation.org/validate#errorclass
(ﾟωﾟ) 入力エラーの場合、errorClassに指定したクラス属性が追加される。
(ﾟωﾟ) その要素とは、input要素とデフォルトエラー表示（ラベル？）らしい。
http://jqueryvalidation.org/validate#validclass
(ﾟωﾟ) 妥当な値の場合、input要素には「validClassで指定したクラス」属性が追加される
http://jqueryvalidation.org/validate#wrapper
http://jqueryvalidation.org/validate#errorlabelcontainer
(ﾟωﾟ) wrapperとerrorLabelContainerを使ったエラーメッセージを纏める例。
http://jqueryvalidation.org/validate#errorcontainer
(ﾟωﾟ) 参考になったソースなのだが、おしい・・。
(ﾟωﾟ) name属性が紐付けとなっている事がコーディングされていない。
http://blog.baister.net/2012/07/12/moving-jquery-validation-error-messages/
(ﾟωﾟ) rules と messages は、name属性を見ている。
(ﾟωﾟ)デバッグすると、input要素のid属性の値が、エラーのラベルのidに使われていた。
(ﾟωﾟ) defaultShowErrors()が、エラーコンテナのdiv要素に、
(ﾟωﾟ) style="display: block;"という属性を追加し、エラーコンテナを表示させていた。
http://jqueryvalidation.org/validate#showerrors
(ﾟωﾟ) errotMapとerrorListにはエラーが増えた場合に値が入り、
(ﾟωﾟ) 正しい値を入力してエラーが減った場合は空である。
http://jqueryvalidation.org/validate#errorplacement
(ﾟωﾟ)参考にしたスクリプトは
https://gist.github.com/nissuk/780757
(ﾟωﾟ)なのだが、このソースはデバッグしてないと思う。
(ﾟωﾟ)デバッグしているのであれば、変数elp等に代入しているハズ。
http://jqueryvalidation.org/validate#success
(ﾟωﾟ) successのクラス名だけを設定する意味は、
(ﾟωﾟ) エラーメッセージのラベルを見えなくする為だろうか？
http://jqueryvalidation.org/validate#highlight
(ﾟωﾟ) 入力エラーとなった要素がelementに渡されて、highlightのfunctionが呼ばれる。
