validation still submitting problem

[peck3277]

Hi guys!

Hope someone can help me out here. I'm using javascript to validate a form and if it's false it displays a message. If it's true in passes it to a php file to process it.

The problem im having is even if it fails validation it still passes to the php file.

You can see it here: http://www.darawebdesign.com/projects/login_script/

The code im using is:

function validate_required(field,alerttxt){
	with (field){
		if (value==null||value==""){
			document.getElementById("empty").style.display="block";
			return false;
		}
		else{
			return true;
		}
	}
}

function validate_email(field,alerttxt){
	with (field){
		apos=value.indexOf("@");
		dotpos=value.lastIndexOf(".");
		if (apos<1||dotpos-apos<2){
			alert(alerttxt);
			return false;
		}
		else{
			return true;
		}
	}
}

function validate_login(thisform){
	with (thisform){
		if (validate_required(user,"Name must be filled out!")==false){
			name.focus();
			return false;
		}
		if (validate_required(pass,"Password must be filled out!")==false){
			comment.focus();
			return false;
		}
	}
}

<form name = "login_form" action = "includes/verify_login.php" method = "POST" onsubmit="return validate_login(this)">
			<label for="user">User Name: </label><input type="text" class="custom_field" name="user" id="user">
			<label for="pass">Password: </label><input type="password" class="custom_field" name="pass" id="pass">
			<input type="checkbox" id="remember" name="remember"><label id="label_remember" for="remember">Remember Me</label><br>
			<button id="custom_button">Login</button>
		</form>

[Airshow]

Peck,

The main thing is that by using <button>Login</button>, the form's onsubmit event won't fire. Try putting an alert right at the top of validate_login(thisform) and you will find that it's never called.

You can use :

• <input type=="button" value="Login" /> for a standard button, or
• eg. <input type="image" src="submit.jpg" width="80" height="25" > for a custom button.

You can also use <button>, as follows:

1. delete the onsubmit from the form tag
2. use <button onclick="validate_login(this.form)">Submit</button>
3. Modify validate_login as follows:

function validate_login(thisform){
	if (!validate_required(thisform.user, "Name must be filled out!")) {
		thisform.user.focus();
		return;
	}
	if (!validate_required(thisform.pass, "Password must be filled out!")) {
		thisform.pass.focus();
		return;
	}
	thisform.submit();
}

A couple of other things:

1. Error messages are passed to validate_required as alerttxt , but alerttxt is not used. You probably want alert(alerttxt); as per validate_email.
2. validate_login, in its current format, never returns true so would always suppress form sumbission (This is not relevant if you stick with <button> and adopt my alternative formulation of validate_login above).

Airshow

[peck3277]

Hi Airshow,

Thanks for your help. I forgot to remove the alert(alerttxt); part alright.

I don't really want to use javascript to submit the form for usuablitiy, I'm vailidating server side with php, this is just for style really.

Using the method at the moment with the button as the submit is triggering the onsumbit. I tested it with the method you mentioned it.

Is it possible my return true logic is correct? Here's what I've changes it to?

function validate_login(thisform){
	alert('hi');
	with (thisform){
		if (validate_required(user)==false){
			name.focus();
			return false;
		}
		else if (validate_required(pass)==false){
			comment.focus();
			return false;
		}
		else{
			return true;
		}
	}
}

[peck3277]

Hey sorry about the double post but here's some more information!

It must be my javascript validation logic. If I replace this:

function validate_login(thisform){
	with (thisform){
		if (validate_required(user)==false){
			name.focus();
			return false;
		}
		else if (validate_required(pass)==false){
			comment.focus();
			return false;
		}
		else{
			return true;
		}
	}
}

with this:

function validate_login(thisform){
	return true;
}

it submits the for as expected, but if i change it to:

function validate_login(thisform){
	return flase;
}

it doesn't send the form as expected.

[Airshow]

I don't really want to use javascript to submit the form for usuablitiy, I'm vailidating server side with php, this is just for style really.
Using the method at the moment with the button as the submit is triggering the onsumbit. I tested it with the method you mentioned it.

In that case you must use <input type="submit" ...> or <input type="image" ...> . Even if <button>...</button> can be made to trigger the onsubmit directly in some browsers, it won't do so in others.

Is it possible my return true logic is correct? Here's what I've changes it to?

function validate_login(thisform){
	with (thisform){
		if (validate_required(user)==false){
			name.focus();
			return false;
		}
		else if (validate_required(pass)==false){
			comment.focus();
			return false;
		}
		else{
			return true;
		}
	}
}

with is pretty well deprecated these days. Best to write it out longhand and return true unconditionally at the bottom of validate_login. Try this :

function validate_login(f) {
	if (!validate_required(f.user)){
		f.user.focus();
		return false;
	}
	if (!validate_required(f.pass)){
		f.pass.focus();
		return false;
	}
	return true;
}

If there were many fields requiring validation, then it would be more economical of code (though virtually no difference in execution time) to use this kind of formulation :

function validate_login(f) {
	var i, el, requiredFields = ['user', 'pass'];
	for (i=0; i<requiredFields.length; i++) {
		el = f[requiredFields[i]];
		if (el.value===null || el.value==="") {
			document.getElementById("empty").style.display="block";
			el.focus();
			return false;
		}
	}
	return true;
}

If you chhoose to stick with validate_required as a separate function, then ask yourself where is value set?

Airshow