Estoy tratando de crear una acción HTML/JS "elige tu código postal de una lista". Si se encuentra el código postal del usuario, se lo lleva a un formulario que recopila su información de contacto y, una vez que se completa el formulario, se envía por correo electrónico al administrador del formulario.
Si el código postal no está presente, se les muestra una ventana que dice 'lo siento, intente aquí [insertar URL aquí] en su lugar.
Esta pregunta es un poco redundante, porque prácticamente nos está pidiendo que construyamos la aplicación completa para usted, pero puede validar códigos postales como este:
const validZipCodes = ['000000'] const zipCode = document.getElementById('zipcode').textContent; if (validZipCodes.includes(zipCode)) { // Valid, now redirect window.location = '/info' // any other link } else { // Maybe add custom alert alert('Invalid zip code!'); }Mi respuesta tomó mucho tiempo, pero vale la pena compartirla de todos modos...
Esta es una demostración que muestra el concepto que solicitó en su pregunta.
De todos modos, si queremos discutir tu idea, hay algunos puntos débiles. La lista de zips permitidos no es ningún secreto y está incrustada en la página. ¿Es una fuga crítica? ¿Quieres que la lista sea dinámica y se sirva externamente? puede hacer una solicitud ajax aquí para alimentar esa lista, pero aún así su lógica sería transparente y fácil de modificar. O puede usar este formulario solo como un mensajero donde simplemente reenvía su entrada a un servicio como tellMeIfThisZipIsAllowed(zip) para que la lógica no se conozca públicamente, pero aquí solo necesita recopilar la entrada, llame a la función ajax y haz la redirección si su respuesta es positiva. Sin embargo, se conocería la dirección de redireccionamiento, por lo que se vería obligado a verificar nuevamente el código postal dentro de ese paso y expulsar al usuario en caso de que el código postal no sea válido. Otro enfoque débil. Entonces, el punto es por qué necesita esta portada antes que el resto del registro y si su medida de seguridad debería ser difícil de eludir o no.
Entonces, para asegurarse de que comprende esa advertencia, realmente debe validar ese zip dentro de la acción que sigue al siguiente paso (lado del servidor).
const allowed_zips = ['12345', '00000', '90210']; function checkZip(){ document.querySelectorAll('.msg').forEach((o,i)=>{o.remove();}); const zip = document.getElementById('zip'); const msg = document.createElement('div'); msg.classList.add('msg'); if( allowed_zips.includes(zip.value) ){ msg.innerText = `Your Zip is valid.. redirecting to next step`; } else{ msg.innerText = `Your Zip is invalid`; } zip.after(msg); //here we are redirecting to next step of registration form //but I would recommend to pass the zip to it for further inspection //like here through GET or using a different strategy with an hidden form //to submit a POST action. //window.location.href = "path/to/next/url?zip=${zip.value}"; } <input id="zip" type="text" placeholder="Insert your zip code..."> <button type="button" onclick="checkZip();">Next step</button>