WooCommerce结账表单JS验证执行第一个.remove()后函数退出如何解决

函数执行到第一个.remove()就直接退出的核心原因是：当对应字段的错误提示元素不存在时，document.getElementById()会返回null，此时直接调用.remove()方法会抛出JavaScript运行时异常，直接中断整个函数的执行，后续的姓氏验证等逻辑自然无法正常运行。

只需要在每次执行移除操作前，先判断对应的错误提示元素是否真实存在，存在时再执行移除即可，修改后的完整代码如下：

function myFunction() { 
  // 名字验证
  let n = document.getElementById("billing_first_name").value;
  if (n.length < 3 || n == '') {
    var n1 = document.getElementById('billing_first_name'); 
    if(!document.getElementById("sp_billing_first_name_field")){  
      n1.insertAdjacentHTML('afterend', '<p class="sp-error-notice" id="sp_billing_first_name_field"> This is test</p>');           
    }     
  } else {
    // 先判断元素存在再移除
    const firstNameErr = document.getElementById('sp_billing_first_name_field')
    if (firstNameErr) firstNameErr.remove()
  }

  // 姓氏验证
  let n2 = document.getElementById("billing_last_name").value;
  if (n2.length < 3 || n2 == '') {
    var n21 = document.getElementById('billing_last_name');
    if(!document.getElementById("sp_billing_last_name_field")){  
      n21.insertAdjacentHTML('afterend', '<p class="sp-error-notice" id="sp_billing_last_name_field">お名前（姓・名）は必ず入力してください。</p>');  
    }
  } else {
    // 先判断元素存在再移除
    const lastNameErr = document.getElementById('sp_billing_last_name_field')
    if (lastNameErr) lastNameErr.remove()
  }
}

如果后续还要新增更多字段的验证，可以把字段验证的逻辑抽成公共函数，避免重复代码，降低维护成本。

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