フロントエンドがフォームページをコーディングするときのメモ

2015.4.27 コーディングフォーム

フロントエンドがフォームページをコーディングするときのメモ

シンタローさんフロントエンドエンジニア

毎回調べるので、現状のメモを。

ども、カンマンのフロントエンド担当、阿部です。

WordPressならばメールフォームをくっつけるのは簡単なのですが、htmlで組んだフォームページをバックエンドに回す前にフロント側でやっておいた方が良さそうなことをメモします。

生年月日のテンプレート

よく使うHTMLひながた＞年月日フォーム｜ahref.org

こちらを拝借。

もっとスマートに実装できるのかしら？？

郵便番号から住所を入力させる

ajaxzip3/ajaxzip3.github.io

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

本体を読み込んで、

<input type="text" name="zip11" size="10" maxlength="8" onKeyUp="AjaxZip3.zip2addr(this,'','addr11','addr11');">
<input type="text" name="addr11" size="60">

これだけで実装OK。jQueryすら必要としない。都道府県のメンテナンスも不要。

フォームのリアルタイムバリデーション

jzaefferer/jquery-validation

バリデーション系のプラグインはいっぱいあるけど、個人的にはコレが使いやすい。

jQuery Validate Pluginの解説とValidate 日本語環境用PluginとjQuery Form Pluginとの連携 – くらげだらけ

簡単にフォームの入力チェックが行えるjquery.validate.js-JavaScript Library Archive

本体を読み込んで、

$(function(){
    $("form").validate({
        rules: {
            name :{
                required: true
            },
            mail :{
                required: true,
                email: true
            },
            url :{
                required: true
            }
        },
        messages: {
            name :{
                required: "お名前を入力してください"
            },
            mail :{
                required: "メールアドレスを入力してください",
                email: "正しいメールアドレスを入力してください"
            },
            url :{
                required: "URLを入力してください"
            }
        }
    });
})

見た感じが直感的に指定出来る。日本語ももちろんOK。