Description:
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.
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'.
Working solution (very dirty):
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 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 };
}
PROBLEM:
Again this works but it is very dirty and is not at all dynamic.
Essentially I have two issues.
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>
And the Home Controller functions
// 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 };
}
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.
So I figured it out.
Final working solution:
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 };
}
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.