I am trying to perform two events is for one JavaScript function , 1) for check validation on submit function and 2) for check pattern validation on input field , just showing message valid invalid block. Invalid message for both submit and pattern and valid is only for pattern. So How can I do it?
<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>
Add
javascript Code :
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";
}
}
You can do
document.addEventListener("load", function() {
document.querySelectorAll("input").forEach(function(elem) {
elem.addEventListener("blur", myFunction);
});
document.querySelector("form").addEventListener("submit", myFunction);
}