我可以从HTML元素获取到已经存在的JS元素

Question

Background

I have a form with many text inputs ( <input type="text" /> ). On pageload, I loop through the form and create a JS object variable for each one, that holds methods such as validate, and properties such as original value, current formatted value, validation requirements, etc:

field = new Field(wrapperElements[i]);

When an input has the blur event fired, I run validation on that field. I do this so that I can run my validation as the user is working through the form, rather than wait until the very end when the form is submitted.

I then cache the validity result in the Field object. When the user submits the form, I don't have to validate every field, I just have to check the already calculated validity, which improves speed at the end.

---

Problem

The user edits only one field, the cursor is still in that field, and the user hits enter. This fires the form's submit before firing the field's blur event. The form tries to submit without validating the edited field.

I know that I could just force validate all fields on submit , but that seems inelegant to me, and seems like wasted calculation. I just need to force validate the currently focused element, if that element is an input.

---

Part Solution

I've tested out document.activeElement , and that works. However, I can't figure out how to get the already existing JS variable that is associated with the input, from the node that document.activeElement returns.

---

Specific Question

If I have an HTML element, and I create a JS variable with it as such...

<input type="text" value="My input!" id="mainInput" />
---
var field = document.getElementById('mainInput');

... how can I get that field variable just from knowing returning the node again, separately, via document.activeElement ?

Answer 1

Javascript lets you compare to HTMLElement variables with an == or === comparator. So you could loop through your stored variables, and compare them to document.activeElement .

...
fields[i] = form.children[i]
...

for ( ... ) {
    if ( fields[i] == document.activeElement) {
        // force validation of fields[i]
    }
}

This will check the active element against your stored elements. One potential issue here is performance. If you have a large number of elements, it might take a bit to loop through them.

Another option if you are super worried about that is during page load, add a data attribute to your element that is an integer, that you can reference the stored variable with.

...
fields[i] = form.children[i]
fields[i].dataset.interator = i;
...


var iterator = document.activeElement.dataset.iterator;
// force validation of fields[iterator];

This avoids the loop, and should take just a bit less time. If you have less than 50 fields though, it shouldn't be noticeable either way.