JS表单输入校验后无法提交至FormSubmit.com如何解决

点击提交无响应是两处代码逻辑错误导致的：

• 你在submit事件回调第一行就调用了e.preventDefault()，直接拦截了表单默认的提交行为，但校验逻辑执行完成后，既没有判断所有字段是否校验通过，也没有在校验全部通过时手动触发表单提交，所以无论输入内容是否合规，都不会向第三方表单服务发送请求。
• 你的HTML结构中每个.form-control容器下都没有定义<small>标签，但setErrorFor函数里直接执行formControl.querySelector('small')获取元素，第一次触发校验错误时会拿到null值，后续给null.innerText赋值会直接抛出JS运行时错误，阻断所有后续逻辑执行。

1. 补全HTML结构，修复不规范写法 #

给每个.form-control容器加上用于展示错误文案的<small>标签，同时删除重复的同名id（全局id必须唯一，原代码中多个div重复使用id="form-control"不符合HTML规范）：

<form target="_blank" action="https://formsubmit.co/myemail@gmail.com" method="POST" id="form">
  <input type="hidden" name="_subject" value="New submission">

  <div class="form-control">
    <input type="text" name="name" placeholder="Your Name" id="name">
    <small></small>
  </div>

  <div class="form-control">
    <input type="email" name="email" placeholder="Email Address" id="email">
    <small></small>
  </div>

  <div class="form-control">
    <input type="tel" name="phone" placeholder="Phone Number" id="phone">
    <small></small>
  </div>

  <div class="form-control">
    <textarea name="message" rows="4" placeholder="Type your message here...." id="message"></textarea>
    <small></small>
  </div>

  <button type="submit">SEND</button>
</form>

2. 调整JS校验逻辑，增加提交触发判断 #

修改checkInputs函数让它返回最终的校验结果，所有字段校验通过时手动调用表单原生submit()方法提交数据（原生submit方法不会重复触发绑定的submit事件监听器，不会出现死循环），同时补全校验状态切换时的提示清空逻辑：

const form = document.getElementById('form');
const name = document.getElementById('name');
const email = document.getElementById('email');
const phone = document.getElementById('phone');
const message = document.getElementById('message');


form.addEventListener('submit', (e) => {
  e.preventDefault();
  const isAllValid = checkInputs();
  if (isAllValid) {
    form.submit();
  }
});


function checkInputs() {
  let isValid = true;
  // 获取输入值，统一做去空格处理
  const nameValue = name.value.trim();
  const emailValue = email.value.trim();
  const phoneValue = phone.value.trim();
  const messageValue = message.value.trim();

  if (nameValue === '') {
    setErrorFor(name, 'Name field cannot be blank');
    isValid = false;
  } else {
    setSuccessFor(name);
  };

  if (emailValue === '') {
    setErrorFor(email, 'Email field cannot be blank');
    isValid = false;
  } else if (!isEmail(emailValue)) {
      setErrorFor(email, 'Invalid Email');
      isValid = false;
  } else {
      setSuccessFor(email);
  };

  if (phoneValue === '') {
    setErrorFor(phone, 'Phone number field cannot be blank');
    isValid = false;
  } else if (!isPhone(phoneValue)) {
      setErrorFor(phone, 'Invalid Phone Number');
      isValid = false;
  } else {
      setSuccessFor(phone);
  };

  if (messageValue === '') {
    setErrorFor(message, 'Message field cannot be blank');
    isValid = false;
  } else {
      setSuccessFor(message);
  };

  return isValid;
};


function setErrorFor(input, message) {
  const formControl = input.parentElement;
  const small = formControl.querySelector('small');
  small.innerText = message;
  formControl.className = 'form-control error';
};


function setSuccessFor(input) {
  const formControl = input.parentElement;
  const small = formControl.querySelector('small');
  // 校验通过时清空历史错误提示
  small.innerText = '';
  formControl.className = 'form-control success';
};


function isEmail(email) {
  return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
};


function isPhone(phone) {
  return /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/im.test(phone);
};

• 不要在submit事件回调中无条件调用e.preventDefault()，如果拦截了默认提交行为，必须自行判断时机手动触发提交。
• 编写DOM操作逻辑前要确认目标元素存在，避免给null值访问属性导致JS报错，阻断整个页面脚本执行。

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