How to add the adjacentHTML text only once onblur

Question

I am trying to validate my woocommerce chekout form on the frontend only with javascript. The valdation executes correctly but the problem is that the function gets called everytime I remove the focus from the input field (I have used onblur event). The div gets created multiple times. I want to have it displayed only one time else it should be removed. Can anyone suggest a solution?? Attaching the code and SS below.

 my custom heading
 
     ...

function myFunction() { 
  // for name
let n = document.getElementById("billing_first_name").value;
 
// let name_text;
  if ( n.length < 3 || n == '' ) {
    var n1 = document.getElementById('billing_first_name'); 
    n1.insertAdjacentHTML('afterend', 'This is a test.');     
  }

  else {
     var n1 = document.getElementById("sp_billing_first_name_field");
         n1.remove(); 
       }
}

The P tag gets created multiple times

user_1109657 · Answer

You can simply check the existence of the p tag before adding it

    if(!document.getElementById("sp_billing_first_name_field")){  
         n1.insertAdjacentHTML('afterend', '');     
    }

user_6631550 · Answer

There is no need to put else, because the element

This is a test.

was never created it can't remove() it in else condition. Also there is no need to put n == '' in the condition your first condition is enough and satisfies n == ''.

Here what I did is to check whether the element was created if that already exists it returns which causes repetition.

function myFunction() { 
  // for name
let n = document.getElementById("billing_first_name").value;  
// let name_text;
if(document.getElementById("billing_first_name").nextSibling.nodeName == 'P'){
return
}
  if ( n.length < 3 ) {
    var n1 = document.getElementById('billing_first_name'); 
    n1.insertAdjacentHTML('afterend', 'Error.');     
  }
}
myFunction()
myFunction()
myFunction()

function myFunction2() {
if(document.getElementById('sp_billing_first_name_field')){
  document.getElementById('sp_billing_first_name_field').style.display = 'none'
  }
}

How to add the adjacentHTML text only once onblur

2 Answers