2

I get this error:

Uncaught TypeError: required is not a function at HTMLInputElement.onblur (index.html:20)

Whenever I try to run this HTML code: 

<input type="text" name="nbreAdultes" id="nbreAdultes" autofocus onblur= "return required(document.getElementById('nbreAdultes'));" />

My script:

function required(inputtx) {
    if (inputtx.value == "") { 
        myError.innerHTML = "Input is required";    
        return false; 
    }   
    return true; 
}
Cœur
  • 37,241
  • 25
  • 195
  • 267
Riley Christian
  • 149
  • 1
  • 13

3 Answers3

2

Changing the function name to something else, like require() will work:

function require(inputtx) {
  console.log('Success');
}
<input type="text" name="nbreAdultes" id="nbreAdultes" autofocus onblur="return require(document.getElementById('nbreAdultes'));" />

When you use required as an identifier, it's interpreted as the required property of the element instead of the name of your function:

<input type="text" onblur="console.log(required)" /> <!-- logs "false" -->
<input type="text" onblur="console.log(required)" required /> <!-- logs "true" -->

The reason for this is that event handlers defined as attributes execute in a different scope than normal functions. To resolve a variable x defined in a normal function, the runtime will first look for a local property named x, and if that cannot be found, it will try to find a global property of the same name.

For event handler content attributes in HTML, the scope chain is different. After trying to resolve the identifier locally (in the event handler itself), JavaScript will try to resolve it as a property of the element on which the event handler is defined. If it can't be resolved there, it will continue up the hierarchy until arriving at the global Window object.

So, in summary, the behavior you're witnessing occurs because your required() function is defined higher up the scope chain than the element's required property.

Robby Cornelissen
  • 91,784
  • 22
  • 134
  • 156
0

When using inline HTML event attributes (onblur, onclick, etc), the code that is supplied as the code to run when the event occurs runs in the context of the element that triggered the event. In such cases, required conflicts with the HTML required attribute. Using a different name for the function works as it should.

function req(inputtx) {
    if (inputtx.value == "") { 
        myError.innerHTML = "Input is required";    
        return false; 
    }   
    return true; 
}
<input type="text" name="nbreAdultes" id="nbreAdultes" autofocus onblur= "return req(document.getElementById('nbreAdultes'));" >
<span id="myError"></span>

To avoid this kind of issue in the future (and for a whole bunch of other reasons), you should not be using inline HTML event attributes (onclick, onsubmit, etc.) in the first place. That is how event handlers were registered 20+ years ago. Today, we have modern standards and best practices. Use .addEventListener() instead and then you can call the function any valid identifier you like.

// First, get a reference to the element that will fire the event
var input = document.getElementById("nbreAdultes");

// Then, register an event callback function
input.addEventListener("blur", require);

// No need to pass a reference to the element into the function.
// It will automatically be bound to "this".
// Also, no need for return true or return false.
function require() {
    if (this.value == "") { 
        myError.innerHTML = "Input is required";    
    }   
}
<input type="text" name="nbreAdultes" id="nbreAdultes" autofocus>
<span id="myError"></span>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

I think there is a predifined required function in HTML5 . i changed the name of the function to req and it working. Thanks to everyone who replied

Riley Christian
  • 149
  • 1
  • 13