HTML5 FormでのValidation

やりたかったこと

Formのinput要素のバリデーションを最小の労力で実現する。バリデーションの結果、どこの何が問題なのかが分かればいい。

（やりたくないこと：JavascriptとHTML5の仕様追及）

できた。と思ったのですが。。。

    <form id="form1">
      <input type="number"
             id="size"
             title="Size"
             maxlength="20"
             min="1"
             required
       />
       <input type="submit" id="simExec" value="実行" />
    </form>

いやぁ、HTML書くだけでvalidationしてくれるなんて、素敵な世の中になったものだ、ことのときはそう思っていたんです。
AjaxでリクエストパラメータをJSON形式にしてAPIへ送信したかったので、ボタンのonclickイベントに送信する関数を登録していました。

document.getElementById('simExec').addEventListener('click', sendSimRequest);

実はいまだに謎なのですが、ブラウザを開いて最初に送信したときだけ、送信されずに画面がリロードされます。その後はボタンを押せばリクエストが送信されます。submitでFormがリロードされるのは仕様ではありますが。。。
最初にも書いたとおり、この辺りの仕様を追求するのは避けて、submitをやめることにしました。

ここからが本題：FormのsubmitなしにValidationする

別にそれがやりたかったわけではないのですが、逃げ回った結果、そこに行き着いた、ということです。

formとsubmitをやめた

    <div id="form1">
      <input type="number"
             id="size"
             title="Size"
             maxlength="20"
             min="1"
             required
       />
       <button type="button" id="simExec">実行</button>
    </div>
    <div id="message" style="color: #ff0000"></div>

submitの挙動から逃げるために、こんな感じに。もともとリクエスト送信はJavaScriptだったので、気軽ということもありました。
id="message"が突然出てきていますが、その理由は以下で。

でもvalidationはしたい。

inputに定義した制約は生きています！ただ、submitしないとそれを拾ってメッセージをポップアップ表示するアクションが行われないだけみたいです。
そこで、以下のようなJavaScriptでValidation結果を拾って、エラーメッセージとして表示します。ここでid="message"のところを使います。

function execute() {
  if (!validateInput(document.getElementById('size'))) return false;

  //この後で、例えばリクエスト送信する。
}

function validateInput(element){
  clearMessage();

  if (!element.willValidate) return true;

  if (element.validity.valueMissing) {showMessage(element.title + ":Input required."); return false;}
  if (element.validity.typeMismatch) {showMessage(element.title + ":Type mismatch."); return false;}
  if (element.validity.tooLong) {showMessage(element.title + ":Too long."); return false;}
  if (element.validity.rangeUnderflow) {showMessage(element.title + ":Input value is under the limit."); return false;}
  if (element.validity.rangeOverflow) {showMessage(element.title + ":Input value is over the limit."); return false;}
  if (element.validity.stepMismatch) {showMessage(element.title + ":Input value is not match the step."); return false;}

  return true;
}

言わずもがな、な内容ですが、メッセージ表示と消去のfunctionも掲載しておきます。

function showMessage(msg){
  document.getElementById('message').innerHTML = msg;
}
function clearMessage(){
  document.getElementById('message').innerHTML = "";
}

便利な機能でも、少しそこから外れようとしただけでレールに全く乗れなくなる、よくある話ですね。でも、validationの値が取れたのはよかった。

参考文献

(http://webbeginner.hatenablog.com/entry/2014/11/01/172318)
[JavaScript]HTML5 Form Validationの制御と注意事項