I don’t know javascript well at all but I need to use it to validate inputs on forms i’ve made. I’ve looked at many examples and i really can’t see why it won’t work. When i click submit, nothing happens at all, it just goes to the next page, like there isnt even any javascript there. sorry if it’s a completely obvious answer, i have no experience with javascript so i have no idea what i’m looking for. i’m writing all of the code on the same page. thanks for any help.
javascript:
<script type="text/javascript">
function validateform(theform) {
var reason = "";
reason += validateName(theform.name);
reason += validateSurname(theform.surname);
reason += validateEmail(theform.email);
reason += validateHomephone(theform.homephone);
reason += validateMobilephone(theform.mobilephone);
reason += validateAddress(theform.address);
reason += validateTown(theform.town);
reason += validateCounty(theform.county);
reason += validatePostcode(theform.postcode);
reason += validateEmpty(theform.empty);
if (reason != "") {
alert("Some fields need correction:\n" + reason);
return false;
}
alert("All fields are filled correctly");
return true;
}
function validateEmpty(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error = "The required field has not been filled in.\n"
} else {
fld.style.background = 'White';
}
return error;
}
function validateName(fld) {
var error = "";
var illegalChars = ^[a-z\s]*$; // allow letters, numbers
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter a name.\n";
} else if (illegalChars.test(fld.value)) {
fld.style.background = 'Yellow';
error = "The name contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}
function validatSurname(fld) {
var error = "";
var illegalChars = ^[a-z\s]*$; // allow letters, numbers
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter a surname.\n";
} else if (illegalChars.test(fld.value)) {
fld.style.background = 'Yellow';
error = "The surname contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}
function validateEmail(fld) {
var error="";
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter an email address.\n";
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
fld.style.background = 'Yellow';
error = "Please enter a valid email address.\n";
} else if (fld.value.match(illegalChars)) {
fld.style.background = 'Yellow';
error = "The email address contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
return error;
}
function validateHomenumber(fld) {
var error = "";
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');
if (fld.value == "") {
error = "You didn't enter a phone number.\n";
fld.style.background = 'Yellow';
} else if (isNaN(parseInt(stripped))) {
error = "The home phone number contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!(stripped.length == 11)) {
error = "The home phone number is the wrong length.\n";
fld.style.background = 'Yellow';
} else {
fld.style.background = 'White';
}
return error;
}
function validateMobilenumber(fld) {
var error = "";
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');
if (isNaN(parseInt(stripped))) {
error = "The mobile phone number contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!(stripped.length == 11)) {
error = "The mobile phone number is the wrong length.\n";
fld.style.background = 'Yellow';
} else {
fld.style.background = 'White';
}
return error;
}
function validateAddress(fld) {
var error = "";
if (fld.value == "") {
error = "You didn't enter a home address.\n";
fld.style.background = 'Yellow';
}else {
fld.style.background = 'White';
}
return error;
}
function validateTown(fld) {
var error = "";
if (fld.value == "") {
error = "You didn't enter a town or city.\n";
fld.style.background = 'Yellow';
}else {
fld.style.background = 'White';
}
return error;
}
function validateCounty(fld) {
var error = "";
if (fld.value == "") {
error = "You didn't enter a county.\n";
fld.style.background = 'Yellow';
}else {
fld.style.background = 'White';
}
return error;
}
function validatePostcode(fld) {
var error = "";
var illegalChars = ^[a-z\s]*$;
var regPostcode = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([ ])([0-9][a-zA-z][a-zA-z]){1}$/;
if (fld.value == "") {
error = "You didn't enter a post code.\n";
fld.style.background = 'Yellow';
}
else if (illegalChars.test(fld.value)) {
fld.style.background = 'Yellow';
error = "The post code contains illegal characters.\n";
else if ((fld.value.length < 7) || (fld.value.length > 8)) {
error = "The post code is the wrong length. \n";
fld.style.background = 'Yellow';
} else if (regpostcode.test(fld.value)) {
fld.style.background = 'Yellow';
error = "The post code isn't the correct format.\n";
}
} else {
fld.style.background = 'White';
}
return error;
}
function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}
and the html
</script>
</head>
<body>
<table class="formy" border="o" cellpadding="2" cellspacing="5" bgcolor="#F4EC53" align="center">
<th colspan="2" align="center">Booking Private Hire</th>
<form name="firstform" method="post" onsubmit="return validateform(this)" action="secondform.php">
<table summary="first form">
<tr>
<td><label for="Name">First name:</label></td>
<td><input name="Name" size="35" maxlength="50" type="text"></td>
</tr>
<tr>
<td><label for="Surname">Surname:</label></td>
<td><input name="Surname" size="35" maxlength="25" type="password"></td>
</tr>
<tr>
<td><label for="Email">E-mail address:</label></td>
<td><input name="Email" size="35" maxlength="30" type="text"></td>
</tr>
<tr>
<td><label for="Homephone">Home phone number:</label></td>
<td><input name="Homephone" size="35" maxlength="25" type="text"></td>
</tr>
<tr>
<td>
<label for="Mobilephone">Mobile phone number:</label></td>
<td><input name="Mobilephone" size="35" maxlength="50" type="text"></td>
</tr>
<tr>
<td>
<label for="Address">Home address:</label></td>
<td><input name="Address" size="35" maxlength="50" type="text"></td>
</tr>
<tr>
<td>
<label for="Town">Town/city:</label></td>
<td><input name="Town" size="35" maxlength="50" type="text"></td>
</tr>
<tr>
<td>
<label for="County">County:</label></td>
<td><input name="County" size="35" maxlength="50" type="text"></td>
</tr>
<tr>
<td>
<label for="Postcode">Post code:</label></td>
<td><input name="Postcode" size="35" maxlength="50" type="text"></td>
</tr>
<td> </td>
<td><input name="Submit" value="Send" type="submit" ></td>
<td> </td>
</table>
</form>
</body>
</html>
EDIT: The thing that finally got it working for me is this:
The field names you are referencing do not match the actual names of the fields.
changed to
Also, there appear to be errors in your javascript code:
These lines do not parse:
validatePostcode() has a structural problem. This “else if” doesn’t have a closing bracket before it.
You may have been going for: