在 javascript 中执行第一个 .remove() 条件后函数退出

Question

我正在尝试仅使用 javascript 在前端验证我的 woocommerce 结帐表单。验证正确执行，但问题是函数在第一个 .remove() 语句后退出。

我想在第一个remove() 条件执行后执行第二个、第三个remove() 条件（我的意思是所有的remove 条件都应该运行）。谁能帮忙？？附上下面的代码。

function myFunction() { 

  // for name
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 {
         document.getElementById('sp_billing_first_name_field').remove() ; 
    
          }


  // Last name
  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 {

    document.getElementById('sp_billing_last_name_field').remove();
    
  }
}

Answer 1

您的主要问题是您尝试删除一个元素而不检查它是否存在。

document.getElementById('sp_billing_last_name_field').remove();

当 sp_billing_last_name_field 不存在时，

将失败并出现错误。这个比较好：

let hint = document.getElementById('sp_billing_last_name_field');
if (hint) hint.remove();

但是你也有代码重复。让我们创建一个可以检查任何输入字段并显示消息的函数：

function checkField(fieldId, condition, message) {
  document.getElementById(fieldId).addEventListener("input", function () {
    let isInvalid = condition(this.value);
    let hint = this.nextElementSibling;
    if (hint && !hint.classList.contains("sp-error-notice")) hint = null;
    if (!hint && isInvalid) {
      this.insertAdjacentHTML('afterend', '<p class="sp-error-notice">' + message + '</p>');
    } else if (hint && !isInvalid) {
      hint.remove();
    }
  });
}

checkField("billing_first_name", v => v.length < 3, "ダメよ");
checkField("billing_last_name", v => v.length < 3, "お名前（姓・名）は必ず入力してください。");

p.sp-error-notice {
  display: inline-block;
  color: red; margin: 0 0 0 10px;
}

<div><input id="billing_first_name"></div>
<div><input id="billing_last_name"></div>

在 javascript 中执行第一个 .remove() 条件后函数退出

Function exits after executing the first .remove() condition in javascript

javascript

validation

jquery

loops

woocommerce