I have 3 inputs and a submit button. The submit is disabled by default. once all the inputs have been filled out correctly it removes the disabled feature. However the listener on the last input is the listen for the unlock so if a user fills that input out first then the phone and email it wont unlock as the license is the key up feature..
Is there a different event I can use? I cant use onclick submit button cuz its disabled for the listener right?
How can I make a listener that will wait for the 3 statement to be true before removing disabled attribute from submit button other that keyup on the license listener ?
Also im noticing that if someone copy's info in there it does not register and I have tried other events and this one works the best but you have to delete the last char and re enter the last char to get it to work.
Anyone know how to fix that whats going on there?
<div id="formwrap">
<div id="ftx1">EMAIL: <span id="reqqq">Is Required</span></div>
<input id="email" type="email" name="email" size="" maxLength="64" placeholder="" title="Please provide only a email address">
</div>
<div id="formwrap">
<div id="ftx1">PHONE NUMBER: <span id="req">Is Required</span></div>
<input type="tel" id="phone" name="phone" class="" maxlength="17" value="" placeholder="PHONE NUMBER" title="Phone Number Format:1(614)000-0000" />
</div>
<div id="formwrap">
<div id="ftx1">DRIVERS LICENSE #: <span id="reqq">Is Required</span></div>
<input id="licno" class="test" name="mainddn" type="text" value="" placeholder="Ex. OH123456" maxlength="8">
<select class="test" id="element_5" name="mainstate">
<option value="OH">Ohio</option>
</select>
</div>
and the javascript
document.getElementById("phone").addEventListener("keyup", function() {
var phoneInput = document.getElementById('phone').value;
var phoneno = /^\(?([1]{1})?[(-. )]?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if (phoneInput.match(phoneno)) {
document.getElementById("req").innerHTML = "Thank You";
$phoneunlock = true; //this cant be seen unless I add it below
} else {
document.getElementById("req").innerHTML = "Amost Done";
$phoneunlock = false; //this cant be seen unless I add it below
}
});
document.getElementById("licno").addEventListener("keyup", function() {
var licInput = document.getElementById('licno').value;
var licpat = /^[a-zA-Z]{2}[0-9]{6}$/g;
if (licInput.match(licpat)) {
document.getElementById("reqq").innerHTML = "Thank You";
$licnounlock = true;
} else {
document.getElementById("reqq").innerHTML = "Amost Done";
$licnounlock = false;
}
});
document.getElementById("email").addEventListener("keyup", function() {
var emailInput = document.getElementById('email').value;
var emailpat = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;
if (emailInput.match(emailpat)) {
document.getElementById("reqqq").innerHTML = "Thank You";
$emailunlock = true;
} else {
document.getElementById("reqqq").innerHTML = "Amost Done";
$emailunlock = false;
}
});
document.getElementById("licno").addEventListener("keyup", function() {
var licInput = document.getElementById('licno').value;
if ($phoneunlock && $emailunlock && $licnounlock) {
//yes are true
document.getElementById('submit').removeAttribute("disabled");
} else {
//no are not true
document.getElementById('submit').setAttribute("disabled", null);
}
});
It can be done in many ways, here I am sharing one of them.
To address your first issue with the listener not waiting for all three inputs to be filled out correctly before unlocking the submit button, you can use the input event instead of keyup. The input event will trigger whenever the value of the input field changes, including pasting text via copy-paste.
Regarding your second issue where pasting information doesn't register immediately, you can use the input event for all input fields, which should capture such changes in real-time.
Check the modified code,
<div id="formwrap">
<div id="ftx1">EMAIL: <span id="reqqq">Is Required</span></div>
<input id="email" type="email" name="email" size="" maxLength="64"
placeholder=""
title="Please provide only a email address">
</div>
<div id="formwrap">
<div id="ftx1">PHONE NUMBER: <span id="req">Is Required</span></div>
<input type="tel" id="phone" name="phone" class="" maxlength="17" value="" placeholder="PHONE NUMBER" title="Phone Number Format:1(614)000-0000"/>
</div>
<div id="formwrap">
<div id="ftx1">DRIVERS LICENSE #: <span id="reqq">Is Required</span></div>
<input id="licno" class="test" name="mainddn" type="text" value="" placeholder="Ex. OH123456" maxlength="8">
<select class="test" id="element_5" name="mainstate">
<option value="OH">Ohio</option>
</select>
</div>
<button id="submit" disabled>Submit</button>
<script>
var $phoneunlock = false;
var $emailunlock = false;
var $licnounlock = false;
document.getElementById("phone").addEventListener("input", function() {
var phoneInput = document.getElementById('phone').value;
var phoneno = /^\(?([1]{1})?[(-. )]?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
if(phoneInput.match(phoneno)) {
document.getElementById("req").innerHTML = "Thank You";
$phoneunlock = true;
} else {
document.getElementById("req").innerHTML = "Almost Done";
$phoneunlock = false;
}
unlockSubmit();
});
document.getElementById("licno").addEventListener("input", function() {
var licInput = document.getElementById('licno').value;
var licpat = /^[a-zA-Z]{2}[0-9]{6}$/g;
if(licInput.match(licpat)) {
document.getElementById("reqq").innerHTML = "Thank You";
$licnounlock = true;
} else {
document.getElementById("reqq").innerHTML = "Almost Done";
$licnounlock = false;
}
unlockSubmit();
});
document.getElementById("email").addEventListener("input", function() {
var emailInput = document.getElementById('email').value;
var emailpat = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;
if(emailInput.match(emailpat)) {
document.getElementById("reqqq").innerHTML = "Thank You";
$emailunlock = true;
} else {
document.getElementById("reqqq").innerHTML = "Almost Done";
$emailunlock = false;
}
unlockSubmit();
});
function unlockSubmit() {
if ($phoneunlock && $emailunlock && $licnounlock) {
document.getElementById('submit').removeAttribute("disabled");
} else {
document.getElementById('submit').setAttribute("disabled", "disabled");
}
}
</script>
Let me know it works!