問合せフォーム用のJS

achievement-official.conohawing.com/assets/include/header.php

@@ -10,6 +10,11 @@
  <script src="/assets/js/jquery-3.3.1.min.js"></script>
  <script src="/assets/js/jquery-migrate-3.0.1.min.js"></script>
 
+ <?php if($pageid == "contact") { ?>
+ <script src="/assets/js/jquery.validate.min.js"></script>
+ <script src="/assets/js/validate.js"></script>
+ <?php } ?>
+
  <?php if($pageid == "top") { ?>
  <link rel="stylesheet" href="/common_previous/css/slick.css">
  <link rel="stylesheet" href="/common_previous/css/top.css">

achievement-official.conohawing.com/assets/js/validate.js

+$(function(){
+	$('#form').validate({
+		rules: {
+			content_type: {
+				required: true,
+			},
+			last_name: {
+                required: true,
+                maxlength: 20,
+			},
+			first_name: {
+                required: true,
+                maxlength: 20,
+			},
+			last_name_kana: {
+                required: true,
+                maxlength: 20,
+			},
+			first_name_kana: {
+                required: true,
+                maxlength: 20,
+			},
+			phone_number: {
+                required: true,
+                number: true,
+                rangelength: [10,11],
+			},
+			email: {
+                required: true,
+                email: true,
+                maxlength: 255,
+			},
+			email_confirmation: {
+                required: true,
+                equalTo: 'input[name=email]',
+			},
+			number_of_employees: {
+                number: true,
+                maxlength: 8,
+			},
+			company_name: {
+                maxlength: 80,
+			},
+			job_title: {
+                maxlength: 80,
+			},
+			industry: {
+                maxlength: 80,
+			},
+			content: {
+                required: true,
+                maxlength: 800,
+			},
+			info_agreement: {
+				required: true,
+			},
+        },
+        messages: {
+			content_type: {
+				required: 'お問い合わせ項目を選んでください',
+			},
+			last_name: {
+                required: '姓が入力されていません',
+                maxlength: '20文字以内で入力してください',
+			},
+			first_name: {
+                required: '名が入力されていません',
+                maxlength: '20文字以内で入力してください',
+			},
+			last_name_kana: {
+                required: 'セイが入力されていません',
+                maxlength: '20文字以内で入力してください',
+			},
+			first_name_kana: {
+                required: 'メイが入力されていません',
+                maxlength: '20文字以内で入力してください',
+			},
+			phone_number: {
+                required: '電話番号が入力されていません',
+                number: '半角数字を入力してください',
+                rangelength: '正しい番号を入力してください',
+			},
+			email: {
+                required: 'メールアドレスが入力されていません',
+                email: '正しいメールアドレスの形式で入力して下さい',
+                maxlength: '255文字以内で入力してください',
+			},
+			email_confirmation: {
+                required: '確認用メールアドレスが一致しません',
+                email: '正しいメールアドレスの形式で入力して下さい',
+                equalTo: '確認用メールアドレスが一致しません',
+			},
+			number_of_employees: {
+                number: '数字を入力してください',
+                maxlength: '8桁以内で入力してください',
+            },
+            company_name: {
+                maxlength: '80文字以内で入力してください',
+			},
+			job_title: {
+                maxlength: '80文字以内で入力してください',
+			},
+			industry: {
+                maxlength: '80文字以内で入力してください',
+			},
+			content: {
+                required: 'お問い合わせ内容が入力されていません',
+                maxlength: '800文字以内で入力してください',
+			},
+			info_agreement: {
+				required: '「個人情報保護取扱いについて」及び「プライバシーポリシー」をご確認のうえ、同意してください',
+			},
+        },
+        errorPlacement: function(error, element) {
+            if (element.attr('name') == 'content_type') {
+              error.insertAfter('.error_txt_1');
+            } else if (element.attr('name') == 'info_agreement'){
+              error.insertAfter('.info_agreement');
+            } else if (element.attr('name') == 'number_of_employees'){
+              error.insertAfter('.error_txt_2');
+            } else {
+              error.insertAfter(element);
+            }
+        },
+        errorClass: "alert_text",
+        errorElement: "p"
+    });
+
+    var content_type = $('input[name=content_type]').valid();
+    var last_name = $("#last_name").valid();
+    var first_name = $("#first_name").valid();
+    var last_name_kana = $("#last_name_kana").valid();
+    var first_name_kana = $("#first_name_kana").valid();
+    var regist_email = $("#regist_email").valid();
+    var email_confirmation = $("#email_confirmation").valid();
+    var phone_number = $("#phone_number").valid();
+    var content = $("#content").valid();
+    var info_agreement = $("#info_agreement").valid();
+
+    checkValidate();
+
+    $('p.alert_text').remove();
+
+    $("input[name=content_type]").on('change', function () {
+        content_type = $(this).valid();
+        checkValidate();
+    });
+
+    $("#last_name").on('blur keyup', function () {
+        last_name = $(this).valid();
+        checkValidate();
+    });
+    $("#first_name").on('blur keyup', function () {
+        first_name = $(this).valid();
+        checkValidate();
+    });
+    $("#last_name_kana").on('blur keyup', function () {
+        last_name_kana = $(this).valid();
+        checkValidate();
+    });
+    $("#first_name_kana").on('blur keyup', function () {
+        first_name_kana = $(this).valid();
+        checkValidate();
+    });
+    $("#regist_email").on('blur keyup', function () {
+        regist_email = $(this).valid();
+        checkValidate();
+    });
+    $("#email_confirmation").on('blur keyup', function () {
+        email_confirmation = $(this).valid();
+        checkValidate();
+    });
+    $("#phone_number").on('blur keyup', function () {
+        phone_number = $(this).valid();
+        checkValidate();
+    });
+    $("#content").on('blur keyup', function () {
+        content = $(this).valid();
+        checkValidate();
+    });
+    $("#info_agreement").on('click', function () {
+        info_agreement = $(this).valid();
+        checkValidate();
+    });
+
+    function checkValidate(){
+        var checked = content_type && last_name && first_name && last_name_kana && first_name_kana && regist_email && email_confirmation && phone_number && content && info_agreement;
+        if (checked) {
+            $('#form_btn').prop('disabled', false);
+        } else {
+            $('#form_btn').prop('disabled', true);
+        }
+    }
+});
\ No newline at end of file