CODEWITHSUNDEEP
javascripthtml
Pamela Keogh
Pamela Keogh

Reputation: 133

Cannot find my javascript function

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>

Upvotes: 0

Views: 229

Answers (2)

Christian
Christian

Reputation: 7429

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

Upvotes: 2

Jamiec
Jamiec

Reputation: 136134

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;    
    }
}

Upvotes: 4

Related Questions