我有一个jQuery autocomplete fild,它从我的MVC动作中获取现有数据。我想确保输入到该字段的数据尚未存在于数据库中。
我在自动完成时使用.result和.change将this字段设置为class =“input-validation-error”。当我添加xVal客户端验证时,这仍然有效,但xVal似乎清除了css类,所以现在字段条目会短暂地变为红色,然后返回到清除背景。
我不想尝试更改xVal代码,而是希望获得xVal客户端验证,以便将字段显示为错误状态,就像正常的客户端数据验证错误一样。
我该怎么做?我可以在autocomplete .result事件中使用什么代码来强制xVal中的错误状态?
更新 我尝试了Wyatt Barnett的想法,但是你可以从我的评论中看出它不是我想要的。这是我的代码:
字段标记:
<p>
<%= Html.LocalisedLabel("ProjectId") %>
<%= Html.TextBox("project.ProjectId") %>
<%= Html.ValidationMessage("project.ProjectId", "*") %>
</p>
xVal标记:
<%= Html.ClientSideValidation<ProjectBO>("project").UseValidationSummary("myValidationSummary") %>
<%= Html.ClientSideValidation<ProjectBO>("project").AddRule("ProjectId", new RemoteRule(Url.Action("ValidateProjectIdCreate", "LookUp", new { projectId = Model.ProjectId})))%>
自动填充的javascript标记:
<script type="text/javascript">
$(document).ready(function() {
$('#project_ProjectId').autocomplete('<%= Url.Action("ProjectIdList", "LookUp") %>',
{
delay: 10,
minChars: 1,
matchCase: 0,
matchSubset: 1,
autoFill: false,
maxItemsToShow: 10,
cacheLength: 10
}
);
$('#project_ProjectId').result(function(item) {
if (item) {
//match
$('#project_ProjectId').attr("class", "input-validation-error");
}
else {
$('#project_ProjectId').removeAttr("class");
}
});
$('#project_ProjectId').change(function() {
$('#project_ProjectId').attr("class", "");
});
});
</script>
这个脚本给了我要处理的事件,但是我能把它放进去吗?
答案 0 :(得分:1)
为什么不upgrade to xVal 1.0并利用它的ajax验证玩具?这样你就不必在这个框架上打架了。
好的,既然这个角度不起作用,也许你可以使用autocomplete.result和jquery验证API(xVal也使用它)来处理事情。
答案 1 :(得分:0)
终于搞定了。
我在输入字段上使用jQuery自动完成功能,通过显示EXISTING数据库条目的查找列表为用户提供一些指导。
通过从自动完成中选择显示的列表项或通过键入不存在的数据库条目退出字段,xVal RemoteValidator将触发设置验证失败条件或清除它。
代码如下:
<%= Html.ClientSideValidation<ProjectBO>("project").UseValidationSummary("myValidationSummary"
.AddRule(“ProjectId”,new RemoteRule(Url.Action(“ValidateProjectIdCreate”,“LookUp”)))%&gt;
自动完成脚本如下:
<script type="text/javascript">
$(document).ready(function() {
$('#project_ProjectId').autocomplete('<%= Url.Action("ProjectIdList", "LookUp") %>',
{
delay: 10,
minChars: 1,
matchCase: 0,
matchSubset: 1,
autoFill: false,
maxItemsToShow: 10,
cacheLength: 10
}
);
});
</script>
然后我删除了问题中前一代码中的autocomplete.result和.change事件。
运作良好。