We want to verify that only valid addresses are entered into a contact form. All valid addresses come from our Web Address Locator. How do I validate each address to ensure that it is an address that we have in our system? Otherwise I want to block the user from sending the information. In other words I only want items from the autocomplete allowed for entry.
Here is the form: Contact Information Update
Chris,
It is now up on github. You can find it at:
CityofYakima/Yak-Back · GitHub
Regards,
Tom
I tried to enter my name, but I wanted it to invalidate that once I did; might need to extend it if I go .NET based on a button click event to see if an item is in the list.
I am going to try to do it with just JavaScript for now, but this is some excellent information.
This is awesome. Do you have it on Github as well? I wouldn't mind downloading the package.
Here's a JS Fiddle example I put together showing you how to prevent free text (defacto validation):
Edit fiddle - JSFiddle
I'm simply using an array of values for the source - you'll have to replace with the ashx!
I have had to do stuff like this outside of the ArcGIS JS API in .NET. Just to give you an idea if you're using .NET and SQL Server...
Basically, it's autocomplete with validation. We used a .NET handler (.ashx - HTTP Handlers and HTTP Modules Overview). As the user types, a stored procedure in SQL would be called to pull a list of matched recommendations based on their search string. It's similar to how this person is doing it here:
autocomplete - auto complete textbox using jquery UI in vb.net - Stack Overflow
They are using in-line SQL, though (yuck) - but you get the idea. As for the validation, I would be careful interrupting the user while they are typing, but maybe add a notification to the page and highlight the field, or something like that, then disable the form submit button until they enter a valid, autocompleted value. The link I gave - it doesn't look like they are doing any validation.
Here's some info on preventing free text:
jquery - Autocomplete disallow free text entry? - Stack Overflow
Source looks to support multiple types, including the .NET handler so long as it returns JSON.
http://api.jqueryui.com/autocomplete/#option-source
Here's info on returning JSON from a .NET handler:
How to implement jquery autocomplete with JSON rsponse from ashx | The ASP.NET Forums
In summary, it looks like you could use the jQuery UI widget, then, source it to a .NET handler that calls a proc as the user types, which then returns a JSON object. If you go that route, you'll need jQuery base, then JQuery UI on top of that.
Yes sir! You can directly look at the JavaScript at:
http://www.yakimawa.gov/apps/yak-back/includes/js/map.js
This was written in 2012, before we had fully embraced AMD. It is still being used today, but ready for a rewrite.
The complete app is at:
Yak Back
Please let me know if I can be of any further assistance!
This looks like what I want. Do you have a complete code sample so I could reference it as a template?
I went here: Search | API Reference | ArcGIS API for JavaScript but don't see those two events. Do you thinks search(value?) would work after the text is entered, or is onchange available in JavaScript in general?
We did something similar on our citizen engagement app. They would enter an address and we would check it against our locator. Further, we would check it against our city boundary to see if the point fell within our city limits. If not we would not add it to the list of available choices.
Here is some code that shows how we did this:
// Address Locator for finding stops near an address function searchAddresses() { var address = {"SingleLine": $("#addrSearch").val()}; if (address.SingleLine != "") { var params = {address: address, outFields:["*"]}; geocoder.addressToLocations(params, buildAddressList, errAddress); } else { $('#addressList li').remove(); selectedAddress = ''; } } function buildAddressList(geocodeResults) { gcr = geocodeResults; $('#addressList li').remove(); var titleLI = $('<li data-role="list-divider" data-inset="true" />'); titleLI.append("<h3 id='addListHeader'> Address List</h3>"); $('#addressList').append(titleLI); var addCount = 0; $.each(gcr, function(i, a) { // we only want to display addresses that are in Yakima. var pt = esri.geometry.geographicToWebMercator(new esri.geometry.Point(a.location.x, a.location.y)); // Check to see if the point is in the Yakima City Limits var isYakima = yakimaCL.graphics[0].geometry.contains(pt); if (isYakima == true) { var li = $("<li />"); if (a.attributes.Addr_type == "Address") { var content = "<a href='#' onClick='useAddress(" + i + ")'><h3>" + a.address + "</h3><p>" + a.attributes.User_fld + "</p><span class='ui-li-count'>" + a.score + "</span></a>"; } else { var addr = a.address.split(","); var content = "<a href='#' onClick='useAddress(" + i + ")'>" + addr[0] + "<span class='ui-li-count'>" + a.score + "</span></a>"; } li.append(content); //add the list item to the feature type list $('#addressList').append(li); addCount += 1; } }); //refresh the featurelist so the jquery mobile style is applied $('#addressList').listview('refresh'); $("#addListHeader").html(" " + addCount + " found in Yakima"); }
I hope this is helpful.
I will. It's a .NET form, but it looks like I need to add GIS to it.
You could add an event listener for either the oninput or onchange event for each of the address related input fields and try to geocode them in the event function. If you don't get satisfactory results back, notify the user that the address entered appears to be invalid.
When you finish this form, you should post it on github so others can use it!
I like how it looks so far!
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
