¿Cómo verificar la validación del patrón de campo de entrada en if else condition javascript? para mostrar mensaje div para válido e inválido en botón enviar en tipo para validación de patrón?
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 = "block"; document.getElementById("sms_ntvalidate").style.display = "none"; } } <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 onkeyup="myFunction(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 /> <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>Su patrón es un número que puede usar js personalizado para esta validación como document.getElementById("smsno").value.forEach((value)=>{ if(value >== 0 && value <== 9) { // Condition} else { //Wrong Pattern condition } );
El forEach verifica cada elemento en la entrada