Undefined issue

Hi. I have the code

function validate(loginForm) {
    var error = "";
    error += checkUsername(loginForm.username.value);
    error += checkPassword(loginForm.password.value);
    if (error != "") {
       alert(error);
       return false;
    }
return true;
}


function checkUsername (field) {
 var userError = "";
 if (field == "" || field == null) {
    userError = "You didn't enter a username.\
";
 }
 
 if ((field.length < 6)) {
    userError = "The username should be longer than 6 characters.\
";
 }
}

function checkPassword (field) {
 var passwordError = "";
 if (field == "" || field == null) {
    passwordError = "You didn't enter a password.\
";
 }
   
 if ((field.length < 6)) {
    userError = "The password should be longer than 6 characters.\
";
 }
}

If this is run, and I dont enter anything into my form, the error I am returned with is undefined. I know the values get to the javascript because if I do

alert(loginForm.username.value);

It shows what I typed in.

What could be causing it to return undefined when it is passed through the functions?

cheers

the error msg should also be telling you what is undefined.

what did you click immediately before you got the error?

I have my form

<form action="" method="post" onsubmit="return validate(this)">
<table align="center" border="0" cellspacing="0" cellpadding="3">
<tr><td>Username:</td><td><input type="text" name="username" maxlength="30"></td></tr>
<tr><td>Password:</td><td><input type="password" name="password" maxlength="30"></td></tr>
<tr><td colspan="2" align="left"><input type="checkbox" name="remember">
<font size="2">Remember me next time</td></tr>
<tr><td colspan="2" align="right"><input type="submit" name="sublogin" value="Login"></td></tr>
<tr><td colspan="2" align="left"><a href="Register.php">Join</a></td></tr>
</table>
</form>

What i do is just enter nothing into the fields, and I hit the submit button. When I do this, I get a pop up window which displays
undefinedundefined

As I say, I can print out the data in the javascript file with no problems, so I was thinking it was something in the functions causing the issues?

ok, you just need to do some basic debugging and the problem should become obvious.

hint: use alert()s to check what values are coming back to validate() when you check the username and passwords that were entered.

Ok, this seems slightly wierd. If you look at the javascript code in my original post. I placed some alerts within the if statements inside the checkUsername and checkPassword functions. When I test it, these alerts get printed out with the text I display. So this must mean that userError and passwordError must get assigned the text which should be displayed for the error. However, the alert inside the validate function is the one that still prints out
undefinedundefined

Do I need to return something from these functions as it seems nothing is being returned? I know I would have to in java, but not sure with javascript?

yep, spot on :slight_smile:

try adding

 
return userError;

at the bottom of your 2 other functions and then continue the debugging process if you still get errors.

Kool, that seemed to fix it. Seems a bit strange though, I thought JS returned values automatically, without them needing to be defined.

no it doesn’t unless you pass parameters by reference (which I don’t know if you can in js)

but if you declare a variable in a function without the var prefix then it will be a global variable but that is slightly different to automatically returning varibales.

Could I just clarify something with you while I am at it? So in my form, I have a onsubmit call. Outside of my form, I do

if(isset($_POST['sublogin'])){

where sublogin relates to my forms submit button.

Will sublogin only be set if onsubmit returns true? This seems to be the case, but just wanted to know for sure. And would this be the case if I had a form action aswell, so submit is only true if the action is successfully performed?

cheers

let me summarise:

  1. if your onsubmit function returns true then your form’s data is sent to the php script specified in the the form’s action attribute.

  2. if your onsubmit function returns false, then your form is not submitted and so nothing else happens until the user fixes any input errors, resubmits the form and hopefully it will eventually return true.

  3. when the form is submitted the php script (specified in action) receives all the form’s input data as name / value pairs in either a $_POST or $_GET array as specified in the forms “method”

  4. if your submit button has a name and value in the html, they will also appear in $_POST or $_GET.

It’s worth knowing too that when the submit event returns anything but false, the form is submitted. This means that even when undefined is returned, that the form is submitted. The only way to prevent the form from being submitted is to return false (or use other fancier event-based techniques).

ok thanks :slight_smile: - didn’t know that.

I thought the onsubmit had to return true for the form to be submitted, but I always make sure the onsubmit returns one or the other.

hmmmmm :scratch:

and when I think about it a bit more, that makes sense because if there is no onsubmit attribute in the <form> the form is submitted every time the submit button is clicked.