記事タイトル

KK_2024

2024年5月7日 21:53

// HTMLのフォーム要素を取得
const form = document.getElementById("input-form");
// 送信ボタンを取得
const submit = document.getElementById("submit");
// 各入力フィールドを取得
const fullName = document.getElementById("fullName");
const email = document.getElementById("email");
const phoneNumber = document.getElementById("phoneNumber");
const password = document.getElementById("password");
const checkPassword = document.getElementById("checkPassword");

// フォームが送信されたときのイベントリスナーを追加
form.addEventListener("submit", (e) => {
  e.preventDefault(); // デフォルトの送信動作をキャンセル
  checkInput(); // 入力をチェックする関数を実行
});

// フォームの入力をチェックする関数
function checkInput() {
  // 各入力値を取得
  const fullNameValue = fullName.value.trim();
  const emailValue = email.value.trim();
  const phoneNumberValue = phoneNumber.value.trim();
  const passwordValue = password.value.trim();
  const checkPasswordValue = checkPassword.value.trim();

  // 名前のバリデーション
  if (fullNameValue === "") {
    setErrorMessage(fullName, "入力されていません。");
  } else if (fullNameValue.length < 4 || fullNameValue.length > 50) {
    setErrorMessage(fullName, "入力範囲のエラーです。");
  } else {
    setSuccessMessage(fullName);
  }

  // メールアドレスのバリデーション
  if (emailValue === "") {
    setErrorMessage(email, "入力されていません。");
  } else if (!isValidateEmail(emailValue)) {
    setErrorMessage(email, "有効なメールアドレスではありません。");
  } else {
    setSuccessMessage(email);
  }

  // 電話番号のバリデーション
  if (phoneNumberValue === "") {
    setErrorMessage(phoneNumber, "入力されていません。");
  } else if (phoneNumberValue.length > 11) {
    setErrorMessage(phoneNumber, "有効な電話番号ではありません。");
  } else {
    setSuccessMessage(phoneNumber);
  }

  // パスワードのバリデーション
  if (passwordValue === "") {
    setErrorMessage(password, "入力されていません");
  } else if (passwordValue.length < 6 || passwordValue.length > 20) {
    setErrorMessage(password, "6桁から20桁の範囲で入力してください。");
  } else {
    setSuccessMessage(password);
  }

  // 確認用パスワードのバリデーション
  if (checkPasswordValue === "") {
    setErrorMessage(checkPassword, "入力されていません。");
  } else if (checkPasswordValue.length < 6 || checkPasswordValue.length > 20) {
    setErrorMessage(checkPassword, "6桁から20桁の範囲で入力してください。");
  } else if (passwordValue !== checkPasswordValue) {
    setErrorMessage(checkPassword, "パスワードが一致していません。");
  } else {
    setSuccessMessage(checkPassword);
  }
}

// エラーメッセージを設定する関数
function setErrorMessage(input, message) {
  const formControl = input.parentElement; // 入力フィールドの親要素を取得
  const small = formControl.querySelector("small"); // 親要素からsmall要素を取得
  small.innerText = message; // small要素にエラーメッセージをセット
  formControl.className = "form-control error"; // エラークラスを追加
}

// 入力成功時のメッセージを表示する関数
function setSuccessMessage(input) {
  const formControl = input.parentElement; // 入力フィールドの親要素を取得
  formControl.className = "form-control success"; // 成功クラスを追加
}

// ユーザー名のバリデーションチェック
function isUserNameValid(username) {
  const res = /^[a-z0-9_\.]+$/.exec(username);
  const valid = !!res;
  return valid;
}

// メールアドレスのバリデーションチェック
function isValidateEmail(email) {
  const re = /.+@.+\..+/;
  return re.test(email);
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登録フォーム</title>
    <link rel="stylesheet" href="inputForm.css" />
  </head>

  <body>
    <section id="form-section">
      <div class="form-container">

        <div class="form-header">
          <h2 class="form-title">アカウント作成</h2>
        </div>

        <form action="" method="post" id="input-form">

          <div class="form-control">
            <label for="fullName">*氏名</label>
            <input type="text" name="fullName" placeholder="山田太郎" id="fullName" />
            <i class="uil uil-check-circle"></i>
            <i class="uil uil-exclamation-circle"></i>
            <small></small>
          </div>

          <div class="form-control">
            <label for="email">*メールアドレス</label>
            <input type="text" name="email" placeholder="Okayama@Tarou123.jp" id="email" />
            <i class="uil uil-check-circle"></i>
            <i class="uil uil-exclamation-circle"></i>
            <small></small>
          </div>

          <div class="form-control">
            <label for="phoneNumber">*電話番号</label>
            <input type="text" name="phoneNumber" placeholder="08012341234" id="phoneNumber" />
            <i class="uil uil-check-circle"></i>
            <i class="uil uil-exclamation-circle"></i>
            <small></small>
          </div>

          <div class="form-control">
            <label for="dataOfBirth">生年月日</label>
            <input type="date" name="dataOfBirth" id="dataOfBirth" />
          </div>

          <div class="form-control">
            <label for="gender">性別</label>
            <select name="gender" id="gender">
              <option disabled selected value>-- select an option --</option>
              <option value="male">Male</option>
              <option value="female">Female</option>
            </select>
          </div>


          <div class="form-control">
            <label for="userBio">何かあれば</label>
            <textarea name="userBio" id="userBio" cols="30" rows="5" placeholder="Write here something about yourself"></textarea>
          </div>


          <div class="form-control">
            <label for="password">*パスワード</label>
            <input type="password" name="password" placeholder="Type here a unique and strong password" id="password" />
            <i class="uil uil-check-circle"></i>
            <i class="uil uil-exclamation-circle"></i>
            <small></small>
          </div>


          <div class="form-control">
            <label for="checkPassword">*確認パスワード</label>
            <input type="password" name="checkPassword" placeholder="Retype here your define unique and strong password" id="checkPassword" />
            <i class="uil uil-check-circle"></i>
            <i class="uil uil-exclamation-circle"></i>
            <small></small>
          </div>

          <button type="submit" name="submit" id="submit" class="submit">Submit Now</button>
        </form>
      </div>
    </section>

    <script src="inputForm.js"></script>
  </body>
</html>

* {
  margin: 0 auto;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

* html {
  scroll-behavior: smooth;
}

* html body {
  font-family: "Poppins", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
  background-color: #e0dfdb ;
}

/* =============== PRE TAG-SELECTORS =============== */
a {
  text-decoration: none;
}

li {
  list-style-type: none;
}

/* =============== PRE ATTRIBUTE-SELECTORS */
::-webkit-input-placeholder {
  opacity: 1;
  color: var(--gray-color);
  font-family: cursive;
  font-size: 14px;
}
:-ms-input-placeholder {
  opacity: 1;
  color: var(--gray-color);
  font-family: cursive;
  font-size: 14px;
}
::-ms-input-placeholder {
  opacity: 1;
  color: var(--gray-color);
  font-family: cursive;
  font-size: 14px;
}
::placeholder {
  opacity: 1;
  color: var(--gray-color);
  font-family: cursive;
  font-size: 14px;
}

/* IMPORT REGISTRATION FORM STYLE */
section#form-section .form-container {
  width: 480px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
          box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  margin-top: 30px;
  margin-bottom: 30px;
}

section#form-section .form-container .form-header .form-title {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.3), 0px -4px 10px rgba(255, 255, 255, 0.3);
}

section#form-section .form-container .form-header .show-error {
  background-color: #dc3545 ;
  margin: 10px 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  display: none;
}

section#form-section .form-container .form-header .show-error .error-message {
  font-size: 1rem;
  text-align: center;
  color: #ffffff ;
}

section#form-section .form-container form#input-form {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

section#form-section .form-container form#input-form .form-control {
  padding: 0 10px;
  position: relative;
}

section#form-section .form-container form#input-form .form-control label {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  text-transform: capitalize;
}

section#form-section .form-container form#input-form .form-control input {
  width: 100%;
  padding: 10px;
  border: 2px solid #292b2c ;
  font-size: 1rem;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

section#form-section .form-container form#input-form .form-control input:focus {
  outline: none;
  border: 2px solid #007bff ;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

section#form-section .form-container form#input-form .form-control i {
  position: absolute;
  top: 42px;
  right: 20px;
  visibility: hidden;
}

section#form-section .form-container form#input-form .form-control small {
  font-size: 0.8rem;
  font-family: cursive;
  color: #dc3545 ;
  visibility: hidden;
}

section#form-section .form-container form#input-form .form-control select {
  width: 100%;
  padding: 10px;
  border: 2px solid #292b2c ;
  font-size: 1rem;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

section#form-section .form-container form#input-form .form-control select:focus {
  outline: none;
  border: 2px solid #007bff ;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

section#form-section .form-container form#input-form .form-control textarea {
  width: 100%;
  padding: 10px;
  border: 2px solid #292b2c ;
  font-size: 1rem;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
}

section#form-section .form-container form#input-form .form-control textarea:focus {
  outline: none;
  border: 2px solid #007bff ;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

section#form-section .form-container form#input-form .form-control #agree -tac {
  position: absolute;
  right: 222px;
  margin-top: 5px;
}

section#form-section .form-container form#input-form .form-control .message-tac {
  font-size: 1.1rem;
  margin-left: 20px;
  margin-bottom: 10px;
}

section#form-section .form-container form#input-form .form-control.success label {
  color: #28a745 ;
}

section#form-section .form-container form#input-form .form-control.success input {
  border: 2px solid #28a745 ;
}

section#form-section .form-container form#input-form .form-control.success i.uil-check-circle {
  visibility: visible;
  color: #28a745 ;
}

section#form-section .form-container form#input-form .form-control.success .uil-exclamation-circle {
  visibility: hidden;
}

section#form-section .form-container form#input-form .form-control.error label {
  color: #dc3545 ;
}

section#form-section .form-container form#input-form .form-control.error input {
  border: 2px solid #dc3545 ;
}

section#form-section .form-container form#input-form .form-control.error i.uil-check-circle {
  visibility: hidden;
}

section#form-section .form-container form#input-form .form-control.error .uil-exclamation-circle {
  visibility: visible;
  color: #dc3545 ;
}

section#form-section .form-container form#input-form .form-control.error small {
  visibility: visible;
}

section#form-section .form-container form#input-form button.submit {
  width: 80%;
  padding: 10px;
  margin: 10px 20px;
  -webkit-box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
          box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  margin-left: 50px;
  background-color: #ffffff ;
  border: 2px solid #292b2c ;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  font-size: 1rem;
  font-weight: bold;
  color: #000000 ;
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  cursor: pointer;
}

section#form-section .form-container form#input-form button.submit:hover {
  color: #ffffff ;
  background-color: #007bff ;
  border: 2px solid #007bff ;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

section#form-section .form-container form#input-form button.disabled {
  color: #808080 ;
  border: 2px solid #808080 ;
}

section#form-section .form-container form#input-form button.disabled:hover {
  color: #292b2c ;
  background-color: #ffffff ;
  border: 2px solid #292b2c ;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}
/*# sourceMappingURL=style.css.map */

この記事が気に入ったらサポートをしてみませんか？