Попытка создать форму, которая гарантирует, что пользователь следует определенным правилам, используя Javascript - PullRequest
Новая
       11

Попытка создать форму, которая гарантирует, что пользователь следует определенным правилам, используя Javascript

0 голосов
/ 25 февраля 2020

Я пытаюсь добавить форму на свой веб-сайт, чтобы попросить пользователя указать его адрес электронной почты, город, штат и почтовый индекс. Я хотел бы, чтобы пользователь написал что-то, что не относится к разным полям, он не будет двигаться вперед, а вместо этого предупредит их, что они вводят информацию неправильно. Я хочу, чтобы в поле состояния принималась только заглавная аббревиатура для штата. Я хочу убедиться, что почтовый индекс состоит всего из 5 цифр, я хочу убедиться, что адрес электронной почты отформатирован как адрес электронной почты и, если возможно, если пользователь сначала заполняет почтовый индекс, я бы хотел, чтобы он автоматически заполнялся в пробелах для города / штата. Я не уверен, если это возможно, хотя. Я также хотел бы, чтобы форма начиналась с курсора, уже находящегося в первом поле.

Пока это мой HTML, но мне трудно разобраться с 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>

Я искал в Интернете различные способы приближения к этому, и я обнаружил, что Javascript действительно работает, когда я оставляю определенные поля пустыми, но я не уверен, как это сделать ie все это вместе. 

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

Я знаю, что это, вероятно, не очень хороший вопрос. Мне нужно многому научиться, и мне трудно задавать хорошие вопросы, потому что я так мало понимаю, как использовать JS для проверки форм. В любом случае, спасибо.

...