Original article is posted here.
Utilizing JavaScript's "oninput" event is a bit better for most of my form value validations than what I was using previously (onchange). Here’s a quick rundown on how to make use of this feature.
(see attached gif)
Much like the method for adding the “placeholder” attribute, and similar to the "onchange" event, we’re going to need to use javascript to add the “oninput” event attribute to an element on body onload.
Here’s a snippet from a login form I’m working on (code found in body – onload). Note that this exact code relies on other code (such as CSS script) that is not included in this article. It's intended more as a starting point.
// declarations
var logfield = document.getElementById('LoginField');
var pwfield = document.getElementById('PasswordField');
//create and value placeholder and oninput attributes for textboxes
logfield.setAttribute('placeholder','Login Name/Email');
logfield.setAttribute('oninput','inputBoxRequired("LoginField")');
pwfield.setAttribute('placeholder','Password');
pwfield.setAttribute('oninput','inputBoxRequired("PasswordField")');
Where the second value in the setAttribute function is the function we want to run “oninput”. This function is placed in the “Script” section in the form editor.
Here’s my function, for reference:
function inputBoxRequired(compID) {
var checkElem = document.getElementById(compID);
if (checkElem.value == '') {
checkElem.className = 'gaInputBoxRequired';
}
else {
checkElem.className = 'gaInputBox aInputValid';
}
}
The fundamental difference between “onchange” and “oninput” is that “onchange” fires when an element loses focus. “oninput” fires whenever the element receives input, which means this works for pasting values in as well, even if pasting using the right-click context menu. There are some caveats, which can be found at the link below.