nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

ChrisSergent

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

Find more posts tagged with

Accepted answers

TomSellsted

Chris,

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

CityofYakima/Yak-Back · GitHub

Regards,

Tom

All comments

ChrisSergent

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.

ChrisSergent

I am going to try to do it with just JavaScript for now, but this is some excellent information.

ChrisSergent

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

ChrisSmith7

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!

ChrisSmith7

Chris,

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.

TomSellsted

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

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

ChrisSergent

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?

TomSellsted

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

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

evtguy

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.

RickeyFight

Chris,

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

I like how it looks so far!

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.