How to check input field pattern validation on if else condition javascript? to show message div for valid and Invalid on button submit on type for pattern validation?
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>Your pattern is number you can use custom js for thise validation like
document.getElementById("smsno").value.forEach((value)=>{ if(value >== 0 && value <== 9) { // Condition} else { //Wrong Pattern condition } );
The forEach checkes the every single element on input