入力確認-SmartyにJavaScriptを埋める

今回は、実験的なことをやってみます。

POSTで受け取ったデータをチェックして、必須項目の確認をすることもできますがJavaScriptを使用してPOSTされる前に必須項目の入力をチェックして見ます。

まず、メッセージの部分に文字が入力されていない場合、エラー表示するようにJavaScriptを作成します。

<script language="JavaScript" type="text/javascript">
function checkPost() {

    bError = false;

    if (document.post.message.value.length < 1) {
        ErrorMsg = "メッセージを入力して投稿してください";
    }
    else{
        bError = true;
    }

    if (bError) {
        alert(ErrorMsg);
    }
    return bError;
}
</script>

formタグにのnameはpost、inputタグのnameはmessageとしています。

通常のHTMLの場合、までをHTMLに埋めることで実現できますが、Smartyを使用した場合はできませんでした。

当然といえば当然なのですが、Smartyはデフォルトのデリミタとして {} を使用しています。JavaScriptでも関数の開始や終了は、 {} を使用します。

この問題を解決するには、三つの方法があるようです。

ひとつは、JavaScript全体を{literal} .. {/literal}で囲みます。次に、{ldelim} と {rdelim} を使用して {} を置き換えます。 もうひとつは、$left_delimiter と $right_delimiterを使ってデリミタを別のものに変更します。

今回は、{literal} .. {/literal}を使ってJavaScript全体を回避します。

{literal}
<script language="JavaScript" type="text/javascript">
function checkPost() {

    bError = false;

    if (document.post.message.value.length < 1) {
        ErrorMsg = "メッセージを入力して投稿してください";
    }
    else{
        bError = true;
    }

    if (bError) {
        alert(ErrorMsg);
    }
    return bError;
}
</script>
{/literal}

テンプレートとJavaScriptの共存ができるようになりました。