如何设置SVG签名输入为表单提交必填项？

要实现表单提交前强制用户完成签名，需要通过状态跟踪+表单提交验证来实现，以下是具体的修改方案：

1. 完善HTML结构（整合到表单中） #

把签名区域放到<form>标签内，添加提交按钮和用于存储签名数据的隐藏输入框：

<form id="signatureForm">
  <svg id="sig_panel" viewBox="0 0 300 100">
     <rect id="r" width="100%" height="100%" fill="#ffa"/>
     <line x1="0" y1="80" x2="300" y2="80" stroke="#000000" 
        stroke-width="1" stroke-dasharray="3" 
        shape-rendering="crispEdges" pointer-events="none" />
     <path id="p" stroke="navy" stroke-width="2" fill="none" 
        pointer-events="none"/>
  </svg>
  <div class="flex">
    <button type="button" id="clear">Clear signature</button>
    <button type="submit">提交表单</button>
  </div>
  <!-- 隐藏输入框，用于存储签名路径数据 -->
  <input type="hidden" id="signatureData" name="signature">
</form>

2. 添加JavaScript逻辑（跟踪签名状态+验证提交） #

编写脚本处理签名绘制、状态标记和表单提交拦截：

const sigPanel = document.getElementById('sig_panel');
const path = document.getElementById('p');
const clearBtn = document.getElementById('clear');
const signatureForm = document.getElementById('signatureForm');
const signatureInput = document.getElementById('signatureData');
// 标记用户是否已完成签名
let isSigned = false;

// 签名绘制核心逻辑（兼容鼠标和触摸事件）
let isDrawing = false;
let currentPath = '';

function startDrawing(e) {
  e.preventDefault();
  isDrawing = true;
  const point = getEventPoint(e);
  currentPath = `M ${point.x} ${point.y}`;
}

function draw(e) {
  if (!isDrawing) return;
  e.preventDefault();
  const point = getEventPoint(e);
  currentPath += ` L ${point.x} ${point.y}`;
  path.setAttribute('d', currentPath);
  // 用户开始绘制即标记为已签名
  isSigned = true;
}

function endDrawing() {
  if (!isDrawing) return;
  isDrawing = false;
  // 将签名路径存入隐藏输入框，方便后端接收
  signatureInput.value = currentPath;
}

// 统一处理鼠标/触摸事件的坐标转换
function getEventPoint(e) {
  const rect = sigPanel.getBoundingClientRect();
  let x, y;
  if (e.type.includes('touch')) {
    x = e.touches[0].clientX - rect.left;
    y = e.touches[0].clientY - rect.top;
  } else {
    x = e.clientX - rect.left;
    y = e.clientY - rect.top;
  }
  // 转换为SVG viewBox的比例坐标
  const scaleX = sigPanel.viewBox.baseVal.width / rect.width;
  const scaleY = sigPanel.viewBox.baseVal.height / rect.height;
  return { x: x * scaleX, y: y * scaleY };
}

// 清除签名时重置状态
clearBtn.addEventListener('click', () => {
  path.setAttribute('d', '');
  currentPath = '';
  signatureInput.value = '';
  isSigned = false;
});

// 表单提交时验证签名状态
signatureForm.addEventListener('submit', (e) => {
  if (!isSigned) {
    e.preventDefault();
    alert('请先完成签名再提交表单');
    sigPanel.focus();
  }
});

// 绑定鼠标事件
sigPanel.addEventListener('mousedown', startDrawing);
sigPanel.addEventListener('mousemove', draw);
sigPanel.addEventListener('mouseup', endDrawing);
sigPanel.addEventListener('mouseleave', endDrawing);

// 绑定触摸事件（适配iPad等触控设备）
sigPanel.addEventListener('touchstart', startDrawing);
sigPanel.addEventListener('touchmove', draw);
sigPanel.addEventListener('touchend', endDrawing);
sigPanel.addEventListener('touchcancel', endDrawing);

3. 核心逻辑说明 #

• 状态标记：用isSigned变量跟踪用户是否完成签名，绘制时设为true，清除签名时重置为false。
• 提交拦截：在表单submit事件中检查isSigned状态，未签名则阻止提交并提示用户。
• 多端兼容：同时处理鼠标和触摸事件，适配PC和iPad等触控设备。
• 数据存储：通过隐藏输入框保存SVG路径数据，方便表单提交后后端接收签名信息。

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