How do I limit what is entered in the textbox when using a search widget?

4951
23
Jump to solution
07-15-2015 08:28 AM
ChrisSergent
Regular Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
TomSellsted
MVP Regular Contributor

Chris,

It is now up on github.  You can find it at:

CityofYakima/Yak-Back · GitHub

Regards,

Tom

View solution in original post

23 Replies
RickeyFight
MVP Regular Contributor

Chris,

When you finish this form, you should post it on github so others can use it!

I like how it looks so far!

ChrisSergent
Regular Contributor III

I will. It's a .NET form, but it looks like I need to add GIS to it.

0 Kudos
SteveCole
Frequent Contributor

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.

ChrisSergent
Regular Contributor III

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?

0 Kudos
TomSellsted
MVP Regular Contributor

Chris,

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.

Regards,

Tom

ChrisSergent
Regular Contributor III

This looks like what I want. Do you have a complete code sample so I could reference it as a template?

0 Kudos
TomSellsted
MVP Regular Contributor

Chris,

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!

Regards,

Tom

ChrisSergent
Regular Contributor III

This is awesome. Do you have it on Github as well? I wouldn't mind downloading the package.

0 Kudos
TomSellsted
MVP Regular Contributor

Chris,

Not at present.  We will get it posted up later today.

Regards,

Tom