在每个人都因为评论"这个问题已经被问过XXX次了"而杀了我之前,我已经搜索了这个问题并尝试了所有可能的修复,但我不能让这个工作-它曾经工作,但现在它不工作了,我不知道为什么…据我所知,这很可能是一些简单的事情,令人沮丧。我已经将JQuery源文件的位置移到了页面的顶部,就在验证脚本的上方,但是没有任何效果。
我只是错过了一些简单的东西还是这根本不起作用?
下面是我的代码:
<!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 Page</title>
<link rel="stylesheet" href="cls.css">
<script src="jquery/jquery-1.11.1.min.js"></script>
<script src="jquery/jquery.validate.js"></script>
<script src="jquery/additional-methods.min.js"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#y_candela").focus();
$("input").not( $(":button") ).keypress(function (evt) {
if (evt.keyCode == 13) {
iname = $(this).val();
if (iname !== 'Submit'){
var fields = $(this).parents('form:eq(0),body').find('input, textarea, select');
var index = fields.index( this );
if ( index > -1 && ( index + 1 ) < fields.length ) {
fields.eq( index + 1 ).focus();
}
return false;
}
}
});
});
</script>
</head>
<body bgcolor="#D2D7DD" OnLoad="document.step2.y_candela.focus();">
<div style="margin-left:auto; margin-right:auto; background-color:#FFFFFF; border-radius:8px; box-shadow: 0 0 15px #555; height: 470px; width: 540px; padding: 5px;position:relative;">
<div id="content" style="position:absolute;top:10px;">
<!---Page Content to go here, standard area is 800px by 480px--->
<div style="width: 450px; text-align: center;">
<form action='med_step3.asp' method='POST' name='step2' id='yellow'>
<table width="450px">
<tr>
<td colspan="3" class="center">
<h1>Medium Range<br />Step 2 - Yellow Circuit</h1>
<td>
</tr>
<tr>
<td colspan="3" class="center">
<h2>Operator: JW</h2>
</td>
</tr>
<tr>
<td class="right">
Candela: <input type="number" name="y_candela" id="y_candela" class="rounded" autocomplete="off" />
</td>
<td class="left" colspan="2">
(1100 - 1466)
</td>
</tr>
<tr>
<td class="right">
TP (mV): <input type="number" name="y_tp" id="y_tp" class="rounded" autocomplete="off" />
</td>
<td class="left" colspan="2">
(260 - 360)
</td>
</tr>
<tr>
<td class="right">
Current (mA): <input type="number" name="y_current" id="y_current" class="rounded" autocomplete="off" />
</td>
<td class="left" colspan="2">
(260 - 295)
</td>
</tr>
<tr>
<td class="right">
x: <input type="text" name="y_x" id="y_x" class="rounded" value="0.5617" readonly />
</td>
<td class="left">
y: <input type="text" name="y_y" id="y_y" class="rounded" value="0.4262" readonly />
</td>
<td>
<img id="imgy" src="images/cross.gif" alt="image" />
</td>
</tr>
<tr>
<td class="right">
Lux: <input type="text" maxlength="3" name="y_lux" id="y_lux" class="rounded" autocomplete="off" />
</td>
</tr>
<tr>
<td class="rightpad">
+10°
</td>
<td class="leftpad">
-10°
</td>
</tr>
<tr>
<td class="right">
Angle Reading:
<input type="number" maxlength="3" name="yel_+10" id="yel_+10" class="rounded" autocomplete="off" />
</td>
<td class="left">
<input type="number" maxlength="3" name="yel_-10" id="yel_-10" class="rounded" autocomplete="off" />
(400 - 700)
</td>
</tr>
<tr>
<td colspan="3" class="center">
<input type="Submit" Value="Continue" id="submit" class="roundedBtn" />
<input type="button" Value="Cancel" onClick="window.location='cls_test.asp';" class="roundedBtn" />
</td>
</tr>
<tr>
<td colspan="3" class="center">
<input type="Submit" Value="Failure" name="fail" class="cancel" onclick="return confirm('Confirm Unit Failure');" />
</td>
</tr>
</table>
</form>
<script>
$( "#yellow" ).validate({
rules: {
y_candela: {
required: true,
min: 1100,
max: 1466
},
y_tp: {
required: true,
min: 260,
max: 360
},
y_current: {
required: true,
min: 260,
max: 295
},
y_lux: {
required: true,
minlength: 3,
maxlength: 3
},
yel_+10: {
required: true;
minlength: 3,
maxlength: 3,
min: 400,
max: 700
},
yel_-10: {
required: true;
minlength: 3,
maxlength: 3,
min: 400,
max: 700
}
}
});
</script>
<script type="text/javascript">
// document is ready
var submitButton = document.getElementById('submit');
submitButton.setAttribute("disabled","disabled");
onload = function calculateY() {
var yx = document.getElementById('y_x').value;
var yy = document.getElementById('y_y').value;
var result = false;
if (yy <= (yx - 0.12))
{
if (yy >= (0.79 - (0.667 * yx)))
{
if (yy >= (yx - 0.17))
{
result = true;
}
if(result == false) {
submitButton.setAttribute("disabled","disabled");
} else {
submitButton.removeAttribute("disabled");
document.getElementById("imgy").src = "images/tick.gif";
result = false;
}
}
}
}
</script>
</div>
</div>
</div>
</body>
</html>
<script src="jquery/jquery-1.11.1.min.js"></script>
...
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
错误的原因在这一行。您已经两次声明了jQuery库。删除其中一个声明,一切都应该正常工作。
还要注意,你不能在jQuery声明之前声明jQuery 的validate
部分(如果你决定删除第一个声明,则)。