更新表單

layouts/shortcodes/form.html

@@ -11,7 +11,7 @@
         </div>
       </label>
       <div class="col-md-10 col-lg-9 col-xl-10">
-        <input type="text" class="form-control" id="nameValue" placeholder="請留下聯絡人姓名">
+        <input type="text" class="form-control" id="nameValue" placeholder="請留下聯絡人姓名" required>
       </div>
     </div>
 
@@ -21,8 +21,13 @@
           聯絡電話 <span class="text-danger">*</span>
         </div>
       </label>
-      <div class="col-md-10 col-lg-9 col-xl-10">
-        <input type="tel" class="form-control" id="phoneValue" placeholder="請留下聯絡電話">
+      <div class="col-md-3 col-lg-4 col-xl-3">
+        <select id="countryCode" class="form-select">
+          <option selected>選擇國碼</option>
+        </select>
+      </div>
+      <div class="col-md-7 col-lg-5 col-xl-7">
+        <input type="tel" class="form-control" id="phoneCode" placeholder="e.g., 988 888 888" required>
       </div>
     </div>
 
@@ -33,7 +38,7 @@
         </div>
       </label>
       <div class="col-md-10 col-lg-9 col-xl-10">
-        <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱">
+        <input type="text" class="form-control" id="companyValue" placeholder="請留下公司名稱" required>
       </div>
     </div>
 
@@ -44,7 +49,11 @@
         </div>
       </label>
       <div class="col-md-10 col-lg-9 col-xl-10">
-        <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail">
+        <input type="email" class="form-control" id="emailValue" placeholder="請留下 E-mail" required>
+      </div>
+
+      <div class="invalid-feedback">
+        Please choose a username.
       </div>
     </div>
 
@@ -56,7 +65,7 @@
       </label>
       <div class="col-md-10 col-lg-9 col-xl-10 d-flex align-items-center">
         <input type="date" id="dateValue" name="dateValue" class="px-2"
-          style="border:1px solid #ced4da; border-radius: 3px;" />
+          style="border:1px solid #ced4da; border-radius: 3px;" required />
       </div>
     </div>
 
@@ -111,7 +120,7 @@
         </div>
       </label>
       <div class="col-md-10 col-lg-9 col-xl-10">
-        <textarea class="form-control" id="captionValue" rows="3" placeholder="請簡述說明"></textarea>
+        <textarea class="form-control" id="captionValue" rows="3" placeholder="請簡述說明" required></textarea>
       </div>
     </div>
 
@@ -143,16 +152,50 @@
 <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
   crossorigin="anonymous"></script>
 <script>
+  // 電話國碼
+  const countryCodes = [
+    '+1',   // 美國
+    '+7',   // 俄羅斯
+    '+33',  // 法國
+    '+39',  // 義大利
+    '+44',  // 英國
+    '+46',  // 瑞典
+    '+47',  // 挪威
+    '+49',  // 德國
+    '+52',  // 墨西哥
+    '+60',  // 馬來西亞
+    '+61',  // 澳大利亞
+    '+62',  // 印尼
+    '+64',  // 紐西蘭
+    '+65',  // 新加坡
+    '+66',  // 泰國
+    '+81',  // 日本
+    '+82',  // 南韓
+    '+86',  // 中國大陸
+    '+91',  // 印度
+    '+353', // 愛爾蘭
+    '+852', // 香港
+    '+853', // 澳門
+    '+886', // 台灣
+  ];
+
+  const countryCode = document.getElementById('countryCode');
+  countryCodes.forEach(code => {
+    const option = document.createElement('option');
+    option.value = code;
+    option.text = code;
+    countryCode.appendChild(option);
+  });
+
+  // 串接 Google Sheets 表單：https://docs.google.com/spreadsheets/d/1fvCmsUu-0lAraKMSbApUy8cQre3F85eQzzZyh9qwNzA/edit#gid=0
   $('.errorText').hide();
   $('.loading-btn').hide();
   const scriptURL = 'https://script.google.com/macros/s/AKfycbyAUKo8onoxuEgXP876QsR6q0_8379v4hMCvYVCk3gVaaTEIuK7hPNnOSKNWHlBJ4mVgA/exec';
 
-  console.log('測試');
-
   function send() {
     console.log('addEventListener');
     let name = document.querySelector('#nameValue').value; // 聯絡人
-    let phone = document.querySelector('#phoneValue').value; // 聯絡電話
+    let phone; // 聯絡電話
     let company = document.querySelector('#companyValue').value; // 公司名稱
     let email = document.querySelector('#emailValue').value; // 電子信箱
     let demand; // 需求目的
@@ -175,13 +218,10 @@
       demand = document.querySelector('#otherText').value;
     }
 
-    if (name === "" || phone === "" || company === "" || email === "" || demand === "" || caption === "" || budget === "" || date === "") {
-      $('.errorText').show();
-      return;
-    } else {
-      $('.loading-btn').show();
-      $('.errorText').hide();
-    }
+    let countryCode = document.querySelector('#countryCode').value; // 國碼
+    let phoneCode = document.querySelector('#phoneCode').value; // 電話號碼
+
+    phone = `${countryCode} ${phoneCode}`;
 
     $.ajax({
       url: scriptURL,
@@ -208,6 +248,42 @@
 
   $('button').on('click', function (e) {
     e.preventDefault();
-    send();
+
+    let countryCode = document.querySelector('#countryCode').value;
+    let budget = document.querySelector('#budgetValue').value; // 預算限制
+
+    let demand = ""; // 需求目的
+    if (document.querySelector('input[name="demandValue"]:checked')) {
+      demand = document.querySelector('input[name="demandValue"]:checked').value;
+    }
+
+    if (demand === "其他") {
+      demand = document.querySelector('#otherText').value;
+    }
+
+    // 手動觸發表單提交
+    let form = $(this).closest('form');
+    form[0].reportValidity(); // 顯示瀏覽器內建錯誤提示
+
+    if (countryCode === "選擇國碼" || budget === "請選擇" || demand === "") {
+      console.log('表單未通過驗證');
+      $('.errorText').show();
+      return;
+    }
+
+    if (form[0].reportValidity()) {
+      $('.loading-btn').show();
+      $('.errorText').hide();
+      send();
+    }
+
+    // if (name === "" || phoneCode === "" || company === "" || email === "" || demand === "" || caption === "" || budget === "" || date === "" || countryCode === "") {
+    //   $('.errorText').show();
+    //   return;
+    // } else {
+    //   $('.loading-btn').show();
+    //   $('.errorText').hide();
+    //   send();
+    // }
   });
 </script>