It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
im completly new to js , i made this form for a project we got # university but js doesnt seem to work at all. I dont get any errors, it is just doesnt work ! I got my Javascript enabled , and i full disabled No script.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['css'];?>"/>
<script type="text/javascript">
function validate_f() {
var result=true;
var username=document.getElemenetById('username').value;
var illegalChars = /\W/;
var x=document.getElemenetById('email').value;
var pwd=document.getElemenetById('password').value;
if (illegalChars.test(username) || username.length>25) {
result=false;
alert("Username must be latin chars and not more than 25 characters");
}
if (x==null || x=="" || username == null || username=="" || pwd == null || pwd == "" || afm == null || afm == "" ) {
result=false;
alert("you have to fill up all the Boxes dude");
}
return result;
}
<div id="main">
<div id="formcontainer">
<form id="data" name="data" action="connection.php" method="POST" on submit="return validate_f()">
<table width="100%" cellpadding="3" cellspacing="2">
<tr>
<td width="25%"> </td>
</tr>
<tr>
<td class="right" width="20%"> <strong> Username </strong> </td>
<td>
<input type="text" name="username" id="username" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Password</strong> </td>
<td>
<input type="password" name="password" id="password" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Email</strong> </td>
<td>
<input type="text" name="email" id="email"/>
</td>
</tr>
<?php
/*
<tr>
<td class="right"> <strong> Security Code: </strong> </td>
<td>
<img src="CaptchaSecurityImages.php" alt="" />
<input id="security_code" name="security_code" type="text" />
</td>
</tr>
*/
?>
<tr>
<td>
<input name="reset" type="reset" id="reset" value="Reset" />
<input name="submit" type="submit" id="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
</div>
</div>
There is no space between onsubmit event
<form id="data" name="data" action="connection.php" method="POST" onsubmit="return validate_f()">
There's a spelling mistake -
document.getElemenetById('password').value
var username=document.getElemenetById('username').value;
Should be
document.getElementById('password').value
var username=document.getElementById('username').value;
Ref: https://developer.mozilla.org/en/DOM/document.getElementById
there is a space between on & submit. Try this line of form tag...
<form id="data" name="data" action="connection.php" method="POST" onsubmit="return validate_f()">
and also
Your div's should inside the <form> tag.
Close the </script> tag, before the start of <form>.
Close the </head> tag before start the <form> tag.
Close the </html> tag at the end of the html page.
Try this,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?php echo $_SESSION['css'];?>"/>
<script type="text/javascript">
function validate_f() {
var result = true;
var username = document.getElemenetById('username').value;
var illegalChars = /\W/;
var x = document.getElemenetById('email').value;
var pwd = document.getElemenetById('password').value;
if (illegalChars.test(username) || username.length > 25) {
result = false;
alert("Username must be latin chars and not more than 25 characters");
}
if (x == null || x == "" || username == null || username == "" || pwd == null || pwd == "" || afm == null || afm == "") {
result = false;
alert("you have to fill up all the Boxes dude");
}
return result;
}
</script>
</head>
<body><div id="main">
<div id="formcontainer">
<form id="data" name="data" action="connection.php" method="POST" on submit="return validate_f()">
<table width="100%" cellpadding="3" cellspacing="2">
<tr>
<td width="25%"> </td>
</tr>
<tr>
<td class="right" width="20%"> <strong> Username </strong> </td>
<td>
<input type="text" name="username" id="username" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Password</strong> </td>
<td>
<input type="password" name="password" id="password" size="25" maxlength="25"/>
</td>
</tr>
<tr>
<td class="right"> <strong> Email</strong> </td>
<td>
<input type="text" name="email" id="email"/>
</td>
</tr>
<?php
<tr>
<td class="right"> <strong> Security Code: </strong> </td>
<td>
<img src="CaptchaSecurityImages.php" alt="" />
<input id="security_code" name="security_code" type="text" />
</td>
</tr>
<tr>
<td>
<input name="reset" type="reset" id="reset" value="Reset" />
<input name="submit" type="submit" id="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Related
I have two forms in my JSP page which should be validated by two embedded JS scripts (see code below). The trouble is that the scripts don't work properly and omit validating the first entries (username and loginName respectively). I had two external Javascript files to do the validation but that had a similar problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Scotia Login Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<!-- <script type="text/javascript" src="scripts/stafflogin.js"></script> -->
<!--<script type="text/javascript" src="scripts/userlogin.js"></script> -->
<link rel="stylesheet" type="text/css" href="styles/DWBA.css"/>
</head>
<body>
<div class="outer">
<div class="header"><h1>Scotia Island & Wildlife Cruises</h1></div>
<div class="box"><h2>Login Page</h2>
<script>
function validateform1() {
var username = document.stafflogin.username.value;
var password = document.stafflogin.password.value;
if (username === null || username === "") {
alert("Please enter the admin username");
document.stafflogin.username.focus();
return false;
} else if (password === null || password === "") {
alert("Please enter the admin password");
document.stafflogin.password.focus();
return false;
}
}
</script>
<form name="stafflogin" action="CustomerServlet" onsubmit="return validateform1()"><!-- -->
<h3>Staff Login with username and password</h3>
<p> To login, enter details below:</p>
<table cellspacing="8" border="0">
<tr>
<td align="left"><p>Staff Username:</p></td><!-- USERNAME is admin -->
<td><input type="text" name="username" id="username" /></td>
</tr>
<tr>
<td align="left"><p>Staff Password:</p></td><!-- PASSWORD is admin -->
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td align="left"><input type="submit" value="stafflogin" name="submit" style="width:75px" /></td>
<td><br /><input type="hidden" name="username" value="" /></td>
</tr>
</table>
</form>
<br />
<script>
function validateform2() {
var name = document.userlogin.loginName.value;
var password = document.userlogin.loginPasswd.value;
if (name === null || name === "") {
alert("Please enter your username");
document.userlogin.loginName.focus();
return false;
} else if (password === null || password === "") {
alert("Please enter your password");
document.userlogin.loginPasswd.focus();
return false;
}
}
</script>
<form name="userlogin" method="POST" action="LoginServlet" onsubmit="return validateform2()">
<h3>Customer Login with login name and login password</h3>
<p> To login, enter details below:</p>
<table cellspacing="8" border="0">
<tr>
<td align="left"><p>Login name:</p></td><!-- -->
<td><input type="text" name="loginName" id="loginName"/></td>
</tr>
<tr>
<td align="left"><p>Login password:</p></td><!-- -->
<td><input type="password" name="loginPasswd" id="loginPasswd"/></td>
</tr>
<tr>
<td align="left"><input type="submit" value="userlogin" name="submit" style="width:75px" /><br /></td>
<td><input type="hidden" name="loginName" value="" /></td>
</tr>
</table>
</form>
<br />
<form name="Form" action="CustomerServlet">
<h3>New Customer registration</h3>
<p>To register, click on "register" below:</p>
<table cellspacing="8" border="0">
<tr>
<td><input type="submit" value="register" name="submit" style="width:75px" /></td>
</tr>
</table>
</form>
</div>
<div class="footer"><div align="center"><!-- ALIGNS EVERYTHING WITHIN DIV -->
<p>© Copyright Scotia Island & Wildlife Cruises, Harbour Road, Morar, Invernessshire.</p>
<form>
<tr>
<td><input type="submit" value="home" name="submit" style="width:75px" /></td>
</tr><br />
</form></div>
</div><br />
</div>
</body>
</html>
As I am a novice at Javascript I need some help to work out why two separate forms and validation scripts won't work as expected. (I have other JSP pages with single external Javascript validation scripts and they all work as intended).
Can anyone suggest a solution?
The answer is to remove the hidden inputs from each form eg.
<input type="hidden" name="username" value="" />
and
<input type="hidden" name="loginName" value="" />
so the forms look like this:
<script type='text/javascript'>
function validateform1() {
'use strict';
var username = document.stafflogin.username.value;
var password = document.stafflogin.password.value;
if (username === null || username === "") {
alert("Please enter the admin username");
document.stafflogin.username.focus();
return false;
} else if (password === null || password === "") {
alert("Please enter the admin password");
document.stafflogin.password.focus();
return false;
} else {
document.stafflogin.submit();
}
}
</script>
<form name="stafflogin" action="CustomerServlet" onsubmit="return validateform1()">
<h3>Staff Login with username and password</h3>
<p> To login, enter details below:</p>
<table cellspacing="8" border="0">
<tr>
<td align="left"><p>Staff Username:</p></td>
<td><input type="text" name="username" id="username" required /></td>
</tr>
<tr>
<td align="left"><p>Staff Password:</p></td>
<td><input type="password" name="password" id="password" /></td>
</tr>
<tr>
<td align="left"><input type="submit" value="stafflogin" name="submit" style="width:75px" /></td>
</tr>
</table>
</form>
and this:
<script type='text/javascript'>
function validateform2() {
'use strict';
var name = document.userlogin.loginName.value;
var password = document.userlogin.loginPasswd.value;
if (name === null || name === "") {
alert("Please enter your username");
document.userlogin.loginName.focus();
return false;
} else if (password === null || password === "") {
alert("Please enter your password");
document.userlogin.loginPasswd.focus();
return false;
} else {
document.userlogin.submit();
}
}
</script>
<form name="userlogin" method="POST" action="LoginServlet" onsubmit="return validateform2()">
<h3>Customer Login with login name and login password</h3>
<p> To login, enter details below:</p>
<table cellspacing="8" border="0">
<tr>
<td align="left"><p>Login name:</p></td>
<td><input type="text" name="loginName" id="loginName"/></td>
</tr>
<tr>
<td align="left"><p>Login password:</p></td>
<td><input type="password" name="loginPasswd" id="loginPasswd"/></td>
</tr>
<tr>
<td align="left"><input type="submit" value="userlogin" name="submit" style="width:75px" /><br /></td>
</tr>
</table>
</form>
In short there was nothing wrong with the Javascript.
I am new bee to JavaScript. I have a form which is not validated with alert button. I am having a form which is to be submitted without errors. If I submit the forms with the empty fields, an alert message should be popped up.
The following is my code:
function validate_Form() {
alert('hi how');
exit;
var tokenNo = document.forms["myForm"]["txt1"].tokenNo;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
}
<table>
<form name="Sec_guard_form" onsubmit="validate_Form()">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
The above is my code, for i am using the mozilla firefox as my browser. Is that an issue. My function inside the script is not even called. what am i wrong here...
You can change your javascript like this :
function validate_Form() {
var form = document.querySelector("form");
var tokenNo = form.elements.token_no.value;
if (tokenNo == null || tokenNo == "") {
alert("Enter The Token No");
return false;
} else {
document.write("pola");
}
return false;
}
and your html like this:
<form name="Sec_guard_form" onsubmit="return validate_Form()">
exit; doesn't mean anything in javascript. You have to use return. So if you return before the function does anything then it is not useful at all!
The syntax you used for selecting form element and getting its value was wrong according to me so I corrected the syntax...
Also, you might be wondering why to use return validate_form() in HTML and return false in the function. It is used just for stopping the page to refresh/redirect before the entire function gets executed!
Try this code, it worked for me... I don't know what hi how was for so I eliminated it.
You are not calling function on your submit button Please use this to call function first.
<input type="submit" value="submit" onclick="validate_Form()" />
change
<form name="Sec_guard_form" onsubmit="validate_Form()">
to
<form name="Sec_guard_form" onsubmit="return validate_Form()">
Complete html code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<table>
<form id="Sec_guard_form" onsubmit="return validate_Form();" method="post">
<tr>
<td>Token No</td>
<td>
<input type="text" value="" name="token_no" />
</td>
</tr>
<tr>
<td>Other Property</td>
<td>
<input type="text" value="" name="other_prop" />
</td>
</tr>
<tr>
<td>Bike Number</td>
<td>
<input type="text" value="" name="bike_no" />
</td>
</tr>
<tr>
<td>bike name</td>
<td>
<input type="text" value="" name="bike_nm" />
</td>
</tr>
<tr>
<td>bike model</td>
<td>
<select option="bike model">
<option value="Activa 3G">Activa 3G</option>
<option value="shine">shine</option>
<option value="unicon">unicon</option>
<option value="yuga">yuga</option>
<option value="neo">neo</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" value="submit" />
</td>
<td>
<input type="submit" value="cancel" />
</td>
</tr>
</form>
</table>
<script>
function validate_Form()
{ alert('hi how');
var tokenNo = document.getElementById("Sec_guard_form")["token_no"].value;
if (tokenNo == null || tokenNo == "")
{
alert("Enter The Token No");
return false;
}
else
{
document.write("pola");
}
}
</script>
</body>
</html>
This is working fine
I am trying to validate my username field and check if the username contains atleast 6 letters, if not then i show a pop up window indicating the same.
But the alert command does not seem to work.
Following is the code:
<html>
<head>
<title> Webpage </title>
</head>
<script language="Javascript">
function validate()
{
if (username1.length < 6)
{
alert("Username must be atleast 6 charactrs long, Please Try Again");
}
}
</script>
<body>
<form>
<center>
<fieldset>
<table cellspacin="5" cellpadding="5" border="0">
<tr>
<td>Username: </td>
<td align="left"><input type=="text" name="username1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Password: </td>
<td align = "left"> <input type="text" name="password" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Please confirm your password: </td>
<td align = "left"> <input type="text" name="password1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="Log in" onClick="validate()">
</td>
</tr>
</fieldset>
</table>
</center>
</form>
</body>
</html>
You are trying to use the name element attribute as the id, which creates a global window property. Name does not do that however, you can use.
You also aren't getting the value, you are trying to get the length on the element.
document.getElementsByName('username1')[0].value
Answer:
I tried it this way it worked:
<html>
<head>
<title> Webpage </title>
</head>
<script language="Javascript">
function validate()
{
username2 =form1.username1.value
if (username2.length < 6)
{
alert("Username must be atleast 6 charactrs long, Please Try Again");
}
}
</script>
<body>
<form name="form1">
<center>
<fieldset>
<table cellspacin="5" cellpadding="5" border="0">
<tr>
<td>Username: </td>
<td align="left"><input type=="text" name="username1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Password: </td>
<td align = "left"> <input type="text" name="password" maxlength="20" size="20">
</td>
</tr>
<tr>
<td> Please confirm your password: </td>
<td align = "left"> <input type="text" name="password1" maxlength="20" size="20">
</td>
</tr>
<tr>
<td align="center"><input type="submit" value="Log in" onClick="validate()">
</td>
</tr>
</fieldset>
</table>
</center>
</form>
</body>
</html>
I am trying to do simple form validation by using jQuery. Actually I am try to validate the input boxes on blur and focus. I am just validating first input for now which validate user first name.It is not functioning properly.
Can any please help me?
HTML & JS CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Test
</title>
<style type="text/css">
.showerror{
display:block;
}
.noshowerror{
display:none;
}
.remerr{
display:none;
}
.redborder{
border:#F00 solid 1px;
background-color:yellow;
}
.greenborder {
border:#0F3 solid 1px;
background-color:#6F6;
}
</style>
</head>
<body>
<div style="width:450px">
<div style="float:left">
<table>
<form id="eg">
<tr>
<td>
<label>
Name:
</label>
<td>
<input type="text" id="name" />
</tr>
<tr>
<td>
<label>
Surname:
</label>
<td>
<input type="text" id="surname" />
</tr>
<tr>
<td>
<label>
Email:
</label>
<td>
<input type="text" id="email" />
</tr>
<tr>
<td>
<label>
Number:
</label>
<td>
<input type="text" id="number" />
</tr>
<tr>
<td>
<label>
Age:
</label>
<td>
<input type="text" id="age" />
</tr>
<tr>
<td>
<label>
Comment:
</label>
<td>
<input type="text" id="comment" />
</tr>
<tr>
<td>
<label>
Password
</label>
<td>
<input type="password" id="pwd" />
</tr>
<tr>
<td>
<label>
Confirm Password
</label>
<td>
<input type="password" id="cnfmpwd" />
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" />
</td>
</tr>
</form>
</table>
</div>
<div style="float:right">
<p id="fail" class="noshowerror" >
Please enter name
</p>
<p id="nameerr2" class="remerr">
Name is correct
</p>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
var fname = document.getElementById("name").value;
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
} else if (fname == " ") {
$("#name").addClass('redborder');
} else {
$("#name").addClass('greenborder');
return false;
}
});
});
</script>
</body>
</html>
Thanks in advance
I have refined our code and its working as you intended, there were several mistake in defining the elements within table,may be you can have a look at my code on how to define it .
LIVE DEMO
HTML CODE:
<body>
<div style="width:450px">
<div style="float:left">
<form id="eg" action="/">
<table>
<tr>
<td>
<label>Name:</label>
</td>
<td>
<input type="text" id="name" />
</td>
</tr>
<tr>
<td>
<label>Surname:</label>
</td>
<td>
<input type="text" id="surname" />
</td>
</tr>
<tr>
<td>
<label>Email:</label>
</td>
<td>
<input type="text" id="email" />
</td>
</tr>
<tr>
<td>
<label>Number:</label>
</td>
<td>
<input type="text" id="number" />
</td>
</tr>
<tr>
<td>
<label>Age:</label>
</td>
<td>
<input type="text" id="age" />
</td>
</tr>
<tr>
<td>
<label>Comment:</label>
</td>
<td>
<input type="text" id="comment" />
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" id="pwd" />
</td>
</tr>
<tr>
<td>
<label>Confirm Password</label>
</td>
<td>
<input type="password" id="cnfmpwd" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="test" onclick="return false;" />
</td>
</tr>
</table>
</form>
</div>
</div>
<div style="float:right">
<p id="fail" class="noshowerror">Please enter name</p>
<p id="nameerr2" class="remerr">Name is correct</p>
</div>
</body>
JS CODE:
$(document).ready(function () {
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
});
$('#name').blur(function () {
var nameRegex = /^[A-Za-z]+$/;
// var fname = document.getElementById("name").value;
var fname = $("#name").val();
alert(nameRegex.test(fname));
if (!(nameRegex.test(fname))) {
$("#name").removeClass('greenborder').addClass('redborder');
} else if (fname == " ") {
$("#name").removeClass('greenborder').addClass('redborder');
} else {
$("#name").removeClass('redborder').addClass('greenborder');
return false;
}
});
});
When your using jQuery lib, make sure you make the most of it, i have seen that there was raw javascript syntax in your code. jQuery was designed make things easier by reducing the syntax.
Edited:
I have refined the code, so that the code work on any number of times.
Happy Coding :)
$('#name').blur(function(){
trigger the blur event.
To listen for the blur event, made by the user :
$('#name').on("blur", function(){
if ($("#name").val('')) {
$("#name").val('Name Please');
}
$('#name').focus(function () {
if ($('#name').val() == 'Name Please') {
$('#name').val("");
}
can be changed by :
<input type="text" name="name" id="name" placeholder="Name Please" />
http://www.w3schools.com/tags/att_input_placeholder.asp
For your issue :
var fname = $("#name").val(); //jQuery style
$('#name').on("blur", function(){
// we want element #name a range of letters
var regexp = /^([A-Za-z])+$/;
// if the element #name contains a range of letters defined in var regexp
if (!nameRegex.test(fname)) {
$("#name").addClass('redborder');
return true;
}
// if the element #name is empty, does not contain string
if ( $("name").length === 0 ) {
$("#name").addClass('redborder');
return true;
}
// if we are still here, means that the element #name is valid
$("#name").addClass('greenborder');
return false;
}
// on focus name input
$("#name").on("focus", function() {
// if the input get the redborder class, then reset
if ( fname.hasClass("redborder") ){
fname.removeClass("redborder");
}
}
First off my apologies for how disgusting this code is, it is not my choice by far, following orders from my boss and others in my team have never done anything web before. Really isn't good to miss the start of a project!
Basically I want to validate a couple of inputs before progressing to the next page via a submit button. There is no form in use so I am trying to use onClick for the submit button to launch the validate function. Can anybody see what is wrong with the code below (other than it being awful, from the standpoint of getting it to work as wanted.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- #include file="includes/header.asp" -->
<Center>
<tr>
<td width="100%" height="300" align="center">
<table width="100%" id="table01">
<Tr>
<Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
<font class="table_header">Password Reset</font>
</td>
</tr>
<tr>
<Td align="center" height="150" valign="middle">
<font class="table_grey">
Please select one of the methods below to reset your password.
<br><br>
<form name="radioq"align="center">
<input type="radio" name="levels" value="level1" onClick="get_radio_value(1);"/> E-mail a new password<br />
<input type="radio" name="levels" value="level2" onClick="get_radio_value(2);"/> Answer secret question<br/>
</form>
<!-- Javascript to handle which table loads below based on radio selection -->
</font>
</td>
</tr>
</table>
<table width="100%" class="table01" id="level1" style="display:none;">
<Tr>
<Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
<font class="table_header">E-mail Address</font>
</td>
</tr>
<tr>
<Td align="center" height="150" valign="middle">
<font class="table_grey">
Please enter your e-mail address and surname.
<br/><br/>
<font class="table_grey">E-mail Address: </font>
<input id="emailinput" size="20" type="text" value="" name="emailinput" />
<br/><br/>
<font class="table_grey">Surname: </font>
<input id="surnameinput" size="20" type="text" value="" name="surnameinput" />
<!-- Javascript to handle incorrect surname/email -->
</font>
</td>
</tr>
<tr>
<td align="right">
<a style="text-decoration:none;"href="password_email_success.asp"><button class="smallbutton" onClick="return validatemail();" type="submit" value="Login" name="submit" class="submit" /><span>Next</span></button></a>
</td>
</tr>
</table>
<table width="100%" class="table01" id="level2" style="display:none;">
<Tr>
<Td height="30" align="center" colspan="2" style="background-image:url(img/table_header.jpg);background-repeat:repeat-x" >
<font class="table_header">Secret Question</font>
</td>
</tr>
<tr>
<Td align="center" height="150" valign="middle">
<font class="table_grey">
Please answer your secret question below.
<br/><br/>
<font class="table_grey">What is your mother's maiden name? </font>
<br/><br/>
<font class="table_grey">Answer: </font>
<input id="answerinput" size="20" type="text" value="" name="answerinput" />
<!-- Javascript to handle incorrect surname/email -->
</font>
</td>
</tr>
<tr>
<td align="right">
<a style="text-decoration:none;"href="password_change_success.asp"><button class="smallbutton" type="submit" value="Login" name="submit" class="submit" /><span>Next</span></button></a>
</td>
</tr>
</table>
<br><br>
<!-- #include file="includes/footer.asp" -->
<script language="Javascript">
function get_radio_value(val)
{
val = val - 1;
for (var i=0; i < document.radioq.levels.length; i++){
if(i==val){
document.radioq.levels[i].checked = true;
}
}
for (var i=0; i < document.radioq.levels.length; i++){
if (document.radioq.levels[i].checked)
{
var rad_val = document.radioq.levels[i].value;
document.getElementById(rad_val).style.display = "table";
}
else{
var rad_val = document.radioq.levels[i].value;
document.getElementById(rad_val).style.display = "none";
}
}
}
function validatemail()
{
if ( !isNaN(document.level1.surnameinput.value) )
{
alert("Please enter a valid lastname - text only");
document.level1.surnameinput.focus();
return false;
}
if ((document.level1.emailinput.value == "") )
{
alert("Please enter an email.");
document.level1.emailinput.focus();
return false;
}
return true;
}
Call your validatemail() function at the forms onSubmit event instead of one of the buttons onClick event. This is considered best practise as it runs the validation function even when the form is submitted with the ENTER key as well as all related submit buttons.
<form onSubmit="return validatemail();">
Regadring your submit button, don´t name it "submit" and don´t use the class or any other attributes multiple times on the same element.
<button type="submit" name="submitButton" value="Login" class="smallbutton" />
Also, all the form elements (input, button etc.) should be placed within the <form></form> tags.