jQuery フォームバリデーション実装方法

フォームのバリデーションをjQueryで行う方法

どうしてもphpなどでバリデーションができない時などにjsやjQueryでバリデーションを行う方法です。
jQueryのプラグイン使用の場合を記述します。

まずは以下のフォームの場合の記述方法です。

<form action="../contact" method="post">
    <table>
        <tbody>
        <tr>
                <th scope="row">名前 ※必須</th>
                <div class="data-name"></div>
                <td><input type="text" data="name" name="p_order[NAME]" value=""></td>
            </tr>
            <tr>
                <th scope="row">mail※必須</th>
                <td><input type="text" name="p_order[NAME]" value=""></td>
            </tr>
            <tr>
                <th scope="row">性別</th>
                <td>
                <label for="">
                        <input type="radio" name="p_order[sex]" value="">
                        男性
                    </label>
                    <label for="">
                        <input type="radio" name="p_order[sex]" value="">
                        女性
                    </label>
                </td>
            </tr>
            <tr>
                <th scope="row">お問い合わせ内容　※必須</th>
                <td><input type="text" name="p_order[comment]" value=""></td>
            </tr>
            <tr>
                <td><input type="submit" value="確認" class="">確認</td>
            </tr>
        </tbody>
    </table>
</form>

基本的にエラー箇所のinputタグに必須項目の内容が表示されるようになってますが、
下記の「errorPlacement」は任意の箇所にエラー内容を表示することができます。
例えば以下のinputタグに「data=”name”」と記述をしていたら上部divタグの「id=”data-name”」のタグに必須項目の内容を表示させることができます。

<div id="data-name"></div>
<input type="text" data="name" name="p_order[NAME]" value="">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/localization/messages_ja.min.js"></script>
<script>
$('form').validate({
    // Validationルール
    rules: {
        // name属性でrequired trueで必須項目設定
        'p_order[COLOR]': {
          required: true, 
        },
        'p_order[SIZE]': {
          required: true, 
        },
        'p_order[DESIGN]': {
          required: true, 
        },
        'p_order[LAYOUT]': {
          required: true, 
        },

    },
 
    // 指定した属性にエラーメッセージを記載します。
    messages: {
        'p_order[COLOR]': {
            required: '必須項目です',
        },
        'p_order[SIZE]': {
            required: '必須項目です',
        },
        'p_order[DESIGN]': {
            required: '必須項目です',
        },
        'p_order[LAYOUT]': {
            required: '必須項目です',
        },
    },
	errorElement: 'span',
	// errorClass:'error',
    // 任意の場所にエラー内容が表示される
	errorPlacement: function(error, element){
		var name = element.attr('data');
		error.appendTo($('#data-'+name));
	}

});
</script>

チェックボックスやラジオボタンの場合はどうしても任意の場所に表示させないといけないケースができるのでおそらくこの関数を多用することが多くなるようにかと思います。
参考サイト

• カスタム1: castom1
• カスタム2: castom2asdfasdfasasdfasdf