Autofill City & State from Zip Code with Ziptastic

Die meisten Adressfelder auf Webformularen fragen nach Stadt, Bundesland und Postleitzahl (oder Stadt und Postleitzahl außerhalb der USA). Aber wie wir Nerds oft beklagen, sind Stadt und Bundesland redundant mit der Postleitzahl. Oder zumindest können sie aus einer korrekt eingegebenen Postleitzahl abgeleitet werden. Das ist die Art von Dingen, die Computer gut können. Was wir brauchen, ist eine ordentliche API, die uns diese Informationen auf Abruf liefert.

Geben Sie Ziptastic ein, die API genau dafür. Update April 2017: Ziptastic hat jetzt kostenpflichtige Pläne. Aus ihren FAQ geht hervor, dass sie immer noch eine kostenlose Version der API Version 2 haben, die auf 100 Anfragen pro 24 Stunden begrenzt ist. Unsere Demo wird diese nutzen!

Formular-Markup

Fünf Felder. Zwei für die Straße, dann Stadt, Bundesland und Postleitzahl. Alles in ein Formular und ein Feldset verpackt. Nichts Besonderes.

<form action="#" method="post" class="fancy-form">

  <fieldset>
    <legend>Address</legend>

    <div>
      <div>
        <input type="text" name="address-line-1" id="address-line-1">
        <label for="address-line-1">Street #1</label>
      </div>
    </div>
    <div>
      <div>
        <input type="text" name="address-line-2" id="address-line-2">
        <label for="address-line-2">Street #2</label>
      </div>
    </div>
    <div>
      <div class="city-wrap">
        <input type="text" name="city" id="city">
        <label for="city">City</label>
      </div>
       <div class="state-wrap">
        <input type="text" name="state" id="state">
        <label for="state">State</label>
      </div>
       <div class="zip-wrap">
        <input type="text" pattern="[0-9]*" name="zip" id="zip">
        <label for="zip">Zip</label>
        <p class="zip-error">Not a real zip code.</p>
      </div>
    </div>

    <div>
      <input type="submit" value="Submit">
    </div>

  </fieldset>

</form>

Nur die Postleitzahl zuerst anzeigen

Wir werden alle divs ausblenden, die jede Zeile von Formularelementen umschließen. Wir werden JavaScript verwenden, damit das Formular auch dann benutzbar ist, wenn der Benutzer JavaScript deaktiviert hat.

$(".fancy-form div > div").hide();

Dann nur die Postleitzahl anzeigen.

form .zip-wrap {
  display: block !important;
}

Frontend-Validierung

Im Frontend tun wir bereits das Beste, was wir können, um die korrekte Eingabe einer Postleitzahl durch HTML5-Input-Attribute wie pattern, maxlength und required zu unterstützen.

<input type="text" pattern="[0-9]*" maxlength="5" required name="zip" id="zip">

Beachten Sie, dass der Typ nicht number ist. Wenn Sie type=number in Erwägung ziehen, überlegen Sie: „Wäre ich damit einverstanden, dass der Browser Kommas in diese Zahl einfügt?“ Wenn die Antwort nein ist, verwenden Sie ihn nicht, da einige dies tun.

jQuery: Auf Eingabe einer gültigen Postleitzahl warten

Wir werden das Postleitzahlen-Input auf Tastendrücke überwachen. Sollte der endgültige Wert nach einem Tastendruck eine gültige Postleitzahl sein, versuchen wir, Stadt und Bundesland über Ziptastic abzurufen und die anderen Felder anzuzeigen.

$("#zip").keyup(function() {
  var el = $(this);

  if ((el.val().length == 5) && (is_int(el.val()))) {
   
    // Make Ajax call, etc
 
  }

}

Die `is_int`-Funktion ist nur ein zusätzlicher Schutz dafür, dass die Zahl eine Ganzzahl ist (wie alle Postleitzahlen), falls der aktuelle Browser die notwendige HTML5-Unterstützung nicht hat.

function is_int(value){ 
  if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
    return true;
  } else { 
    return false;
  } 
}

jQuery: Die Daten per AJAX abrufen

Ja, also jQuery. Wir haben es oben verwendet, um die Ereignisbehandlung für das Input-Feld zu vereinfachen, aber es ist hier wirklich notwendig, da seine Fähigkeit, AJAX-Aufrufe mit Fehlerbehandlung durchzuführen, 62 Mal einfacher ist, als dies mit reinem JavaScript zu tun.

Nach der bestandenen Validierung können wir den AJAX-Aufruf tätigen. Alles, was wir als Daten übergeben, ist die gesammelte Postleitzahl, und wir erhalten etwas JSON zurück, das trivial einfach zugänglich ist, um Stadt und Bundesland zu erhalten und sie als Werte für die entsprechenden Input-Felder anzuwenden.

$.ajax({
  url: "http://zip.elevenbasetwo.com",
  cache: false,
  dataType: "json",
  type: "GET",
  data: "zip=" + el.val(),
  success: function(result, success) {

    $(".fancy-form div > div").slideDown(); /* Show the fields */

    $("#city").val(result.city); /* Fill the data */
    $("#state").val(result.state);

    $(".zip-error").hide(); /* In case they failed once before */

    $("#address-line-1").focus(); /* Put cursor where they need it */

  },
  error: function(result, success) {

    $(".zip-error").show(); /* Ruh row */

  }

});

Natürlich können wir den ganzen Tag lang auf die korrekte Formatierung von Postleitzahlen validieren, aber nicht *jede* 5-stellige Ganzzahl ist eine Postleitzahl. Wenn wir Ziptastic nach einer nicht existierenden Postleitzahl fragen, gibt es einen Fehler zurück. In diesem Fall zeigen wir einfach eine Fehlermeldung an.

Demo

Siehe den Pen Using Ziptastic von Chris Coyier (@chriscoyier) auf CodePen.

Notizen

• Ich werde Ihnen nicht sagen, dass das kugelsicher ist. Adressen sind schwierig. Ich habe gehört, dass manche Postleitzahlen über Bundeslandgrenzen hinausgehen.
• Ziptastic ist nur für die USA. Nur wenige Tage nach der Veröffentlichung unterstützt Ziptastic Postleitzahlen international. Zippopotamus ist ähnlich und unterstützt 60 Länder.