shad0wsay3r
asked on
Make sure a text box is not blank, and alert user if it is with javascript
I need to make a form where a user enters data, and if they do not enter data into a text box, they will be alerted when they try to submit it. this is what I have so far, I have no work done on the actual submit part of the form, just error checking
<html>
<head>
<script type="text/javascript">
function formReset()
{
document.getElementById("myForm").reset();
}
</script>
<SCRIPT language=Javascript>
function isNumberKey(evt)
{
var charCode = (evt.which) ? evt.which : event.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
</SCRIPT>
<script type="text/javascript">
function validate()
{
var fname=document.getElementById("firstname").value;
var lname=document.getElementById("lastname").value;
var age=document.getElementById("age").value;
var phone=document.getElementById("phone").value;
var address=document.getElementById("address").value;
var city=document.getElementById("city").value;
var postal=document.getElementById("postal").value;
var at=document.getElementById("email").value.indexOf("@");
submitOK="true"
if (fname==0)
{
alert("You must enter a value for name");
submitOk="false";
}
if (lname==0)
{
alert("you must enter a value for last name");
submitOk="false";
}
if (phone==0)
{
alert("you must enter a phone number, with only numbers");
submitOk="false";
}
if (address==0)
{
alert("you must enter an address");
submitOk="false";
}
if (city==0)
{
alert("you must enter a city");
submitOk="false";
}
if (postal==0)
{
alert("you must enter a postal code");
submitOk="false";
}
if (isNaN(age) ||age<1||age>100)
{
alert("The age must be a number between 1 and 100");
submitOK="false";
}
if (at==-1)
{
alert("not a valid email!");
submitOk="false";
}
if (submitOK=="false")
{
return false;
}
}
</script>
</head>
<body>
<form id="myForm"">
<table align="center" border="0" cellpadding="2" cellspacing="8">
<tr>
<td align="center">First Name* (max 10 characters):
</td>
<td><input maxlength="10" type="text" id="firstname" />
</td>
</tr>
<tr>
<td align="center">Last Name* (max 10 characters):
</td>
<td><input maxlength="10" type="text" name="lastname" id="lastname" />
</td>
</tr>
<tr><td align="center">Age* (from 1 to 100):
</td>
<td><input maxlength="3" type="text" name="age" id="age" onkeypress="return isNumberKey(event)" />
</td>
</tr>
<tr>
<td align="center">Gender:
</td>
<td>
<input type="radio" name="sex" value="male"/>Male
<br>
<input type="radio"
name="sex" value="female"/>Female
</td>
</tr>
<tr><td align="center"><label for="selected">You selected:</label></td><td><input maxlength="10" type="text" name="selectgender" id="selectgender" /></td></tr>
<tr><td align="center"><label for="interests">Your Interests:</label></td>
<td>
<input type="checkbox" name="vehicle" value="reading" />Reading
<br />
<input type="checkbox" name="vehicle" value="sports" />Sports
<br />
<input type="checkbox" name="vehicle" value="business" />Business
<br />
<input type="checkbox" name="vehicle" value="music" />Music
<br />
<input type="checkbox" name="vehicle" value="surfing" />Surfing Web
<br />
<input type="checkbox" name="vehicle" value="studies" />Higher Studies
</td>
</tr>
<tr>
<td>
E-Mail*:
</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>
Phone*:
</td>
<td>
<input type="text" name="phone" id="phone" onkeypress="return isNumberKey(event)" />
</td>
</tr>
<tr>
<td>
Address*:
</td>
<td>
<input type="text" name="address" id="address" />
</td>
</tr>
<tr>
<td>
State*:
</td>
<td>
<input type="text" name="state" id="state" />
</tr>
<tr>
<td>
Postal Code*:
</td>
<td>
<input type="text" name="postal" id="postal" onkeypress="return isNumberKey(event)" />
</td>
</tr>
<tr>
<td>Select State</td>
<td>
<select name="state" size="1">
<option value="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VA">VA</option>
<option value="VT">VT</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select>
</td></tr>
<tr>
<td align="center" colspan="2">
<input type="button" value="Submit" onclick="return validate()" /> <input type="reset" onclick="formReset()" value="Reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
CWS (haripriya)
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.