As I don’t have a lot of experience with Javascript outside of Workflow, I was, prior to yesterday, unfamiliar with the “oninput” function.  As it turns out, it’s a bit better for most of the value validations than what I was using previously (onchange).  Here’s a quick rundown on how to make use of this feature.

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).

// 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.

Further Reading

Javascript oninput Event