La mayoría de los campos de dirección en los formularios web solicitan la ciudad, el estado y el código postal (o la ciudad y el código postal, fuera de los EE. UU.). Pero como solemos lamentarnos los nerds, la ciudad y el estado son redundantes con el código postal. O al menos se pueden inferir de un código postal ingresado correctamente. Ese es el tipo de cosas en las que las computadoras son buenas. Lo que necesitamos es una API adecuada que nos proporcione esa información a pedido.
Ingrese Ziptastic, API solo para eso. Actualización Abril 2017: Ziptastic tiene planes pagos ahora. De sus preguntas frecuentes, dicen que todavía tienen una versión gratuita de la API de la versión 2 que está limitada a 100 solicitudes cada 24 horas. ¡Nuestra demostración usará eso!
Marcado de formulario
Cinco campos. Dos por calle, luego ciudad, estado y código postal. Todo envuelto en un formulario y conjunto de campos. Nada especial.
<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>
Mostrar solo el código postal al principio
Ocultaremos todos los divs que envuelven cada fila de elementos de formulario. Usaremos JavaScript, de modo que en caso de que el usuario tenga JavaScript desactivado, el formulario aún se puede usar.
$(".fancy-form div > div").hide();
Luego revele solo el código postal.
form .zip-wrap {
display: block !important;
}
Validación frontal
En el front-end, ya estamos haciendo lo mejor que podemos para ayudar a la entrada adecuada de un código postal a través del patrón de atributos de entrada HTML5, longitud máxima y requerido.
<input type="text" pattern="[0-9]*" maxlength="5" required name="zip" id="zip">
Fíjate que no es del tipo number
. Siempre que considere type=number
, considere “¿estaría bien si el navegador agregara comas dentro de este número?” y si es no, no lo uses, porque algunos lo hacen.
jQuery: esté atento a la entrada de un código postal válido
Vamos a observar la entrada zip para las pulsaciones de teclas. Si el valor final después de presionar una tecla es un código postal válido, intentaremos obtener la ciudad y el estado a través de Ziptastic y revelar los otros campos.
$("#zip").keyup(function() {
var el = $(this);
if ((el.val().length == 5) && (is_int(el.val()))) {
// Make Ajax call, etc
}
}
La función is_int es solo una protección adicional de que el número es un número entero (como todos los códigos postales) en caso de que el navegador actual no admita el HTML5 necesario.
function is_int(value){
if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
return true;
} else {
return false;
}
}
jQuery: Ajax los datos
Sí, entonces jQuery. Lo usamos anteriormente para hacer que el manejo de eventos en la entrada sea más fácil, pero es realmente necesario aquí debido a su capacidad para hacer llamadas ajax con manejo de errores sesenta y dos veces más fácil que hacerlo con JavaScript estándar.
Después de la validación aprobada, podemos hacer la llamada Ajax. Todo lo que le damos a los datos es el código postal que hemos recopilado y obtenemos algo de JSON que es trivialmente fácil de acceder a la ciudad y el estado y aplicarlos como valores a las entradas apropiadas.
$.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 */
}
});
Por supuesto, podemos validar durante todo el día el formato válido de los códigos postales, pero no todos los números enteros de 5 dígitos son códigos postales. Si le pedimos a Ziptastic un código postal que no existe, devolverá un error. En ese caso, solo mostramos un mensaje de error.
Manifestación
Vea el Pen usando Ziptastic por Chris Coyier (@chriscoyier) en CodePen.
notas
- No voy a decirte que esto es a prueba de balas. Las direcciones son difíciles. Escuché que algunos códigos postales cruzan las fronteras estatales.
- Ziptastic es solo para EE. UU. Apenas unos días después de publicar esto, Ziptastic comienza a admitir códigos postales a nivel internacional. Zippopotamus es similar y admite 60 condados.