如何成功地将 jquery 验证规则应用于 jQuery 自动完成“输入”字段？
为了进一步解释，在下面的例子中：
jquery 验证对“状态”输入字段按预期工作 - 即，它在表单提交时生成验证消息。
jquery 验证不适用于“ acstate ”输入字段 - 即，它不会在表单提交时产生验证消息。
感谢您提供的任何帮助/指导！
FWIW - 这是我正在使用的示例：
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" />
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$("#form1").validate({
rules: {
state: {
required: true,
minlength: 2
},
acstate: {
required: true,
minlength: 2
}
},
messages: {
state: {
required: "state required",
minlength: "min length {0}"
},
acstate: {
required: "acstate required",
minlength: "min length {0}"
}
}
});
$("#acstate").autocomplete(
{
source: "AZ,CA,DC,MD,NM,NV,VA".split(",")
});
$("#submit").click(function() {
if ($("#form1").valid())
{
alert("VALID");
}
else
{
alert("INVALID");
}
});
});
如果您需要查看整个 HTML...
<?xml version='1.0' encoding='UTF-8' ?>
<!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>acvalid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/redmond/jquery-ui-1.10.2.custom.css" />
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function() {
$("#form1").validate({
rules: {
state: {
required: true,
minlength: 2
},
acstate: {
required: true,
minlength: 2
}
},
messages: {
state: {
required: "state required",
minlength: "min length {0}"
},
acstate: {
required: "acstate required",
minlength: "min length {0}"
}
}
});
//statelistdata = "AZ,CA,DC,MD,NM,NV,VA";
$("#acstate").autocomplete(
{
source: "AZ,CA,DC,MD,NM,NV,VA".split(",")
});
$("#submit").click(function() {
if ($("#form1").valid())
{
alert("VALID");
}
else
{
alert("INVALID");
}
});
});
/* ]]> */
</script>
</head>
<body>
<form id="form1">
<table>
<tr>
<td><label for="state" >regular state input:</label></td>
<td><input id="state" class="required" minlength="2" maxlength="2"/></td>
</tr>
<tr>
<td><label for="acstate" >'autocomplete' state input:</label></td>
<td><input id="acstate" class="required" minlength="2" maxlength="2"/></td>
</tr>
</table>
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>