Trying to create a form that ensures the user follows certain rules using Javascript

Question

I'm trying to add a form to my website to ask the user for their email, city, state and zip code. What I would like to have happened is if the user writes something that doesn't belong in the different fields, it won't move forward but instead give them an alert saying they input the information incorrectly. I want the state field to only accept the capitalized abbreviation for the state. I want to make sure that the zip code is just 5 numbers, I want to make sure the email address is formatted like an email address and if possible, if the user fills out the zip code first, I'd like it to automatically fill in the blanks for city/state. I'm not sure if that's possible though. I'd also like the form to start off with the cursor already in the first field.

So far, this is my HTML but I'm having a hard time figuring out the Javascript.

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <form method="post" onsubmit="return checkForBlank();">
        <p>ENTER PERSONAL INFORMATION</p>
        <div class="input-1">
          <label for="email"></label>
          <input
            id="email"
            type="text"
            placeholder="Email"
          />
        </div>
        <div class="input-2">
          <label for="city"></label>
          <input
            id="city"
            type="text"
            placeholder="City"
          />
        </div>
        <div class="input-3">
          <label for="state"></label>
          <input
            id="state"
            type="text"
            placeholder="State"
          />
        </div>
        <div class="input-4">
          <label for="zip"></label>
          <input
            id="zip"
            type="text"
            placeholder="Zip Code"
          />
        </div>
        <button>Button</button>
      </form>
    </div>
    <script
      type="text/javascript"
      src="main.js"
    ></script>
  </body>
</html>

I've been looking online for different ways of approaching this and I found this Javascript that does seem to work when I leave certain fields blank but I'm not sure how to tie it all together.

if ( document.getElementById("name").value == "") {
    alert("enter something valid");
    return false;
  }
}

I know this probably isn't a great question. I've got so much to learn and I'm at a point where I'm having a hard time asking good questions because I understand so little of how to use JS to validate forms. Anyway, thanks.

I suggest you use a validation library rather than trying to code it all yourself. — Barmar, Feb 25 '20 at 04:51
You can use RegExp for JS, check this question: https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript:question and I would recommend to this excellent article of vanilla js: https://dev.to/bouhm/a-vanilla-js-guide-on-mastering-the-dom-3l9b — peterzinho16, Feb 25 '20 at 04:54
Thanks for providing the links. I'll give them a look. I'm just getting started with JS so I figured I should stick with vanilla JS for a while before I get into libraries...maybe I'm wrong, I don't know. Either way, thanks for your responses. I'll try to make the most out of it. :) — WheatimasMaximas, Feb 25 '20 at 05:12
Here's an example of validating a form using vanilla js, it beginner friendly and only for learning and understanding: https://codepen.io/kailash-sankar/pen/doNgxK — ksankar, Feb 25 '20 at 06:33

Trying to create a form that ensures the user follows certain rules using Javascript

0 Answers0