Cannot find my javascript function

Question 1

javascript beginner

I am getting the following error but cannot see what is wrong with code. I have done similar in previous workshops and they are ok? I have the "required" function in workshop12.js and want to use it to check that input is not empty. I took code from w3schools http://www.w3schools.com/js/js_validation.asp

enter image description here

js

$( document ).ready(function() {
 // Check that input is not empty
 function required() {
 var x = document.forms["loginForm"]["inputName"].value;
 document.write (x);
 if(x = " ") {
 alert("Please input a value");
 return false;
 }
 else {
 alert("Correct");
 return true; 
 }
 }
});

html

<body>
 <div class="container">
 <div class="row">
 <div class="col-sm-offset-2 col-sm-10 col-md-offset-3 col-md-6 col-lg-offset-3 col-lg-6">
 <h2>Login form</h2>
 </div>
 <div class="clearfix visible-md clearfix visible-lg"></div>
 </div>
 <form name="loginForm" class="form-horizontal">
 <div class="form-group">
 <label for="inputName" class="col-sm-2 col-md-2 col-lg-3 control-label">Name</label>
 <div class="col-sm-10 col-md-8 col-lg-6">
 <input type="text" class="form-control" name="inputName" "id="inputName" placeholder="Name" onclick="required()">
 <div class="col-md-2 col-lg-3"></div>
 </div>
 </div>
 <div class="form-group">
 <label for="inputEmail" class="col-sm-2 col-md-2 col-lg-3 control-label">Email</label>
 <div class="col-sm-10 col-md-8 col-lg-6">
 <input type="email" class="form-control" id="inputEmail" placeholder="Email">
 <div class="col-md-2 col-lg-3"></div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-offset-2 col-sm-10 col-md-offset-3 col-md-9 col-lg-offset-3 col-lg-9">
 <button type="submit" class="btn btn-primary">Submit</button>
 </div>
 </div>
 </form>
 </div>
<script type="text/javascript" src="js/workshop12.js"></script> 
</body>

Question 2

Looks like you're also using jQuery. Did you remember to include that as well?

Question 3

you are hiding it inside the scope of the ready function.

Question 4

@j08691 yes have included jquery- <script src="ajax.googleapis.com/ajax/libs/jquery/1.11.1/…>

Question 5

if(x == " ") //use double equals

Question 6

Oops I honestly did have double equals

Question 7

Your function is in-scope only within the ready function, it is not available outside that scope.

Your element is looking for that function in global scope. Move the function outside the ready function as demonstrated below:

$( document ).ready(function() {
 ... whatever
});
// Check that input is not empty
function required() {
 var x = document.forms["loginForm"]["inputName"].value;
 document.write (x);
 if(x = " ") {
 alert("Please input a value");
 return false;
 }
 else {
 alert("Correct");
 return true; 
 }
}

Question 8

I'd also note that there might be something already on the global scope named required. In chrome when you call an undefined it logs required() VM244:2 Uncaught ReferenceError: required is not defined and in firefox required() ReferenceError: required is not defined

Question 9

@ Daniel A White & Jamiec. I have moved it as recommended but still getting same error

Question 10

@Austin. Cheers. I changed the name and that solved it.

Question 11

Thanks everyone for your help.Very much appreciated

Question 12

There's an error! if (x = " ") will never work. See my answer

Question 13

You have a scoping problem.

There are different kind of scopes within Javascript.

Global Scope: a variable / function that is scoped global is accessible in each function. Normally you don't want to scope anything global, because in times where everyone uses different frameworks, you never know who writes a variable into the global scope.

Example for a global scope:

window.bla = "I am global scoped";
var globalVar = "I am also global scoped";
function accessGlobal(){
 console.log (globalVar)
}

Now there's also a function scope: variables declared within a function are locally scoped and are not accessible from outside (If you are more like the Java guys, think of it as a private variable)

function private(){
 var privateVar = "I am a private var";
}

Your required function is NOT globally accessible due to the fact that you used jQuery's onReady function.

See this:

$( document ).ready(function() {

You see the function? Because of this, your required function is function scoped.

In your case, I would recommend the Module Pattern to prevent polluting the global scope.

Try this:

var myModule = {};
myModule.required = function(){
var x = document.forms["loginForm"]["inputName"].value;
 document.write (x);
 if(x.length === 0) {
 alert("Please input a value");
 return false;
 }
 else {
 alert("Correct");
 return true; 
 }
}

and in your HTML code, use replace required() with myModule.required();

By the way, in your required function, you made another mistake. You tried to check wether a variable is empty like this:

if (x = " ")

In Javascript you need to check variables using == or better ===. (I've changed this in your code)

The difference between == and === is simply that === also checks for the correct type.

E.g.

"1" == 1 //true
"1" === 1//false because string and number are different

Jamiec 136k15 gold badges143 silver badges202 bronze badges · Accepted Answer · 2015-03-09 17:30:22Z

4

Your function is in-scope only within the ready function, it is not available outside that scope.

Your element is looking for that function in global scope. Move the function outside the ready function as demonstrated below:

$( document ).ready(function() {
 ... whatever
});
// Check that input is not empty
function required() {
 var x = document.forms["loginForm"]["inputName"].value;
 document.write (x);
 if(x = " ") {
 alert("Please input a value");
 return false;
 }
 else {
 alert("Correct");
 return true; 
 }
}

Share

Improve this answer

answered Mar 9, 2015 at 17:30

Jamiec's user avatar

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2033671

user2033671 Over a year ago

I'd also note that there might be something already on the global scope named required. In chrome when you call an undefined it logs required() VM244:2 Uncaught ReferenceError: required is not defined and in firefox required() ReferenceError: required is not defined

2015年03月09日T17:36:06.117Z+00:00

Pamela Keogh

Pamela Keogh Over a year ago

@ Daniel A White & Jamiec. I have moved it as recommended but still getting same error

2015年03月09日T17:37:44.82Z+00:00

Pamela Keogh

Pamela Keogh Over a year ago

@Austin. Cheers. I changed the name and that solved it.

2015年03月09日T17:40:24.207Z+00:00

Pamela Keogh

Pamela Keogh Over a year ago

Thanks everyone for your help.Very much appreciated

2015年03月09日T17:40:42.963Z+00:00

Christian Kellner

Christian Kellner Over a year ago

There's an error! if (x = " ") will never work. See my answer

2015年03月09日T17:44:52.043Z+00:00

CollectivesTM on Stack Overflow

Cannot find my javascript function

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related