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

Question

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

Answer 1

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.

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

Question

1 answers

solution1
2 ACCPTED 2014-03-10 15:58:17

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

Question

1 answers

solution1 2 ACCPTED 2014-03-10 15:58:17

solution1
2 ACCPTED 2014-03-10 15:58:17