JSFiddle - React, Tailwind, and code Playground

by shnny

HTML

<div class="sign-up-wrap">
    <div class="sign-up">
        <button class="btn-close">X</button>
        <h3 class="sign-up-title">Create an Account</h3>
    </div>
    <form id="signUpForm">
        <ul class="sign-up-list">
            <li class="sign-up-item">
                <label for="username">用戶暱稱</label>
                <input type="name" class="input-username" name="username" placeholder="your name">
                <span class="username-error">*不能為空白、必須在40字以內</span>
            </li>
            <li class="sign-up-item">
                <label for="email">Email*</label>
                <input type="email" class="input-email" name="email" placeholder="[email protected]">
                <span class="email-error">*不能為空白、必須包含 @ 符號</span>
            </li>
            <li class="sign-up-item">
                <label for="psd">密碼*</label>
                <input type="password" class="input-password" name="psd" placeholder="Your password">
                <span class="psd-error">*不能為空白、必須在8字以上、必須在100字以內</span>
            </li>
        </ul>
        <div class="sign-up-btn">
            <button type="submit" class="btn btn-create">Create Account</button>
            <button class="btn btn-sign-in">Sign In</button>
        </div>
    </form>
   </div>

CSS

body{
    background-color: #A5D2EB;
}
ul{
    list-style: none;
}
label{
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}
input{
    display: block;
    box-sizing: border-box;
    width: 220px;
    padding: 1rem;
    border: 1px solid #333;
    border-radius: 15px;
    outline: none;
}
button{
    cursor: pointer;
}
.sign-up-wrap{
    position: fixed;
    top: 0;
    right: 0;
    width: 300px;
    padding: 20px 10px;
    border-radius: 50px 0 0 50px;
    background-color: #fff;
}
.sign-up{
    display: flex;
    justify-content: space-between;
    width: 250px;
    margin: auto;
}
.sign-up-title{
    font-size: 16px;
}
.btn-close{   
    border: none;
    font-size: 14px;
    font-weight: 600;
    background-color: transparent;
}
.sign-up-list{
    width: 250px;
}
.sign-up-item{
    width: 220px;
    margin: .5rem 0;
}
.sign-up-item span{
    display: none;
    font-size: 12px;
    color: #f00;
}
.sign-up-btn{
    width: 220px;
    margin: auto;
}
.btn{
    display: block;
    box-sizing: border-box;
    width: 220px;
    margin: .5rem 0;
    padding: 1rem 0;
    border: none;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 700;
}
.btn-create{
    background-color: #000;
    color: #fff;
}
.btn-sign-in{
    background-color: transparent;
}
.btn-sign-in:hover{
    background-color: #000;
    color: #fff;
}

JavaScript

const form = document.querySelector('#signUpForm');
const usernameInput = form.querySelector('input[name="username"]');
const emailInput = form.querySelector('input[name="email"]');
const psdInput = form.querySelector('input[name="psd"]');
const usernameError = form.querySelector('.username-error');
const emailError = form.querySelector('.email-error');
const psdError = form.querySelector('.psd-error');
const inputs = document.querySelectorAll('input');

form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表單提交

    let isValid = true;

    // 驗證用戶暱稱
    if (usernameInput.value.trim() === '') {
        usernameError.style.display = 'block';
        isValid = false;
    } else {
        usernameError.style.display = 'none';
    }

    // 驗證email
    if (emailInput.value.trim() === '' || !emailInput.value.includes('@')) {
        emailError.style.display = 'block';
        isValid = false;
    } else {
        emailError.style.display = 'none';
    }

    // 驗證密碼
    if (psdInput.value.trim() === '' || psdInput.value.length < 8 || psdInput.value.length > 100) {
        psdError.style.display = 'block';
        isValid = false;
    } else {
        psdError.style.display = 'none';
    }

    //在輸入框中輸入文字時，相應的錯誤訊息消失
    for (let i = 0; i < inputs.length; i++) {
        inputs[i].addEventListener('input', () => {
            const errorMessage = inputs[i].parentNode.querySelector('span');
            errorMessage.style.display = 'none';
    		});
    }

    if (isValid) {
        console.log('表單驗證通過，可以提交表單了！');
    }
});