与MVC 4个远程jQuery验证，动态验证所有输入起始禄？ [英] remote jQuery validation with MVC 4, dynamically validate all inputs starting with loc?
问题描述
说明：
我在那个有5个文本框命名loc1-5和一个提交按钮的MVC4应用程序的简单形式。该应用程序最多可在文本框loc1-5 5个地址，并使用与jQuery Bing的地理code做服务上的地址进行一些处理，并创建一个路线图。
I have a simple form in an MVC4 application that has 5 textboxes named loc1-5 and a submit button. The application takes up to 5 addresses in the textboxes loc1-5 and uses the bing geocode services with jQuery to do some processing on the addresses and create a map with directions.
问题是，我需要验证loc1-5文本框，以确保它们继续之前的有效地址，并决定是有道理的最好方法是使用jQuery.validate与一个MVC控制器功能的远程调用可以用我的prebuilt功能检查一个有效的地址。
The issue is that I need to validate the loc1-5 textboxes to ensure that they are valid addresses before continuing and decided that the best way that makes sense is to use jQuery.validate with a remote call to an MVC controller function that can use my prebuilt functions to check for a valid address.
现在我没有拿出一个有效的解决方案来验证这些字段，但我迫切需要，使其更动态的，所以，在未来可以用最小的努力添加更多的文本框。理想情况下，我想的逻辑工作是这样开始进行验证以'禄'开头的投入。
Now I did come up with a working solution to validate these fields but I desperately need to make it more dynamic so that in the future more textboxes can be added with minimal effort. Ideally I would like the logic to work something like validate on all inputs that start with 'loc'.
工作液（很脏）：
简单的形式（MVC视图）
Simple form (in MVC view)
<form action="/Home/ViewResult" method="post" id="ViewResult" name="ViewResult">
<fieldset>
<legend>Enter Route</legend>
<p>
Address 1 (Start & End):
</p>
<p>
<input type="text" id="loc1" name="loc1" value='' />
</p>
<p>
Address 2:
</p>
<p>
<input type="text" id="loc2" name="loc2" value='' />
</p>
<p>
Address 3:
</p>
<p>
<input type="text" id="loc3" name="loc3" value='' />
</p>
<p>
Address 4:
</p>
<p>
<input type="text" id="loc4" name="loc4" value='' />
</p>
<p>
Address 5:
</p>
<p>
<input type="text" id="loc5" name="loc5" value='' />
</p>
<p>
<input type="submit" value="Route"/>
</p>
</fieldset>
</form>
jQuery验证code（MVC中的视图）
jQuery validation code (in MVC view)
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ViewResult").validate({
onfocusout: false,
onkeyup: false,
rules: {
"loc1": {
required: true,
remote: {
url: "/Home/IsValidAddress1",
timeout: 2000,
type: "post"
}
},
"loc2": {
required: true,
remote: {
url: "/Home/IsValidAddress2",
timeout: 2000,
type: "post"
}
},
"loc3": {
required: true,
remote: {
url: "/Home/IsValidAddress3",
timeout: 2000,
type: "post"
}
},
"loc4": {
remote: {
url: "/Home/IsValidAddress4",
timeout: 2000,
type: "post"
}
},
"loc5": {
remote: {
url: "/Home/IsValidAddress5",
timeout: 2000,
type: "post"
}
}
},
messages: {
"loc1": {
required: "Start/End Location is a required field.",
remote: "Please enter a valid address."
},
"loc2": {
required: "Please enter at least 3 addresses.",
remote: "Please enter a valid address. "
},
"loc3": {
required: "Please enter at least 3 addresses.",
remote: "Please enter a valid address. "
},
"loc4": {
remote: "Please enter a valid address. "
},
"loc5": {
remote: "Please enter a valid address. "
},
}
});
});
</script>
远程引用的家庭控制器功能
Functions in Home Controller referenced by remote
// Function to check for a valid address
public Boolean IsValidAddress(string location)
{
// If it is not blank
if (location != "")
{
// Attempt to get the waypoint
Waypoint waypoint = getWaypoint(location);
// If no waypoint returned, return false
if (waypoint == null)
{
return false;
}
}
return true;
}
public JsonResult isValidAddress1(string loc1) // Parameter must be textbox name
{
if (!IsValidAddress(loc1))
{
return new JsonResult { Data = false };
}
return new JsonResult { Data = true };
}
public JsonResult isValidAddress2(string loc2) // Parameter must be textbox name
{
if (!IsValidAddress(loc2))
{
return new JsonResult { Data = false };
}
return new JsonResult { Data = true };
}
public JsonResult isValidAddress3(string loc3) // Parameter must be textbox name
{
if (!IsValidAddress(loc3))
{
return new JsonResult { Data = false };
}
return new JsonResult { Data = true };
}
public JsonResult isValidAddress4(string loc4) // Parameter must be textbox name
{
if (!IsValidAddress(loc4))
{
return new JsonResult { Data = false };
}
return new JsonResult { Data = true };
}
public JsonResult isValidAddress5(string loc5) // Parameter must be textbox name
{
if (!IsValidAddress(loc5))
{
return new JsonResult { Data = false };
}
return new JsonResult { Data = true };
}
问题：
此外，这工作，但它是非常肮脏，是不是在所有动态。
Again this works but it is very dirty and is not at all dynamic.
基本上我有两个问题。
- 如何写jQuery的简写为所有人创造文本框开头为LOC验证规则？
- 至于我可以告诉大家，处理远程调用必须传递给它的文本框的名称MVC控制器功能。所以，我怎么能有一个MVC控制器功能处理到它的多个远程调用？
我不是在jQuery的很强大，但我会真正想要的是这样的事情，所以我可以用最小的努力以后添加更多的文本框：
I am not very strong in jQuery but what I would really want is something like this so I can add more textboxes later with minimal effort:
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ViewResult").validate({
onfocusout: false,
onkeyup: false,
rules: {
"loc1": {
required: true,
},
"loc2": {
required: true,
},
"loc3": {
required: true,
},
$("input=text").StartsWith("loc").each(): {
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post"
}
}
},
messages: {
"loc1": {
required: "Start/End Location is a required field.",
},
"loc2": {
required: "Please enter at least 3 addresses.",
},
"loc3": {
required: "Please enter at least 3 addresses.",
},
$("input=text").StartsWith("loc").each(): {
remote: "Please enter a valid address. "
},
}
});
});
</script>
和主控制器的功能
// Function to check for a valid address
public JsonResult IsValidAddress(string loc) // loc variable connect to dynamic textbox names?
{
// If it is not blank
if (loc != "")
{
// Attempt to get the waypoint
Waypoint waypoint = getWaypoint(loc);
// If no waypoint returned, return false
if (waypoint == null)
{
return new JsonResult { Data = false };
}
}
return new JsonResult { Data = true };
}
最后请注意，我没有改变MVC模式的能力。我见过类似这样的写验证规则和远程调用直接在MVC模式很多解决办法，但我根本无法这样做的。
Finally note that I do not have the ability to change the MVC Model. I have seen many solutions similar to this that write the validation rules and remote calls directly in the MVC model, but I simply cannot do it that way.
改进的任何建议，欢迎并提前任何答复表示感谢。
Any suggestions for improvement are welcome and thanks in advance for any responses.
请尝试，并告诉我在哪里出了错，或者如果我想要什么，甚至有可能。
Please try and tell me where I went wrong or if what I want is even possible.
推荐答案
所以我想它了。
最终有效的解决方案：
在MVC家庭控制器功能：
function in MVC Home Controller:
// Function to check for a valid address
// Note: address variable parameter connects to data attribute in remote call
public JsonResult IsValidAddress(string address)
{
// If it is not blank
if (address != "")
{
// Attempt to get the waypoint
Waypoint waypoint = getWaypoint(address);
// If no waypoint returned, return false
if (waypoint.Location == null)
{
return new JsonResult { Data = false };
}
}
return new JsonResult { Data = true };
}
在View jQuery函数：
jQuery functions in View:
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#ViewResult").validate({
onfocusout: false,
onkeyup: false
});
$("#loc1").rules("add", {
required: true,
messages: {
required: "Start/End Location is a required field.",
}
});
$("#loc2").rules("add", {
required: true,
messages: {
required: "Please enter at least 3 addresses."
}
});
$("#loc3").rules("add", {
required: true,
messages: {
required: "Please enter at least 3 addresses."
}
});
$('#ViewResult [name^="loc"]').each(function () {
var currentValue = null;
currentValue = $(this);
$(this).rules("add", {
remote: {
url: "/Home/IsValidAddress",
timeout: 2000,
type: "post",
data: { address: function () { return currentValue.val(); } }
},
messages: {
remote: "Please enter a valid address."
}
});
});
});
</script>
我花了这么多时间试图弄清楚这证明，我想我会分享。
I took so much time trying to figure this out that I thought I would share.
这篇关于与MVC 4个远程jQuery验证，动态验证所有输入起始禄？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
