表單驗證

by dfg312546

HTML

<div class="formStyle">
  <form>
    <div class="titleStyle">用戶暱稱:</div>
    <div>
      <input class="inputStyle" id="nameInput" oninput="validateName()" placeholder="Less than 40 characters">
    </div>
    <span class="alertStyle" id="nameAlert">不能為空白、必須在40字以內</span>
    <br>

    <div class="titleStyle">Email 信箱:</div>
    <div>
      <input class="inputStyle" id="emailInput" oninput="validateEmail()" placeholder="Must contain ' @ '">
    </div>
    <span class="alertStyle" id="emailAlert">不能為空白、必須包含 @ 符號</span>
    <br>

      <div class="titleStyle">密碼:</div>
      <div>
      <input type="password" class="inputStyle" id="passwordInput" oninput="validatePassword()" placeholder="At least 8 characters">
    </div>
    <span class="alertStyle" id="passwordAlert">不能為空白、必須在8字以上、必須在100字以內</span>
  </form>
      <button class="buttonStyle" id="enrollButton" onclick="formSubnit()" disabled="disabled">
    註冊
    </button>
</div>


<div class="modalStyle" id="modalSucess">
  <div>提交成功</div>
  <button onclick="closeModal()" class="btn-close">關閉</button>
</div>

<div class="overlay" id="overlay"></div>

CSS

body {
  background-color:#F5F5F5;
}

.buttonStyle {
  font-size:20px;
  border-radius:15px;
  padding:10px;
  padding-left:30px;
  padding-right:30px;
  margin-top:20px;
}

.alertStyle{
  color:red;
  visibility: hidden;
}

.titleStyle{
  margin-top:15px;
  margin-bottom:10px;
}

.inputStyle{
  border-radius:5px;
  border-width: 1px;
  padding:10px;
  margin-top:5px;
  margin-bottom: 5px;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
  display: none;
}

.modalStyle {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  z-index: 1;
  display: none;
}

#modalSucess {
  width:50%;
  text-align: center;
  border-radius:5px;
  padding:10px;
  background-color:#9ACD32;
  color:#006400;
}

.btn-close{
  border-width: thin;
  border-radius:5px;
  background-color:white;
}

.btn-close:hover{
  cursor: pointer;
}

JavaScript

let isNameValid = false;
let isEmailValid = false;
let isPasswordValid = false;

function validateName() {
	let name = document.getElementById('nameInput').value;

  if (name === '' || name.length > 40 ) {
  	document.getElementById('nameAlert').style.visibility = 'visible';
    isNameValid = false;
  } else{
  	document.getElementById('nameAlert').style.visibility = 'hidden';
    isNameValid = true;   
  }
  
  updateButtonState();
}

function validateEmail() {
  let email = document.getElementById('emailInput').value;

  if (email === '' || !email.includes('@')) {
    document.getElementById('emailAlert').style.visibility = 'visible';
    isEmailValid = false;
  } else {
    document.getElementById('emailAlert').style.visibility = 'hidden';
    isEmailValid = true;
  }
  
  updateButtonState();
}

function validatePassword() {
  let password = document.getElementById('passwordInput').value;

  if (password === '' || password.length < 8 || password.length > 100) {
    document.getElementById('passwordAlert').style.visibility = 'visible';
    isPasswordValid = false;
  } else {
    document.getElementById('passwordAlert').style.visibility = 'hidden';
    isPasswordValid = true;
  }
  
  updateButtonState();
}

function updateButtonState() {
  let enrollButton = document.getElementById('enrollButton');
  if (isNameValid && isEmailValid && isPasswordValid) {
    enrollButton.disabled = false;
  } else {
    enrollButton.disabled = true;
  }
}

function formSubnit() {
	document.getElementById('overlay').style.display = 'block';
  document.getElementById('modalSucess').style.display = 'block';
}

function closeModal() {
  document.getElementById('overlay').style.display = 'none';
  document.getElementById('modalSucess').style.display = 'none';
}