...

View Full Version : Javascript validation won't stop code from submitting



nxgn
06-25-2009, 02:34 AM
I've got a simple comment application running on the local Google webapp framework test server, and I'm trying to validate the form w/ Javascript before it gets input to the server and throws an error.

The problem is that the code seems to go through anyway... the Javascript never stops the code from being sent to the server.

I've already checked that Javascript is working on the application, so it must be that my Javascript validation code is bad.

I'd appreciated it if you guys can check the code for me and/or give me any advice on doing this kind of thing...

The code is meant to check that the Name field is not empty and that it doesn't have more than 20 characters in it. ("push" is the id for the Submit button, and "name" is the id for the Name input field.)


window.onload = function(){
button = "document.getElementById('push')"
name = "document.getElementById('name')"

button.onsubmit = function Validate(){
if(name.value.length == 0){
alert("please include a Name");
return false;
}
else if(name.value.length > 20){
alert("Name is too long");
return false;
}
else{
return true;
}
}
}

nxgn
06-25-2009, 05:31 AM
Kept googling and messing w/ it and it works now. :thumbsup:

I was doing a few things wrong:

1)The onsubmit event should attach to the form, not the Submit button.

2)document.getElementById(' ') should not have quotes around it.

3)It has to be return validate(), since the validate function returns a "true" or "false" result. It's just literally 'true' or 'false', which means nothing unless you return that result. In other words return validate() - w/ validate () being equal to either "true" or "false" at the end of the function.

I know this is super basic stuff, but I hope it helps someone.

corrected code: (also I added focus() to automatically take the user to the Name field)


window.onload = function (){
form = document.getElementById('form')
name = document.getElementById('name')

form.onsubmit = function() {
return validate()
}

function validate(){
if(form.name.value.length == 0){
alert("Please include a Name")
form.name.focus()
return false
}
else if(form.name.value.length > 20){
alert("Name is too long")
form.name.focus()
return false
}
else return true

}
}

Philip M
06-25-2009, 08:53 AM
Validation of the type if(form.name.value.length == 0){ is barely worthy of the name, as even as single space or a ? will return false (i.e. pass the validation). Nor should you give the name "name" to a form element.

Try this:-


function validate(){
var n = form.uname.value;
n = n.replace(/^\s+|\s+$/g,""); // strip leading and trailing spaces
if ((/[^a-z\s\-\']/gi.test(n)) || (n.length < 2)) { // only A-Z hyphen space apostrophe are valid - Mary-Lou O'Reilly Minimum 2 characters
alert ("The name contains invalid characters or is blank - please retype");
form.uname.value = "";
form.uname.focus();
return false;
}
}


"He's an interesting player - he has unusually short back legs." - Football commentator



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum