对接Google Spreadsheet的HTML表单JS数据验证功能改造咨询

前置操作 #

首先在你的HTML表单的提交按钮下方，添加错误提示专用容器：

<div id="errorMsg" style="color: red; display: none; margin: 10px 0;">All fields are required</div>

修改后的完整JavaScript代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>  
<script>
// 本地化materializecss日历为德语显示
const inter_de = {
  cancel: 'ABBRECHEN',
  done: 'BESTÄTIGEN',
  previousMonth: '‹',
  nextMonth: '›',
  months: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
  monthsShort: ['Jan','Feb','März','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
  weekdays: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
  weekdaysShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
  weekdaysAbbrev: ['S', 'M', 'D', 'M', 'D', 'F', 'S']
};
// 初始化materializecss日历组件
const Calender = document.querySelector('.datepicker');
M.Datepicker.init(Calender,{
  format:'dd.mm.yyyy',
  i18n:inter_de
});
</script>

<script>
const unternehmeneBox = document.getElementById("unternehmen");
const anredeBox = document.getElementById("anrede");
const nachnameBox = document.getElementById("nachname");
const rufnummerBox = document.getElementById("rufnummer");
const emailadresseBox = document.getElementById("emailadresse");
const datepickerBox = document.getElementById("datepicker");
const platzhalterBox = document.getElementById("platzhalter");
const errorMsg = document.getElementById("errorMsg");

document.getElementById("btn").addEventListener("click", addRecord);

function addRecord(){
  // 先隐藏上一次的错误提示
  errorMsg.style.display = 'none';

  // 校验所有字段非空
  const allFields = [unternehmeneBox, anredeBox, nachnameBox, rufnummerBox, emailadresseBox, datepickerBox, platzhalterBox];
  const hasEmptyField = allFields.some(field => field.value.trim() === '');
  if (hasEmptyField) {
    errorMsg.style.display = 'block';
    return;
  }

  const data = {
    unternehmen: unternehmeneBox.value,
    anrede: anredeBox.value,
    nachname: nachnameBox.value,
    rufnummer: rufnummerBox.value,
    emailadresse: emailadresseBox.value,
    datepicker: datepickerBox.value,
    // 可选配置：如果需要统一存储为规范大小写格式，可替换为下行代码
    // platzhalter: platzhalterBox.value.toLowerCase() === 'vormittag' ? 'Vormittag' : 'Nachmittag'
    platzhalter: platzhalterBox.value
  };

  // 提交数据到Google Spreadsheet
  google.script.run.appenData(data);

  // 清空表单
  unternehmeneBox.value = "";
  anredeBox.value = "";
  nachnameBox.value = "";
  rufnummerBox.value = "";
  emailadresseBox.value = "";
  datepickerBox.value = "";
  platzhalterBox.value = "";
}
</script>

功能说明 #

• 提交前会自动检查全部字段是否有空白内容，存在未填项时直接中断提交，显示红色警告文本
• platzhalter字段支持任意大小写输入Vormittag/Nachmittag，无需限制格式；如果需要存入表格的内容为统一首字母大写的规范格式，可开启代码中注释的对应配置
• 提交成功后自动清空表单并隐藏错误提示，不影响下一次填写

内容的提问来源于stack exchange，提问作者Bob Hardball