我正在使用表格来更好地完成它们，因为我认为这是一项很好的技能。我有一个带有一些文本输入、单选按钮和复选框的基本表单，并且我正在使用 Coldfusion 进行服务器端验证。我遇到的一个问题是涉及持久数据。除了最后五个之外，我可以在每个领域都坚持下去。我的文本区域。不确定这是否基于它们的工作方式，或者它们与其他输入的不同之处，但我不能让他们做我想做的事。只是为了澄清，如果有任何混淆，通过“持久”，我希望数据在点击“提交”按钮后仍然在字段中，以防验证失败。
这是我到目前为止的代码（我还没有实现任何服务器端验证，只是客户端，这都被注释掉了。）
<!DOCTYPE html>
<html>
<head>
<title>Survey Time!</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Theme/themes/cssTheme.css" />
<link rel="stylesheet" href="Theme/themes/MonsterHunt.css"/>
<link rel="stylesheet" type="text/css" href="form.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
function validateForm()
{
var x=document.forms["survey"]["code"].value;
for (var i = 0; i < x.length; i++)
{
if (x[i] < '0' || x[i] > '9')
{
alert("You cannot put any letters in a zip code.");
return false;
}
}
if (x.length!=5)
{
for (var i = 0; i < x.length; i++)
{
if (x[i] < '0' || x[i] > '9')
{
alert("You cannot put any letters in a zip code.");
return false;
}
}
alert("You have entered an invalid zip code.");
return false;
}
var x=document.forms["survey"]["number"].value;
var patt=new RegExp("^1?\\W?\\s?\\W?\\d{3}\\W?\\W?\\d{3}\\W?\\d{4}$");
if(!patt.test(x))
{
alert("You are a tool");
return false;
}
var x=document.forms["survey"]["state"].value;
if (x.toUpperCase()!="AL" && x.toUpperCase()!="AK" && x.toUpperCase()!= "AZ" && x.toUpperCase()!= "AR" && x.toUpperCase()!= "CA" && x.toUpperCase()!= "CO" && x.toUpperCase()!= "CT" && x.toUpperCase()!= "DC" && x.toUpperCase()!= "DE" && x.toUpperCase()!= "FL" && x.toUpperCase()!= "GA" && x.toUpperCase()!=
"HI" && x.toUpperCase()!= "ID" && x.toUpperCase()!= "IL" && x.toUpperCase()!= "IN" && x.toUpperCase()!= "IA" && x.toUpperCase()!= "KS" && x.toUpperCase()!= "KY" && x.toUpperCase()!= "LA" && x.toUpperCase()!= "ME" && x.toUpperCase()!= "MD" && x.toUpperCase()!=
"MA" && x.toUpperCase()!= "MI" && x.toUpperCase()!= "MN" && x.toUpperCase()!= "MS" && x.toUpperCase()!= "MO" && x.toUpperCase()!= "MT" && x.toUpperCase()!= "NE" && x.toUpperCase()!= "NV" && x.toUpperCase()!= "NH" && x.toUpperCase()!= "NJ" && x.toUpperCase()!=
"NM" && x.toUpperCase()!= "NY" && x.toUpperCase()!= "NC" && x.toUpperCase()!= "ND" && x.toUpperCase()!= "OH" && x.toUpperCase()!= "OK" && x.toUpperCase()!= "OR" && x.toUpperCase()!= "PA" && x.toUpperCase()!= "RI" && x.toUpperCase()!= "SC" && x.toUpperCase()!=
"SD" && x.toUpperCase()!= "TN" && x.toUpperCase()!= "TX" && x.toUpperCase()!= "UT" && x.toUpperCase()!= "VT" && x.toUpperCase()!= "VA" && x.toUpperCase()!= "WA" && x.toUpperCase()!= "WV" && x.toUpperCase()!= "WI" && x.toUpperCase()!= "WY")
{
alert("You have entered an invalid State. Must use two letter abbreviations.");
return false;
}
if(!validateRadio(document.forms["survey"]["checkbox1a"]))
{
alert("You have failed to check at least one box for every question.");
return false;
}
if(!validateRadio(document.forms["survey"]["checkbox2a"]))
{
alert("You have failed to check at least one box for every question.");
return false;
}
if(!validateRadio(document.forms["survey"]["checkbox3a"]))
{
alert("You have failed to check at least one box for every question.");
return false;
}
if(!validateRadio(document.forms["survey"]["checkbox4a"]))
{
alert("You have failed to check at least one box for every question.");
return false;
}
if(!validateRadio(document.forms["survey"]["checkbox5a"]))
{
alert("You have failed to check at least one box for every question.");
return false;
}
alert("Thank you for submitting the form!");
return true;
}
function validateRadio (radios)
{
for (i = 0; i < radios.length; ++ i)
{
if (radios [i].checked) return true;
}
return false;
}
</script>
</head>
<body>
<cfparam name="form.fname" default=""/>
<cfparam name="form.lname" default=""/>
<cfparam name="form.mname" default=""/>
<cfparam name="form.address" default=""/>
<cfparam name="form.email" default=""/>
<cfparam name="form.number" default=""/>
<cfparam name="form.city" default=""/>
<cfparam name="form.state" default=""/>
<cfparam name="form.code" default=""/>
<cfparam name="form.radiochoice1" default=""/>
<cfparam name="form.radiochoice2" default=""/>
<cfparam name="form.radiochoice3" default=""/>
<cfparam name="form.radiochoice4" default=""/>
<cfparam name="form.radiochoice5" default=""/>
<cfparam name="form.radiochoice6" default=""/>
<cfparam name="form.radiochoice7" default=""/>
<cfparam name="form.radiochoice8" default=""/>
<cfparam name="form.radiochoice9" default=""/>
<cfparam name="form.radiochoice10" default=""/>
<cfparam name="form.radiochoice11" default=""/>
<cfparam name="form.radiochoice12" default=""/>
<cfparam name="form.radiochoice13" default=""/>
<cfparam name="form.radiochoice14" default=""/>
<cfparam name="form.radiochoice15" default=""/>
<cfparam name="form.checkbox1a" default=""/>
<cfparam name="form.checkbox2a" default=""/>
<cfparam name="form.checkbox3a" default=""/>
<cfparam name="form.checkbox4a" default=""/>
<cfparam name="form.checkbox5a" default=""/>
<cfparam name="form.textarea1" default=""/>
<cfparam name="form.textarea2" default=""/>
<cfparam name="form.textarea3" default=""/>
<cfparam name="form.textarea4" default=""/>
<cfparam name="form.textarea5" default=""/>
<div data-role="page" id='first'>
<div data-role="header">
<h1>Have we got a form for you!</h1>
</div><!-- /header -->
<div data-role="content">
<cfoutput>
<form action="form.cfm" method="post" name="survey"> <!-- creating the form for inputting search data -->
<input type="text" name="fname" required="required" value="#form.fname#" id="fname" placeholder="*First Name">
<input type="text" maxlength="1" size="1" name="mname" value="#form.mname#" id="mname" placeholder="Middle Initial">
<input type="text" name="lname" required="required" id="lname" value="#form.lname#" placeholder="*Last Name">
<input type="email" name="email" value="#form.email#" required="required" id="email" placeholder="*Email Address">
<input type="text" name="address" value="#form.address#" required="required" id="address" placeholder="*Street Adress">
<input type="tel" name="number" value="#form.number#" required="required" id="number" maxlength="14" placeholder="*Phone Number">
<input type="text" name="city" value="#form.city#" required="required" id="city" placeholder="*City">
<input type="text" maxlength="2" value="#form.state#" required="required" name="state" id="state" placeholder="*State">
<input type="text" name="code" value="#form.code#" required="required" id="code" maxlength="5" placeholder="*Zip Code">
<cfif isDefined("form.submit")>
<cfif form.radiochoice1 EQ "" >
<text color="Red" align="center" class="error">*answer this question</text>
</cfif>
</cfif>
<fieldset data-role="controlgroup">
<legend>*Who would win in a fight?</legend>
<input type="radio" name="radiochoice1" id="radiochoice1" value="a" <cfif form.radiochoice1 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Me</label>
<input type="radio" name="radiochoice1" id="radiochoice2" value="b" <cfif form.radiochoice1 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">You</label>
<input type="radio" name="radiochoice1" id="radiochoice3" value="c" <cfif form.radiochoice1 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">Him</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Which is better, cats or dogs?</legend>
<input type="radio" name="radiochoice2" required="required" id="radiochoice1" value="a" <cfif form.radiochoice2 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Cats</label>
<input type="radio" name="radiochoice2" id="radiochoice2" value="b" <cfif form.radiochoice2 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">Dogs</label>
<input type="radio" name="radiochoice2" id="radiochoice3" value="c" <cfif form.radiochoice2 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">Neither. European Guinea Pigs</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Are you a jerk?</legend>
<input type="radio" name="radiochoice3" required="required" id="radiochoice1" value="a" <cfif form.radiochoice3 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Yeah</label>
<input type="radio" name="radiochoice3" id="radiochoice2" value="b" <cfif form.radiochoice3 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">Nope</label>
<input type="radio" name="radiochoice3" id="radiochoice3" value="c" <cfif form.radiochoice3 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">WHO WANTS TO KNOW?</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Do you love me?</legend>
<input type="radio" name="radiochoice4" required="required" id="radiochoice1" value="a" <cfif form.radiochoice4 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Yeah</label>
<input type="radio" name="radiochoice4" id="radiochoice2" value="b" <cfif form.radiochoice4 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">Nope</label>
<input type="radio" name="radiochoice4" id="radiochoice3" value="c" <cfif form.radiochoice4 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">My love for you is like a flock of lemons</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Do I scare you?</legend>
<input type="radio" name="radiochoice5" required="required" id="radiochoice1" value="a" <cfif form.radiochoice5 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Yeah</label>
<input type="radio" name="radiochoice5" id="radiochoice2" value="b" <cfif form.radiochoice5 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">Nope</label>
<input type="radio" name="radiochoice5" id="radiochoice3" value="c" <cfif form.radiochoice5 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">GET AWAY FROM ME</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Wanna go to Disney World?</legend>
<input type="radio" name="radiochoice6" required="required" id="radiochoice1" value="a" <cfif form.radiochoice6 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Yay Disney!</label>
<input type="radio" name="radiochoice6" id="radiochoice2" value="b" <cfif form.radiochoice6 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">No. I hate mice</label>
<input type="radio" name="radiochoice6" id="radiochoice3" value="c" <cfif form.radiochoice6 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">AWMAIGAWD DISNEY</label>
<input type="radio" name="radiochoice6" id="radiochoice4" value="d" <cfif form.radiochoice6 EQ "d">checked="checked"</cfif>>
<label for="radiochoice4">I want Disney LAND</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Is all fair in love and war?</legend>
<input type="radio" name="radiochoice7" required="required" id="radiochoice1" value="a" <cfif form.radiochoice7 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Yeah</label>
<input type="radio" name="radiochoice7" id="radiochoice2" value="b" <cfif form.radiochoice7 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">Nope</label>
<input type="radio" name="radiochoice7" id="radiochoice3" value="c" <cfif form.radiochoice7 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">I dont love you or want to kill you, so I dont care</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Am I cool?</legend>
<input type="radio" name="radiochoice8" required="required" id="radiochoice1" value="a" <cfif form.radiochoice8 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Yeah! You Rock!</label>
<input type="radio" name="radiochoice8" id="radiochoice2" value="b" <cfif form.radiochoice8 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">No, you're lame.</label>
<input type="radio" name="radiochoice8" id="radiochoice3" value="c" <cfif form.radiochoice8 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">What is "cool"?</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Do you like cake, pie, or brownies?</legend>
<input type="radio" name="radiochoice9" required="required" id="radiochoice1" value="a" <cfif form.radiochoice9 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Cake</label>
<input type="radio" name="radiochoice9" id="radiochoice2" value="b" <cfif form.radiochoice9 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">Pie</label>
<input type="radio" name="radiochoice9" id="radiochoice3" value="c" <cfif form.radiochoice9 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">Brownies</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Do you like hamsters, mice, or gerbils?</legend>
<input type="radio" name="radiochoice10" required="required" id="radiochoice1" value="a" <cfif form.radiochoice10 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Hamsters</label>
<input type="radio" name="radiochoice10" id="radiochoice2" value="b" <cfif form.radiochoice10 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">Mice</label>
<input type="radio" name="radiochoice10" id="radiochoice3" value="c" <cfif form.radiochoice10 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">Gerbils</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Would you like fries with that?</legend>
<input type="radio" name="radiochoice11" required="required" id="radiochoice1" value="a" <cfif form.radiochoice11 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Yes</label>
<input type="radio" name="radiochoice11" id="radiochoice2" value="b" <cfif form.radiochoice11 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">No</label>
<input type="radio" name="radiochoice11" id="radiochoice3" value="c" <cfif form.radiochoice11 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">I knew you'd be saying that one day</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*What School do you go to?</legend>
<input type="radio" name="radiochoice12" required="required" id="radiochoice1" value="a" <cfif form.radiochoice12 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Carthage</label>
<input type="radio" name="radiochoice12" id="radiochoice2" value="b" <cfif form.radiochoice12 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">Somewhere lamer than Carthage</label>
<input disabled = "disabled" type="radio" name="radiochoice12" id="radiochoice3" value="choice-3">
<label for="radiochoice3">Somewhere cooler than Carthage (This answer is invalid)</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*On a scale of 1-10, how awesome am I?</legend>
<input type="radio" name="radiochoice13" required="required" id="radiochoice1" value="a" <cfif form.radiochoice13 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">10</label>
<input disabled = "disabled" type="radio" name="radiochoice13" id="radiochoice2" value="choice-2">
<label for="radiochoice2">7-9</label>
<input disabled = "disabled" type="radio" name="radiochoice13" id="radiochoice3" value="choice-3">
<label for="radiochoice3">4-6</label>
<input disabled = "disabled" type="radio" name="radiochoice13" id="radiochoice4" value="choice-4">
<label for="radiochoice4">1-3</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*What is a horse?</legend>
<input type="radio" name="radiochoice14" required="required" id="radiochoice1" value="a" <cfif form.radiochoice14 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">Yes</label>
<input type="radio" name="radiochoice14" id="radiochoice2" value="b" <cfif form.radiochoice14 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">No</label>
<input type="radio" name="radiochoice14" id="radiochoice3" value="c" <cfif form.radiochoice14 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">A wee snaw</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*WEE SNAW</legend>
<input type="radio" name="radiochoice15" required="required" id="radiochoice1" value="a" <cfif form.radiochoice15 EQ "a">checked="checked"</cfif>>
<label for="radiochoice1">WEE</label>
<input type="radio" name="radiochoice15" id="radiochoice2" value="b" <cfif form.radiochoice15 EQ "b">checked="checked"</cfif>>
<label for="radiochoice2">SNAW</label>
<input type="radio" name="radiochoice15" id="radiochoice3" value="c" <cfif form.radiochoice15 EQ "c">checked="checked"</cfif>>
<label for="radiochoice3">SNAW WEE</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Pick some chips</legend>
<input type="checkbox" name="checkbox1a" id="checkbox1a" value="a" <cfif ListFind(form.checkbox1a,"a") GT 0>checked="checked"</cfif>/>
<label for="checkbox1a">Cheetos</label>
<input type="checkbox" name="checkbox1a" id="checkbox2a" value="b" <cfif ListFind(form.checkbox1a,"b") GT 0>checked="checked"</cfif>/>
<label for="checkbox2a">Doritos</label>
<input type="checkbox" name="checkbox1a" id="checkbox3a" value="c" <cfif ListFind(form.checkbox1a,"c") GT 0>checked="checked"</cfif>/>
<label for="checkbox3a">Fritos</label>
<input type="checkbox" name="checkbox1a" id="checkbox4a" value="d" <cfif ListFind(form.checkbox1a,"d") GT 0>checked="checked"</cfif>/>
<label for="checkbox4a">Sun Chips</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*What's your favorite kind of person?</legend>
<input type="checkbox" name="checkbox2a" id="checkbox1a" value="a" <cfif ListFind(form.checkbox2a,"a") GT 0>checked="checked"</cfif>/>
<label for="checkbox1a">Nice</label>
<input type="checkbox" name="checkbox2a" id="checkbox2a" value="b" <cfif ListFind(form.checkbox2a,"b") GT 0>checked="checked"</cfif>/>
<label for="checkbox2a">Mean</label>
<input type="checkbox" name="checkbox2a" id="checkbox3a" value="c" <cfif ListFind(form.checkbox2a,"c") GT 0>checked="checked"</cfif>/>
<label for="checkbox3a">Funny</label>
<input type="checkbox" name="checkbox2a" id="checkbox4a" value="d" <cfif ListFind(form.checkbox2a,"d") GT 0>checked="checked"</cfif>/>
<label for="checkbox4a">Stoic</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Pick your favorite letter:</legend>
<input type="checkbox" name="checkbox3a" id="checkbox6" value="a" <cfif ListFind(form.checkbox3a,"a") GT 0>checked="checked"</cfif>/>
<label for="checkbox6">q</label>
<input type="checkbox" name="checkbox3a" id="checkbox7" value="b" <cfif ListFind(form.checkbox3a,"b") GT 0>checked="checked"</cfif>/>
<label for="checkbox7">m</label>
<input type="checkbox" name="checkbox3a" id="checkbox8" value="c" <cfif ListFind(form.checkbox3a,"c") GT 0>checked="checked"</cfif>/>
<label for="checkbox8">z</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*Check all the colors you're currently wearing:</legend>
<input type="checkbox" name="checkbox4a" id="checkbox1a" value="a" <cfif ListFind(form.checkbox4a,"a") GT 0>checked="checked"</cfif>/>
<label for="checkbox1a">Blue</label>
<input type="checkbox" name="checkbox4a" id="checkbox2a" value="b" <cfif ListFind(form.checkbox4a,"b") GT 0>checked="checked"</cfif>/>
<label for="checkbox2a">Green</label>
<input type="checkbox" name="checkbox4a" id="checkbox3a" value="c" <cfif ListFind(form.checkbox4a,"c") GT 0>checked="checked"</cfif>/>
<label for="checkbox3a">Red</label>
<input type="checkbox" name="checkbox4a" id="checkbox4a" value="d" <cfif ListFind(form.checkbox4a,"d") GT 0>checked="checked"</cfif>/>
<label for="checkbox4a">White</label>
</fieldset>
<fieldset data-role="controlgroup">
<legend>*What should all the single ladies do?</legend>
<input type="checkbox" name="checkbox5a"id="checkbox1a" value="a" <cfif ListFind(form.checkbox5a,"a") GT 0>checked="checked"</cfif>/>
<label for="checkbox1a">Put a ring on it if they like it</label>
<input type="checkbox" name="checkbox5a" id="checkbox2a" value="b" <cfif ListFind(form.checkbox5a,"b") GT 0>checked="checked"</cfif>/>
<label for="checkbox2a">Put their hands up</label>
<input type="checkbox" name="checkbox5a" id="checkbox3a" value="c" <cfif ListFind(form.checkbox5a,"c") GT 0>checked="checked"</cfif>/>
<label for="checkbox3a">Buy a goat</label>
<input type="checkbox" name="checkbox5a" id="checkbox4a" value="d" <cfif ListFind(form.checkbox5a,"d") GT 0>checked="checked"</cfif>/>
<label for="checkbox4a">Go bowling</label>
</fieldset>
<textarea placeholder="*Would you like to input some lovely text?" value="#form.textarea1#" required="required" cols="40" rows="5" name="textarea1" id="textarea1"></textarea>
<textarea placeholder="*How about some more?" required="required" value="#form.textarea2#" cols="40" rows="5" name="textarea2" id="textarea2"></textarea>
<textarea placeholder="*But I bet you'd love to type more stuffs" value="#form.textarea3#" required="required" cols="40" rows="5" name="textarea3" id="textarea3"></textarea>
<textarea placeholder="Tell me about your pet panda:" cols="40" value="#form.textarea4#" rows="5" name="textarea4" id="textarea4"></textarea>
<textarea placeholder="Why do you love the dance?" cols="40" value="#form.textarea5#" rows="5" name="textarea5" id="textarea5"></textarea>
<input type="submit" name="submit"value="Submit" data-inline="true"/>
</form>
</cfoutput>
<script type="text/javascript">
/* $('#survey').submit(function () {
$.mobile.changePage( "#ThankYou", {
type: "post",
data: $("form#submit").serialize()
});
return validateForm();
});*/
</script>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>