Nội dung bài viết

Day 8 | Demo Register Form Validator

Sử dụng HTML , CSS, JS thiết kế các chức năng Register Form Validator

				
					<body>
    <div class="container">
      <h1><span class="ez-toc-section" id="Register"></span>Register<span class="ez-toc-section-end"></span></h1>
      <form>
        <div class="form-control">
          <input type="text" id="username" placeholder="Username" />
          <span></span>
          <small></small>
        </div>
        <div class="form-control">
          <input type="email" id="email" placeholder="Email" />
          <span></span>
          <small></small>
        </div>
        <div class="form-control">
          <input type="password" id="password" placeholder="Password" />
          <span></span>
          <small></small>
        </div>
        <div class="form-control">
          <input
            type="password"
            id="password2"
            placeholder="Confirm password"
          />
          <span></span>
          <small></small>
        </div>
        <input type="submit" value="Login" />
        <div class="signup_link">Not a member? <a href="#">Signup</a></div>
      </form>
    </div>

    <script src="app.js"></script>
  </body>

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body {
	background: linear-gradient(120deg, #3ca7ee, #9b408f);
	height: 100vh;
	overflow: hidden;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	background: white;
	border-radius: 10px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05);
}

.container h1 {
	text-align: center;
	padding-top: 20px;
}

.container form {
	padding: 0 40px;
}

form .form-control {
	position: relative;
	border-bottom: 2px solid #adadad;
	margin: 40px 0;
}

.form-control.success {
	border-bottom-color: #2691d9;
}

.form-control.error {
	border-bottom-color: #e74c3c;
}

.form-control input {
	width: 100%;
	height: 40px;
	font-size: 16px;
	border: none;
	background: none;
	outline: none;
}

small {
	position: absolute;
	left: 0;
	top: 100%;
	margin-top: 3px;
	color: #e74c3c;
}

.form-control span::before {
	content: '';
	position: absolute;
	top: 40px;
	left: 0;
	width: 0%;
	height: 2px;
	background: #2691d9;
	transition: 0.3s;
}

.form-control input:focus ~ span::before {
	width: 100%;
}

input[type='submit'] {
	margin-top: 20px;
	width: 100%;
	height: 50px;
	border: 1px solid;
	background: #2691d9;
	border-radius: 25px;
	font-size: 18px;
	color: #e9f4fb;
	font-weight: 700;
	cursor: pointer;
	outline: none;
	transition: 0.5s;
}

input[type='submit']:hover {
	background-color: #08609a;
}

.signup_link {
	margin: 25px 0;
	text-align: center;
	font-size: 16px;
	color: #666666;
}

.signup_link a {
	color: #2691d9;
	text-decoration: none;
}

.signup_link a:hover {
	text-decoration: underline;
}

				
					const form = document.querySelector('form')
const username = document.getElementById('username')
const email = document.getElementById('email')
const password = document.getElementById('password')
const password2 = document.getElementById('password2')

// Show input error message
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> showError(input, message) {
	const formControl = input.parentElement
	formControl.className = 'form-control error'
	const small = formControl.querySelector('small')
	small.innerText = message
}

// Show success outline
function showSuccess(input) {
	const formControl = input.parentElement
	formControl.className = 'form-control success'
    const small = formControl.querySelector('small')
	small.innerText = ''
}

// Check email is valid
function checkEmail(input) {
	const re =
		/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/

	if (re.test(input.value.trim())) {
		showSuccess(input)
	} else {
		showError(input, 'Email is not valid')
	}
}

// Check required fields
function checkRequired(inputArr) {
	let isRequired = false
	inputArr.forEach(function (input) {
		if (input.value.trim() === '') {
			showError(input, `${getFieldName(input)} is required`)
			isRequired = true
		} else {
			showSuccess(input)
		}
	})

	return isRequired
}

// Check input length
function checkLength(input, min, max) {
	if (input.value.length < min) {
		showError(
			input,
			`${getFieldName(input)} must be at least ${min} characters`
		)
	} else if (input.value.length > max) {
		showError(
			input,
			`${getFieldName(input)} must be less than ${max} characters`
		)
	} else {
		showSuccess(input)
	}
}

// Check passwords match
function checkPasswordsMatch(input1, input2) {
	if (input1.value !== input2.value) {
		showError(input2, 'Passwords do not match')
	}
}

// Get fieldname
function getFieldName(input) {
	return input.id.charAt(0).toUpperCase() + input.id.slice(1)
}

// Event listeners
form.addEventListener('submit', function (e) {
	e.preventDefault()

	if (!checkRequired([username, email, password, password2])) {
		checkLength(username, 3, 15)
		checkLength(password, 6, 25)
		checkEmail(email)
		checkPasswordsMatch(password, password2)
	}
})