JavaScriptって意外と面白い

独プログラミング

ちょっと気になって、JavaScriptの勉強。

勉強して思ったけど、onsubmitとかのイベントもタグ内に書かなくてもいいのではって思った。


そこで

<html>
<head>
  <title>TEST</title>
<script language="JavaScript">
<!--
function doExecute() {
    document.mainForm.onsubmit = formOnSubmit;
}

function formOnSubmit() {
    alert("OK押したよ");
}
// -->
</script>

</head>

<body onload="javascript:doExecute();">

<form name="mainForm" method="GET">
  <input type="submit" name="btn" value="OK" />
</form>

</body>
</html>

って作って「OK」ボタンを押したらonsubmitイベントが呼べた。
もしかして、これって常識！？今まで知らなかったなー。



うまく作れば、便利なパラメータチェックも作れるかも・・・

って思って、まずは知識を得るために作成

<html>
<head>
  <title>TEST</title>
<script language="JavaScript">
<!--
function requiredText() {
    return (this.value.length != 0);
}

function requiredSingleCheckBox() {
    return this.checked;
}

function validate() {
    this.clearMsg();
    if (this.required != undefined && !this.required()) {
        this.writeMsg("必須項目です。")
    }
}

function writeInnerMsg(msg) {
    document.getElementById(this.name + "Msg").innerHTML = msg;
}

function clearInnerMsg() {
    this.writeMsg("");
}

function validateOk() {
    return document.getElementById(this.name + "Msg").innerHTML.length == 0;
}

// ----------------------------------------------------------------------------

function validateAll() {
    var validators = new Array();
    for (var i = 0; i < this.elements.length; i++) {
        if (this.elements[i].validate != undefined) {
            validators.push(this.elements[i]);
        }
    }

    for (var i = 0; i < validators.length; i++) {
        validators[i].validate();
    }

    for (var i = 0; i < validators.length; i++) {
        if (!validators[i].ok()) {
            return false;
        }
    }
    return true;
}

// ----------------------------------------------------------------------------

function initDefaultValidator(inputTag) {
    inputTag.validate = validate;
    inputTag.writeMsg = writeInnerMsg;
    inputTag.clearMsg = clearInnerMsg;
    inputTag.ok = validateOk;
}

// ----------------------------------------------------------------------------

function doExecute() {
    document.mainForm.onsubmit = validateAll;

    initDefaultValidator(document.mainForm.txt);
    document.mainForm.txt.required = requiredText;

    initDefaultValidator(document.mainForm.box);
    document.mainForm.box.required = requiredSingleCheckBox;
}
// -->
</script>

</head>

<body onload="javascript:doExecute();">

<form name="mainForm" method="GET">
  <table>
    <tr>
      <th>TEXT</th>
      <td><input type="text" name="txt" value="" /></td>
      <td><span id="txtMsg"></span></td>
    </tr>
    <tr>
      <th>CEHCKBOX</th>
      <td><input type="checkbox" name="box" value="check!!" /></td>
      <td><span id="boxMsg"></span></td>
    </tr>
  </table>
  <input type="submit" name="btn" value="OK" />
</form>

</body>
</html>


HTMLはシンプルになるけど、イベントが離れた場所に定義される。
いいとこばっかじゃないねー。やっぱり。