"Uncaught ReferenceError: fail is not defined." Why is this happening?

I am in the process of making a dynamic Signup form.

The form has been created and various functions for validating the entries have been written.

However, the variable I have created for returning an error message on failure of vaildation has come up in the javascript console as not being defined.

I've used strict methods and have stated in my globals declaration that I will be defining this variable within the following code.

What I'm trying to do is use javascript to validate the entries within the form and prompt the user to correct any errors before the form is submitted to the database.

The error code returned by the javascript console is as follows: Uncaught ReferenceError: fail is not defined. Line 5 validate.js

I've attached the code for the HTML form and the validation.js file, I hope I've explained this in a way that can be clearly understood.

Here is the code for validation.html:

<html>
<head>
<title>An Example Form</title>
<style type="text/css">
.signup {
    border: 1px solid #999999;
    font: normal 14px helvetica; color: #444444;
}
</style>
<script language="javascript" type="text/javascript" src="validate.js"></script>
</head>
<body>
<table class="signup" cellpadding="2" cellspacing="5" bgcolor="#eeeeee">
<th colspan="2" align="center">Signup Form</th>
<form method="post" action="adduser.php" onSubmit="validateForm(this)">
<tr>
    <td>Forename</td>
    <td><input type="text" maxlength="32" name="forename"/></td>
</tr>
<tr>
<td>Surname</td>
<td><input type="text" maxlength="32" name="surname"/></td>
</tr>
<tr>
<td>Username</td>
<td><input type="text" maxlength="16" name="username"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="text" maxlength="12" name="password"/></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" maxlength="2" name="age"/></td>
</tr>
<tr>
<td>E-Mail</td>
<td><input type="text" maxlength="64" name="email"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Signup"/></td>
</tr>
</form>
</table>
</body>
</html>

Here is the code for validate.js:

/*jslint browser: true*/
/*global fail:true, alert:true, validateForename, validateSurname, validateUsername, validatePassword, validateAge, validateEmail*/

function validateForm(form) {
    "use strict";
    fail = validateForename(form.forename.value);
    fail += validateSurname(form.surname.value);
    fail += validateUsername(form.username.value);
    fail += validatePassword(form.password.value);
    fail += validateAge(form.age.value);
    fail += validateEmail(form.email.value);
    if (fail === "") {
        return true;
    } else { alert(fail); return false;
           }
}

function validateForename(field) {
    "use strict";
    if (field === "") {
        return "No Forename was entered.\n";
    }
    return "";
}

function validateSurname(field) {
    "use strict";
    if (field === "") {
        return "No Surname was entered.\n";
    }
    return "";
}

function validateUsername(field) {
    "use strict";
    if (field === "") {
        return "No Username was entered.\n";
    } else if (field.length < 5) {
        return "Usernames must be at least 5 characters.\n";
    } else if (/[\^a-zA-Z0-9_\-]/.test(field)) {
        return "Only a-z, A-Z, 0-9, - and _ are allowed in Usernames.\n";
    }
    return "";
}

function validatePassword(field) {
    "use strict";
    if (field === "") {
        return "No Password was entered.\n";
    } else if (field.length < 6) {
        return "Passwords must be at least 6 characters.\n";
    } else if (!/[a-z]/.test(field) || !/[A-Z]/.test(field) || !/[0-9]/.test(field)) {
        return "Passwords require one each of a-z, A-Z and 0-9.\n";
    }
    return "";
}

function validateAge(field) {
    "use strict";
    if (isNaN(field)) {
        return "No Age was entered.\n";
    } else if (field < 18 || field > 99) {
        return "Age must be between 18 and 99.\n";
    }
    return "";
}

function validateEmail(field) {
    "use strict";
    if (field === "") {
        return "No E-mail was entered.\n";
    } else if (!(((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[\^a-zA-Z0-9.@_\-]/.test(field))) {
        return "The Email address is invalid.\n";
    }
    return "";
}

Answers


The /* global */ comment tells JSLint which global variables have already been defined in other files. It does not actually declare anything.

You need to actually declare your variables, using the var statement. Note that you actually want locals, not globals.

In fact, you shouldn't be using /* global at all, unless you actually have globals from another file (which you don't). Browser standard methods like alert() are already known because of browser: true, and JSLint already sees everything declared in your file.


Need Your Help

Ensure that a list of dependent tasks dont have cycles

algorithm language-agnostic graph-theory

I want to make a CRUD app (SQL or document DB) for tasks: create them one at a time. Tasks may depend on one or more other tasks. Ideally this must be a directed acyclic graph.

To build Java project with OpenCV using Maven

java linux maven opencv native

I need to build the project, which involv an OpenCV. It would be great, but libraries don't get into the library java.library.path for some reason. And when I try to run the code using the library ...