如何实现联系表单提交时空输入框抖动且边框变红的效果

1. 新增CSS样式 #

在原有CSS代码末尾追加以下内容，定义抖动动画和错误状态样式：

/* 输入框抖动动画 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* 输入框错误状态 */
input.error, textarea.error {
  border-color: #ff0000 !important;
  animation: shake 0.3s ease-in-out;
}

2. 添加表单验证逻辑 #

在页面</body>闭合标签前插入以下JavaScript代码，实现提交校验和效果触发：

const form = document.forms['myform'];
const requiredFields = form.querySelectorAll('[required]');

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  let hasInvalid = false;
  // 先清空所有旧的错误状态
  requiredFields.forEach(field => field.classList.remove('error'));

  requiredFields.forEach(field => {
    // 校验字段是否为空
    if (!field.value.trim()) {
      hasInvalid = true;
      // 强制浏览器重绘，确保每次提交都能触发抖动动画
      void field.offsetWidth;
      field.classList.add('error');
    }
  });

  // 存在未填写字段时阻止表单提交
  if (hasInvalid) {
    e.preventDefault();
  }
});

// 用户输入内容时自动清除错误状态
requiredFields.forEach(field => {
  field.addEventListener('input', function() {
    this.classList.remove('error');
  });
});

实现说明 #

• 抖动动画使用transform属性实现，仅作用于输入框自身，不会触发父元素布局变动，不会导致整个表单晃动
• 可选优化：你当前First Name输入框的id为first name（带空格），和对应label的for属性firstname不匹配，建议修改为<input type="text" id="firstname" name="firstname" placeholder="Your firstname.." required>，保证点击label可以自动聚焦输入框

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