Estoy tratando de realizar dos eventos para una función de JavaScript, 1) para verificar la validación en la función de envío y 2) para verificar la validación del patrón en el campo de entrada, solo mostrando el mensaje de bloque no válido válido. Mensaje no válido tanto para el envío como para el patrón y válido solo para el patrón. Entonces, ¿cómo puedo hacerlo?
<div class="form-row"> <div class="form-group col-md-6 smsForm"> <label for="contact1">SMS No.<span style="color:#ff0000">*</span></label> <input type="tel" class="form-control" name="smsno" id="smsno" placeholder="SMS No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required onblur="myFunction1(this)" /> <div class="custm-valid" id="sms_validate" style="display:none;">Valid.</div> <div class="custm-invalid" id="sms_ntvalidate" style="display:none;">Please enter valid contact no.</div> </div> <div class="form-group col-md-6 whatsappForm"> <label for="contact2">WhatsApp No.<span style="color:#ff0000">*</span></label> <input type="text" class="form-control" name="whtspno" id="whtspno" placeholder="WhatsApp No." pattern="^(00|\+)[1-9]{1}([0-9][\s]*){9,16}$" required onblur="myFunction1(this)" /> <div class="custm-valid" id="whts_validate"style="display:none;">Valid.</div> <div class="custm-invalid" id="whts_ntvalidate" style="display:none;">Please enter valid contact no.</div> </div> </div>Agregar
código javascript:
function myFunction(element){ if(document.getElementById("smsno").value.length == 0) { document.getElementById("sms_ntvalidate").style.display = "block"; document.getElementById("sms_validate").style.display = "none"; } else{ document.getElementById("sms_validate").style.display = "none"; document.getElementById("sms_ntvalidate").style.display = "none"; } }Tu puedes hacer
document.addEventListener("load", function() { document.querySelectorAll("input").forEach(function(elem) { elem.addEventListener("blur", myFunction); }); document.querySelector("form").addEventListener("submit", myFunction); }