HTML Input element (field.validate) is always undefined

Question

I'm having two text boxes defined with an onblur event. On pressing tab, whenever the onblur event is get called field.validate is always undefined.

At the same time, when I'm trying to print field.name or field.getAttribute("validate") it does return the proper value.

<input width="100%" type="text" name="NV_active" id="NV_active" value="5"  onblur="return doValidate(this);" validate=" return validateValueField(document.getElementById('NV_active'), 'Active' );">

<input width="100%" type="text" name="NV_throttled" id="NV_throttled" value="15"  onblur="return doValidate(this);" validate=" return validateValueField(document.getElementById('NV_throttled'), 'Throttled' );">

function doValidate(field) {
    console.log("field.validate- " + field.validate); //always printing undefined
    console.log("getAttr- " + field.getAttribute("validate")); //return validateValueField(document.getElementById('NV_active'), 'Active' );
    if (field.validate != null) {
        var f = new Function(field.validate);
        return f();
    }
    return true;
}

function validateValueField(field, displayName)
{
  if ((field.name == 'NV_activePollingInterval') || (field.name == 'NV_throttledPollingInterval') )
    {
        //some validation code and error alert message
    }
}

I am not able to figure it out why it's always undefined.

Answer 1

Using field.getAttribute('attr') you retrieve the value of the DOM element's attribute.

Using field.attr you retrieve the property attr of the DOM element and they are not always the same thing.

I recommend you to check this SO question: getAttribute() versus Element object properties? and the accepted answer, it should help you.