Create a form that collects info after data verification

Question

I'm trying to create an HTML/JS action "choose your zip code from a list." If the user's zip code is found, they are brought to a form that collects their contact info and once the form is completed - is emailed to the form's administrator.

If the zip code isn't present, they are shown a window that says 'sorry, try here [insert URL here] instead.

and you have nothing so far? – Diego D Apr 18 '22 at 23:32 — Diego D, Apr 18 '22 at 23:32

score 0 · Answer 1 · answered Apr 18 '22 at 23:36

0

This question is a bit redundant, because you're pretty much asking us to build the entire app for you, but you can validate zip codes like this:

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!');
}

answered Apr 18 '22 at 23:36

Exortions

303
2
7

Ah, thank you! Would I just need to store the list of valid zip codes from my list in another file? Example: I have a list of 1200 zip codes in the metro area. If someone enters a zip code that is in the list, we redirect. – Jim Robinson Apr 18 '22 at 23:40

Diego D · Answer 2 · 2022-04-18T23:56:02.460

My answer took to long but it's worthile to share anyway...

This is a demo showing the concept you asked for in your question.

Anyway if we want to discuss your idea there are some weak points. The list of allowed zips is no secret and is embedded on the page. Is it a critical leak? Do you want the list to be dynamic and served externally? you might do an ajax request here to feed that list but yet its logic would be transparent and easy to temper. Or you could use this form just as a messenger where it just forward your input to a service like tellMeIfThisZipIsAllowed(zip) so that the logic won't be known publicly but here you'd just need to collect the input, call the ajax function and do the redirect if its response is positive. But yet the redirect address would be known so you would be forced to check again the zip inside that step and kickout the user in case the zip isn't valid. Yet another weak approach. So the point is why do you need this frontpage before the rest of the registration and if its security measure should be hard to bypass or not.

So to make sure you understand that warning, you should really validate that zip inside the action following the next step (server side).

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>

This makes a lot of sense, thank you! The zip codes aren't considered private, it's really just a way to determine if the user should see the next step or not. I appreciate you! — Jim Robinson, Apr 19 '22 at 00:09

Create a form that collects info after data verification

2 Answers2