使用Javascript验证表单
问题描述：
I'm having problems trying to validate an entire form using Javascript.
"Add JavaScript code to produce an error message and suppress submission of the form if any quantity field contains non-numeric data. (It's OK for a quantity to be empty, but if it's non-empty, it must have only numbers.) Add an action= attribute to your tag to submit the form to a website (not going to put actual website). Test that the form is submitted correctly when the quantities are numeric or empty, and that an error message is produced otherwise."
I've done all the instructions asked me to do and it isn't working. We are supposed to use the form that we created in one of the previous labs. Here is the code that I have been working on.
<!DOCTYPE html>
<html>
<head>
<title>Lab 6, Part 3</title>
<meta charset="UTF-8"/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<script type="text/javascript">
function validateForm(){
var a = document.forms["myform"]["Pokemon"].value;
var b = document.forms["myform"]["Pokeball"].value;
var c = document.forms["myform"]["Pikachu"].value;
var d = document.forms["myform"]["firstname"].value;
var e = document.forms["myform"]["lastname"].value;
var f = document.forms["myform"]["streetaddress"].value;
var g = document.forms["myform"]["city"].value;
var h = document.forms["myform"]["zipcode"].value;
if (a = null || a == ""){
alert("Grapes must be filled out!");
return false;
}
if (b = null || b == ""){
alert("Cherries must be filled out!");
return false;
}
if (c = null || c == ""){
alert("Strawberries must be filled out!");
return false;
}
if (d = null || d == ""){
alert("First Name must be filled out!");
return false;
}
if (e = null || e == ""){
alert("Last Name must be filled out!");
return false;
}
if (f = null || f == ""){
alert("Street Address must be filled out!");
return false;
}
if (g = null || g == ""){
alert("City must be filled out!");
return false;
}
if (h = null || h == ""){
alert("Zip Code must be filled out!");
return false;
}
}
</script>
</head>
<body><form>
<form name="myform" action="http://weblab.kennesaw.edu/formtest.php"
onsubmit="return validateForm()"
method = "post">
<h1 style="text-align:center">Lab 6, Part 3</h1>
<h2 style="text-align:center">IT 3203</h2>
<a href="index.html"><p style="text-align:center">Main Page!</p></a>
<p>Grapes</p><input type=text size=3 maxlength=3 name="Pokemon">
<p>Cherries</p><input type=text size=3 maxlength=3 name="Pokeball">
<p>Strawberries</p><input type=text size=3 maxlength=3 name="Pikachu">
<br>
<label>First Name
<input type="text"
name="firstname" id="firstname"
size="25" />
</label>
<br>
<br>
<label>Last Name
<input type="text"
name="lastname" id="lastname"
size="25" />
</label>
<br>
<br>
<label>Street Address
<input type="text"
name="streetaddress" id="streetaddress"
size="35" />
</label>
<br>
<br>
<label>City
<input type="text"
name="city" id="city"
size="25" />
</label>
<label>State:
<select name="state">
<option>Please Select</option>
<option>Alabama</option>
<option>Alaska</option>
<option>Arizona</option>
<option>Arkansas</option>
<option>California</option>
<option>Colorado</option>
<option>Connecticut</option>
<option>Delaware</option>
<option>Florida</option>
<option>Georgia</option>
<option>Hawaii</option>
<option>Idaho</option>
<option>Illinois</option>
<option>Indiana</option>
<option>Iowa</option>
<option>Kansas</option>
<option>Kentucky</option>
<option>Louisiana</option>
<option>Maine</option>
<option>Maryland</option>
<option>Massachusetts</option>
<option>Michigan</option>
<option>Minnesota</option>
<option>Mississippi</option>
<option>Missouri</option>
<option>Montana</option>
<option>Nebraska</option>
<option>Nevada</option>
<option>New Hampshire</option>
<option>New Jersey</option>
<option>New Mexico</option>
<option>New York</option>
<option>North Carolina</option>
<option>North Dakota</option>
<option>Ohio</option>
<option>Oklahoma</option>
<option>Oregon</option>
<option>Pennsylvania</option>
<option>Rhode Island</option>
<option>South Carolina</option>
<option>South Dakota</option>
<option>Tennessee</option>
<option>Texas</option>
<option>Utah</option>
<option>Vermont</option>
<option>Virginia</option>
<option>Washington</option>
<option>West Virginia</option>
<option>Wisconsin</option>
<option>Wyoming</option>
</select>
</label>
<br>
<br>
<label>Zip code:
<input type="text"
name="zipcode" id="zipcode"
size="20" />
</label>
</form>
<br>
<br>
<label>Visa
<input type="radio" name="pref_payment"
id="pref_payment_visa" value="visa" checked />
</label><br />
<label>MasterCard
<input type="radio" name="pref_payment"
id="pref_payment_master" value="master" checked />
</label><br />
<label>American Express
<input type="radio" name="pref_payment"
id="pref_payment_american" value="american" checked />
</label><br />
<input type="button" onclick="confirmation()" value="submit">
</form>
</body>
</html>
It is probably something minor that I have overlooked or something. Oh and we had to save the files in .php so maybe that has a lot to do with it.
答
1) Check your form tag. You got two there.
<form>
2) Your submit button type.
Should be:
type="submit"
Not:
type="button"
And no need to add:
onclick="confirmation()"