Jquery Form Validation doesn't work

Hi,
I am trying to create a multistep form.

Following is my code:

<div id="div1">
<form>
<label>Username</label><input type="text" id="username"></input>
<label>Password</label><input type="text" id="password"></input>
</form>
<a href="#" class="next">NEXT</a>
</div>

<div id="div2">

<p>Content of Div 2</p>

</div>

My JS:

$("#div2").hide();

function showdiv2(){
$("#div1").hide();
$("#div2").show();
}

function validateuser(){
var username =  $("#username").val().length;
if (username >5 && username<20)
	errorUser =false;
}

function validatePassword(){
var password =  $("#password").val().length;
if (password length>8 && <20)
	errorPassword =false;
}

$('.next').click(function(){
	var errorUser = false;
	var errorPassword = false;
	
validateuser();
validatePassword();

if(errorUser=false && errorPassword=false){
return=true;
showdiv2();
	
}
else{
	return=false;
}
	
} );

The validation works fine. But I cannot get the function showdiv2() to work.

How can I achieve this? This is another similar form in Div 2 so I cannot use the submit button in div1.

Please help.

Many thanks.

That’s the problem there. You cannot assign anything to return as it’s a keyword. You would instead use it like this, after the showdiv2() statement:

showdiv2();
return true;

If I do that, the div2 is shown anyways, regardless of the fields. I want the fields to be validated and only if if(errorUser=false && errorPassword=false) show div2

That’s fine, leave them inside the if statement.

What you need to take away from this is that return=true is invalid syntax.

I did that … so my code now is :

$('.next').click(function(){
	var errorUser = false;
	var errorPassword = false;
	
validateuser();
validatePassword();

if(errorUser==false && errorPassword==false){

showdiv2();
return true;
	
}
else{
	return false;
}

} );

But it still doesnt seem to like. It brings div2 when i click next but does not validate.

There are several other issues. We can take them one at a time.

The next place that has several syntax issues is this line:

if (password length>8 && <20)

Do you want to figure out what needs to be fixed up there?

Sorry, that was a typo.

The correct code is:
if (password >8 && password<20)

Isn’t that asking if the password is less than 20? Is 19 a valid password?

password is $("#password").val().length;

Its talking about the length of the password. So anything between 9 to 19 characters. If thats what you mean.

Good one. The current variable name does currently lend itself to this confusion. Calling it something like passwordLen would resolve that.

Aside from that though, what’s the next problem that’s shown by the console?
Uncaught ReferenceError: Invalid left-hand side in assignment

That’s on this line here:

if (errorUser = false && errorPassword = false) {

What’s wrong there?

oh wow … should be :

if (errorUser == false && errorPassword == false) {

but still no luck

Good one. Syntax errors are now fixed. The next potential issue is in regard to the $ symbol. How and where are you loading the jQuery library?

Assuming that you have jQuery all dealt with, let’s follow the logic of the username.

var errorUser = false;
...
var username = $("#username").val().length;
if (username > 5 && username < 20)
    errorUser = false;
...
if (errorUser === false && errorPassword === false) {
    showdiv2();

Can you see what the problem with the errorUser variable (and by proxy, the errorPassword one too) is?

A good possible solution is returning true or false from the function, so that you can then assign it to the variable.

var errorUser = validateuser();

or maybe even giving the username to the function too:

var errorUser = validateuser($("#username"));

with appropriate updates to the validateuser() function.

1 Like

Thanks a million.
I got it working now.

I looked up for the password and turns out its a reserved var in JS … I will always follow your suggestion to use something like passwordLen

Thanks again !!!

Why should you care how many thousands of characters someone wants in their password - they all end up taking up the same length when you store the hash on the server.

This was a test form to get my hands dirty on validation and multi steps.

:slight_smile:

I agree. The following short password 8#Wx is more secure than your standard eight-character ones, and even more secure than that are longer password phrases such as: Terry Pratchett is my favourite author.

When it comes to passwords, length is better than the girth of character sets it’s comprised of. Size really does matter.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.