QUALL – blog

javascriptでのバリデートについてデザインとロジックを分けてイベントリスナーをwindowロード時にあてるやり方を軸に他の書き方も書いて比較してみる。

１．デザインとロジックを分離させた方法

イベントハンドラ＆JSメソッドをHTML内に一切書かない方法。クロスブラウザ対応の処理が重複してるようになってしまうのはしょうがないのかなぁと。。。
※ちなみにブラウザ側でJSを切ってしまうとバリデート効かない状態で遷移されます

<script type="text/javascript">
//<![CDATA[
var addEvent = function (node, evt, func) {
    if (node.addEventListener)
        node.addEventListener(evt, func, false);
    else if(node.attachEvent)
        node.attachEvent('on' + evt, func);
    else alert('サポートされていないブラウザです');
};

var init = function() {
    var node = document.getElementById('imageSubmit');
    addEvent(node, 'click', sendData);

    node = document.getElementById('form1');
    if (node.addEventListener)
        addEvent(node, 'submit', function(e){ e.preventDefault(); });
    else if (node.attachEvent)
        addEvent(node, 'submit', function(e){ event.returnValue = false; });
    else alert('サポートされていないブラウザです');
};

var sendData = function() {
    var errMsg = "";
    var checkList = { "shopid":"ショップID", "email":"メールアドレス"};
    for (var key in checkList) {
        if (document.getElementById(key).value == "")
            errMsg = errMsg + checkList[key] + "を入力してください。\n";

        if (key == "email" && document.getElementById(key).value != "" && !document.getElementById(key).value.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/))
            errMsg = errMsg + checkList[key] + "の書式が正しくありません。\n";
    }
    if (errMsg != "") {
        alert(errMsg);
        return;
    }
    document.getElementById('form1').submit();
};
addEvent(window, "load", init);
//]]>
</script>
<form id="form1" method="post" action="confirm.php">
<table>
    <tfoot>
    <tr>
        <th></th>
        <td><input type="image" src="" height="30px" width="100px" value="送信する" id="imageSubmit"></td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <th>ID:</th>
        <td><input type="text" id="shopid" name="shopid" value=""></td>
    </tr>
    <tr>
        <th>メールアドレス</th>
        <td><input id="email" name="email" type="text" value=""></td>
    </tr>
    </tbody>
</table>
</form>

２．formタグ内にonsubmit

次に、formタグ内にonsubmitを使うやり方。このやり方がわりと主流みたい。
※ブラウザ側でJSを切ってしまうとバリデート効かない状態で遷移されます。

<script type="text/javascript">
//<![CDATA[
var sendData = function() {
    var errMsg = "";
    var checkList = { "id":"ID", "email":"メールアドレス"};
    for (var key in checkList) {
        if (document.getElementById(key).value == "")
            errMsg = errMsg + checkList[key] + "を入力してください。\n";

        if (key == "email" && document.getElementById(key).value != "" && !document.getElementById(key).value.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/))
            errMsg = errMsg + checkList[key] + "の書式が正しくありません。\n";
    }
    if (errMsg != "") {
        alert(errMsg);
        return false;
    }
    return;
};
//]]>
</script>
<form id="form1" method="post" action="confirm.php" onsubmit="return sendData();">
<table>
    <tfoot>
    <tr>
        <th></th>
        <td><input type="image" src="" height="30px" width="100px" value="送信する" id="imageSubmit"></td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <th>ID:</th>
        <td><input type="text" id="id" name="id" value=""></td>
    </tr>
    <tr>
        <th>メールアドレス</th>
        <td><input type="text" id="email" name="email" value=""></td>
    </tr>
    </tbody>
</table>
</form>

３．imgタグでsubmit代替

次に、aタグ内のimgタグをsubmitの代替えにするやり方。
※ブラウザ側でJSを切ってしまうと遷移されません。

個人的にはこれが好きだなあ。
JS切ったら遷移ができなくなるし、意図的にバリデート抜けるってことができなくなるから。

<script type="text/javascript">
//<![CDATA[
var sendData = function() {
    var errMsg = "";
    var checkList = { "id":"ID", "email":"メールアドレス"};
    for (var key in checkList) {
        if (document.getElementById(key).value == "")
            errMsg = errMsg + checkList[key] + "を入力してください。\n";

        if (key == "email" && document.getElementById(key).value != "" && !document.getElementById(key).value.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/))
            errMsg = errMsg + checkList[key] + "の書式が正しくありません。\n";
    }
    if (errMsg != "") {
        alert(errMsg);
        return;
    }
    document.getElementById('form1').submit();
};
//]]>
</script>
<form id="form1" method="post" action="confirm.php">
<table>
    <tfoot>
    <tr>
        <th></th>
        <td><a href="javascript:sendData();"><img src="" height="30px" width="100px" alt="送信する" /></a></td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <th>ID:</th>
        <td><input type="text" id="id" name="id" value="" /></td>
    </tr>
    <tr>
        <th>メールアドレス</th>
        <td><input type="text" id="email" name="email" value="" /></td>
    </tr>
    </tbody>
</table>
</form>

デザインとロジックを分けるってjavascriptの場合だとコード量が増えすぎてあまりよろしくないなぁ～。。
クロスブラウザ対応（っていうかIE対応）で似たような処理をいくつも書かないといけないし。

windowのload時に、id要素取得してイベントリスナーあてる方法よりも、普通にイベントハンドラをHTML内に書いてメソッドを直で呼び出す方がいいな。。

と思う今日この頃。

関連記事

• JSでイベントリスナーやらでバリデートの実装いろいろ
• formの複数選択のselectボックスの値をJSで取得する
• イベントハンドラを使わないでデザインとロジックを分割
• javascriptで独自オブジェクトを作成する

No related posts.