jQueryValidationEngineで２つのセレクトボックスの大小チェックを入れるには？

Question

validation engineを使って数値の大小を比べ入力制限をしたいと思っています。
例えば以下のようにセレクトボックスA、Bがあるときに、Aで2を選んだら、
Bは3以上でなければアラートが出るという形です。

<select name="A" id="A"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <select name="B" id="B"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select>

他の入力チェックにvalidation engineを使っており、
出来れば統一して制限をかけられればと思っていますので、宜しくお願い致します。

Answer 1

　こんな感じでいかがでしょうか？

<form id="formID">
	<select name="A" id="A" class="validate[required,funcCall[test[<,B]]]">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
	</select>

	<select name="B" id="B" class="validate[required,funcCall[test[>,A]]]">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
	</select> 
</form>

function test(field, rules, i, options){
	var targetName = rules[i+3];
	var target = $( '#'+ targetName );
	var operator = rules[i+2];
	if ( operator == '<' ) {
		if ( (field.val()|0) >= (target.val()|0) ) {
			return targetName + "より小さくしてください";
		}
	} else if ( operator == '>' ) {
		if ( (field.val()|0) <= (target.val()|0) ) {
			return targetName + "より大きくしてください";
		}
	}
}

　
ご存知とは思いますが、test関数はグローバルにおいてください。

Comments

[kuao23]

ありがとうございます！
思っていた通りの動作が出来るようになりました！
コードの内容をまだ理解できていませんが、勉強していきます^^;

Answer 2

処理内容も難しくはありませんし質問者の求める答えではありませんが自作するのが最も良いのではないかと思います。changeイベントにvalueを取得する処理を書いておき、その後比較という形で実現できるわけです。使用しているライブラリのメソッドを呼び出してエラーメッセージを出せれば完璧ですが恐らく難しいのではないかと。

Comments

[kuao23]

ありがとうございます！
処理方法について勉強になりました。
今後自作できるように頑張ります！

Answer 3

エラーが起きるような選択をユーザーが出来ないようにしたほうが良いです。
一番目の選択をしたら２番目の選択肢の内容を１編目の値以上のものだけに動的に変更させる例を書いてみました。

• http://jsdo.it/katoy/ardo

Comments

[kuao23]

ありがとうございます！
始めから選べないようにも出来るんですね。
今後の書き方の参考にさせて頂きます！