Wicket と input type="number" 見直し

HTML5 input type="number" を使った時、Wicket では　NumberTextField を使った場合、HTML で min 属性や、max 属性を書いても消えてしまう。
Wicket が、HTML5 が普及するまでの間、Validator を提供してきたわけで、Range のバリデータを書くのが、
Wicketのスタイルかもしれない、全てをJavaのソースコードにまとめる考えもいいけど、
使い回し を考えると jQuery でチェックとエラー時の処理を書いても良いのではないか？

final NumberTextField<Integer> code = new NumberTextField<Integer>("code", new Model<Integer>(), Integer.class);
code.add(new AttributeModifier("min", "1"));
code.add(new AttributeModifier("max", "10"));

HTML は、、
<input type="number" wicket:id="code" id="code" >

CSS としてエラー時に入力フィールドを赤くしたいので。。

.input-error{
      background-color: #ffc7c7;
}

WebページでＣＳＳと 指定する JavaScript を取り込むように、CssHeaderItem　と、JavaScriptHeaderItem　を使って。。。
sample.css は、上の CSS を記述

@Override
public void renderHead(IHeaderResponse response){
   super.renderHead(response);
   response.render(CssHeaderItem.forReference(new CssResourceReference(SamplePage.class, "sample.css")));
   response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(SamplePage.class, "jquery-2.1.1.min.js.js")));
   response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(SamplePage.class, "number-input-error.js")));
   response.render(JavaScriptHeaderItem.forReference(new JavaScriptResourceReference(SamplePage.class, "sample.js")));
}

number-input-error.js は、以下のように用意します。

var setNumberInputErrorEffect = function(selector, errorClass){
   $(selector).removeClass(errorClass);
   if ($(selector).val()==""){
      $(selector).addClass(errorClass);
   }else{
      var v = parseInt($(selector).val(), 10);
      var min = parseInt($(selector).attr("min"), 10);
      var max = parseInt($(selector).attr("max"), 10);
      if (v < min || v > max){
         $(selector).addClass(errorClass);
      }
   }
};

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

sample.js で、HTML input type="number" に対して、
この関数を適用させます。
// submit ボタンクリックで。。。
$('#submitbtn').click(function(){
   setNumberInputErrorEffect('#code', 'input-error');
});


JavaScript ソースをきちんと管理すれば、書くコード量も減るはずです。