Estoy tratando de validar mi formulario de pago de woocommerce en la interfaz solo con javascript. La validación se ejecuta correctamente, pero el problema es que se llama a la función cada vez que elimino el foco del campo de entrada (he usado el evento onblur). El div se crea varias veces. Quiero que se muestre solo una vez, de lo contrario, debería eliminarse. ¿¿Puede alguien sugerir una solución?? Adjuntando el código y SS a continuación.
<h3>my custom heading</h3> <p class="form-row form-row validate-required"> <input type="billing_first_name">... </p> <p class="sp-error-notice" id="sp_billing_first_name_field"> </p> 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', '<p class="sp-error-notice" id="sp_billing_first_name_field">This is a test.</p>'); } else { var n1 = document.getElementById("sp_billing_first_name_field"); n1.remove(); } }Simplemente puede verificar la existencia de la etiqueta p antes de agregarla
if(!document.getElementById("sp_billing_first_name_field")){ n1.insertAdjacentHTML('afterend', '<p class="sp-error-notice" id="sp_billing_first_name_field"></p>'); }No es necesario poner else , porque el elemento <p class="sp-error-notice" id="sp_billing_first_name_field">This is a test.</p> nunca se creó, no se puede remove() en otro lugar condición. Además, no hay necesidad de poner n == '' en la condición que su primera condición es suficiente y satisface n == '' .
Aquí lo que hice fue verificar si el elemento fue creado, si ya existe, regresa, lo que provoca la repetición.
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', '<p class="sp-error-notice" id="sp_billing_first_name_field">Error.</p>'); } } myFunction() myFunction() myFunction() function myFunction2() { if(document.getElementById('sp_billing_first_name_field')){ document.getElementById('sp_billing_first_name_field').style.display = 'none' } } <input type="text" id="billing_first_name" onclick='myFunction2()'>