我很困惑在哪里可以找到我的错误。
<head>
<title>SAMPLE VALIDATION USING JQUERY</title>
</head>
<style>
.error {
color: red;
}
</style>
<script src="/WebExercise/jquery-1.9.0.js"></script>
<script src="/WebExercise/jquery.validate.min.js"></script>
<script src="jquery.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function () {
alert("SUBMITTED!");
}
});
jQuery.validator.addMethod("accept", function (value, element, param) {
return value.match(new RegExp("." + param + "$"));
});
$(document).ready(function () {
// validate form on keyup and submit
$("#form1").validate({
rules: {
firstname: {
accept: "[a-zA-Z]+"
},
fname: {
accept: "[a-zA-Z]+"
},
mname: {
accept: "[a-zA-Z]+"
},
zip: {
accept: "[0-9]+"
},
age: {
accept: "[0-9]+"
},
bday: {
accept: "[a-zA-Z0-9]"
},
sss: {
accept: "[0-9]+"
},
t: {
accept: "[0-9]+"
},
cp: {
accept: "[0-9]+"
},
stno: {
accept: "[a-zA-Z0-9]"
},
add: {
accept: "[a-zA-Z0-9]"
},
pos1: {
accept: "[a-zA-Z0-9]"
},
pos2: {
accept: "[a-zA-Z0-9]"
},
d: {
accept: "[0-9]+"
},
h1: {
accept: "[0-9]+"
},
em: {
required: true,
em: true
}
},
messages: {
date: "Enter Date!",
lname: "Letters only",
fname: "Letters only",
mname: "Letters only",
add: "Alphanumeric ",
zip: "Numbers only",
age: "Numbers only",
t: "Numbers only",
cp: "Numbers only",
sss: "Numbers only",
pos1: "Alphanumeric ",
pos2: "Alphanumeric ",
d: "Numbers Only ",
h1: "Numbers Only ",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 6 characters"
},
em: "Please enter a valid email address",
}
});
});
</script>
这是我的HTML：
<body>
<form name="form1" id="form1" action="#" method="post">
<h2><font face="Arial" size="5"><b></b></font><b><center><font face="Arial" size="5">
SAMPLE APPLICATION FORM<br><br><br><br><br>
APPLICATION FOR EMPLOYMENT<br>
APPLICANTS MAY BE TESTED FOR ILLEGAL DRUGS<br>
(MANILA)</font></center></b></h2>
<br>
<br>
<br>
<table style="margin: auto;">
<tbody>
<tr>
<th>
<br>PLEASE PRINT ALL REQUESTED INFORMATION
<br>EXCEPT SIGNATURE
<br>
<br>
</th>
<td> </td>
<td>
<div align="center">
<input type="text" placeholder="SIGNATURE">
</div>
</td>
</tr>
</tbody>
</table>
<hr width="100%" size="1" color="black">
<br>
<div align="right">
<label for="date">Date:</label>
<input type="date" size="3" name="date">
</div>
<br>
<br>
<fieldset>
<legend>
<div align="center"><u>PERSONAL INFORMATION</u>
</div>
</legend>
<li>
<label for="lname">Last Name: </label>
<input type="text" name="lname" placeholder="Last Name" maxlength="25">
</li>
<br>
<li>
<label for="fname">First Name: </label>
<input type="text" name="fname" placeholder="First Name" maxlength="25">
</li>
<br>
<li>
<label for="mname">Middle Name: </label>
<input type="text" name="mname" placeholder="Middle Name" maxlength="25">
</li>
<br>
<br>
<li>
<label="bday">Birthday</label>
<input type="text" name="bday" size="15" </li>
<br>
<br>
<label for="add">Present Address:</label>
<li>
<input type="text" name="add" maxlength="4" size="5" min="1" max="9999" placeholder="Street No.">
<input type="text" name="add" maxlength="30" size="15" placeholder="Street" pattern="[a-zA-Z]*">
<input type="text" name="add" maxlength="30" size="15" placeholder="City" pattern="[a-zA-Z]*" title="Letters Only">
<input type="text" name="add" maxlength="30" size="15" placeholder="State" pattern="[a-zA-Z]*" title="Letters Only">
<input type="text" name="zip" maxlength="4" size="5" min="1" max="9999" placeholder="Zip Code" title="Numbers Only" pattern="[0-9]*">
</li>
<br>
<br>
<li>
<label for="gender">Gender:</label>
<input type="radio" name="gender" size="3">Male
<input type="radio" name="gender" size="3">Female</li>
<br>
<br>
<li>
<label for="em">Email</label>
<input type="email" name="em" size="15" placeholder="abc123@456.com" data-validation="em">
</li>
<br>
<br>
<li>
<label for="age">Age</label>
<input type="text" name="em" size="10">
</li>
<br>
<br>
<li>
<label for="hl">How long are you planning to work?</label>
<input type="text" name="hl" maxlength="4" size="3" min="0" max="9999" title="State number of days!" pattern="[0-9]*">
</li>
<br>
<li>
<label for="sss">Social Security Number:</label>
<input type="text" name="sss" size="5" maxlength="3" min="0" max="9" placeholder=" ---" title="Numbers Only" pattern="[0-9]*">
<input type="text" name="sss" size="5" maxlength="2" min="0" max="9" placeholder=" -- " title="Numbers Only" pattern="[0-9]*">
<input type="text" name="sss" size="5" maxlength="4" min="0" max="9" placeholder=" ----" `title="Numbers Only" pattern="[0-9]*">
</li>
<br>
<br>
<li>
<label for="t">Telephone No.:</label>
<input type="text" name="t" maxlength="7" title="Numbers Only" pattern="[0-9]*">
</li>
<br>
<br>
<li>
<label for="cp">Cellphone No.:</label>
<input type="text" name="cp" maxlength="11" title="Numbers Only" pattern="[0-9]*">
</li>
<br>
<li>
<label for="u">If under 18, please list age:</label>
<input type="text" name="u" maxlength="2" min="1" max="17" title="Numbers Only" pattern="[0-9]*">
</li>
<br>
<li>
<label for="pos">Position applied for:</label>
<input type="text" name="pos1" size="30" placeholder="(1)Please Specify">
<br>
<input type="text" name="pos2" size="30" placeholder="(2)Please Specify">
</li>
<br>
<li>
<label for="days">Desired Available Days Of Work</label>
</li>
<br> No Pref
<input type="checkbox" name="days" value="No Pref">Monday
<input type="checkbox" name="days" value="Monday" class="styled" onclick="return testcheck()">Tuesday
<input type="checkbox" name="days" value="Tuesday" class="styled" onclick="return testcheck()">Wednesday
<input type="checkbox" name="days" value="Wednesday" class="styled" onclick="return testcheck()">
<br>
<br> Thursday
<input type="checkbox" name="days" value="Thursday" onclick="return testcheck()">Friday
<input type="checkbox" name="days" value="Friday" onclick="return testcheck()">Saturday
<input type="checkbox" name="days" value="Saturday" onclick="return testcheck()">Sunday
<input type="checkbox" name="days" value="Sunday" onclick="return testcheck()">
</li>
<br>
<br>
<br>
<li>
<label for="d">Salary desired: </label>
<input type="text" name="d" size="20" placeholder="₱" title="Numbers Only" pattern="[0-9]*">
</li>
<br>
<br>
<br>
<li>
<label for="ed">Employment desired:</label><span class="hint">*Choose one</span>
<input type="radio" name="ed" value="FULL-TIME" class="styled"><u>FULL-TIME</u>
<input type="radio" name="ed" value="PART-TIME" class="styled"><u>PART-TIME</u>
<input type="radio" name="ed" value="FULL-OR PART-TIME" class="styled"><u>FULL-OR PART-TIME</u>
</li>
<br>
<br>
<li>
<label for="w">When available for work?</label>
<input type="text" name="w">
<hr width="100%" size="1" color="black">
</li>
</fieldset>
<br>
<hr width="100%" size="3" color="black">
<table border="0" style="margin: auto;" width="990">
<tbody>
<tr>
<td width="150">
<center>TYPE OF SCHOOL</center>
</td>
<td width="220">
<center>NAME OF SCHOOL</center>
</td>
<td width="220">
<center>LOCATION
<br>(Complete Mailing Address)</center>
</td>
<td width="120">
<center>NUMBER OF YEARS
<br>COMPLETED</center>
</td>
<td width="220">
<center>MAJOR & DEGREE</center>
</td>
</tr>
<tr>
<td>
<center> </center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
</tr>
<tr>
<td>
<center>
<label="a">High School</label>
</center>
</td>
<td>
<textarea rows="2" name="a" cols="30"></textarea>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
</tr>
<tr>
<td>
<center> </center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
</tr>
<tr>
<td>
<center>
<label="b">College</label>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
</tr>
<tr>
<td>
<center> </center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
</tr>
<tr>
<td>
<center>
<label="c">Bus/Trade School</label>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
</tr>
<tr>
<td>
<center> </center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
</tr>
<tr>
<td>
<center>
<label="p">Professional School</label>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
<td>
<center>
<textarea rows="2" cols="30"></textarea>
</center>
</td>
</tr>
<tr>
<td>
<center> </center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
<td>
<center></center>
</td>
</tr>
</tbody>
</table>
<hr width="100%" size="1" color="black">
<br>
<br>
<br>
<h2><i>HAVE YOU EVER BEEN CONVICTED OF A CRIME?</i>
<label = "h"></label>
<div align="center">
<font size="4">
<br>
<br>
<input type="checkbox" name"h">YES
<input type="checkbox" name"h">NO
</div>
</center>
</h2>
<br>
<br>
<br>
<i>
If yes, please state number of conviction(s), nature of the offense(s) leading to conviction(s), how recently such offense(s) was/were committed, sentence(s) imposed, and type(s) of rehabilitation.</i>
<hr width="100%" size="2" color="black">
<textarea rows "6" cols="222"></textarea>
<br>
<hr width="100%" size="2" color="black">
<br>
<center>
<input type="submit" value="Submit" type="submit" onclick="return (verify());" />
<input type="reset" value="Reset" type="reset">
</center>
<frame scrolling="auto"></frame>
</frameset>
</font>
</center>
</h2>
</body>
正如您所看到我需要验证方面的帮助，我似乎无法验证我的jQuery网站。如果输入文本为空，则应显示红色文本。这是HTML，我是否需要更改验证器？
答案 0 :(得分：0)
在这里试试这个jsfiddle：http://jsfiddle.net/Qd58u/
你的标签也混杂在html中，/ form应该在/ body
中</form>
</body>
您可能只需要这两个，确保路径正确且文件存在：
<script src="/WebExercise/jquery-1.9.0.js"></script>
<script src="/WebExercise/jquery.validate.min.js"></script>