<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Responsive and Functional Registration Form</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registration Form</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
crossorigin="anonymous"></script>
<script src="register.js"></script>
<link rel="stylesheet" type="text/css" href="register.css" media="screen" /><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body>
<div id="wrapper">
<h2 id="titleRegistration">REGISTRATION FORM</h2>
<form>
<fieldset id="userInformation">
<legend>User Information</legend>
<div class="divInformation">
<label class="label" for="username">Username:</label>
<input type="text" id="username" class="input" placeholder="From 3 to 20 letters or numbers" autocomplete="off" autofocus="autofocus"
/>
<div id="errorUsername" class="errorDiv">
<p id="notEnoughLetters">Not enough letters!</p>
<p id="tooMuchLetters">Too much letters!</p>
<p id="lettersOrNumbers">Use only letters or numbers!</p>
<p id="emptyUsername">Do not leave this field empty!</p>
</div>
</div>
<div class="divInformation">
<label class="label" for="firstName">First Name:</label>
<input type="text" id="firstName" class="input" placeholder="Only letters allowed" autocomplete="off" />
<div id="errorFirstName" class="errorDiv">
<p id="emptyFirstName">Do not leave this field empty!</p>
<p id="incorrectFirstName">Numbers, spaces or special symbols are not allowed</p>
</div>
</div>
<div class="divInformation">
<label class="label" for="lastName">Last Name:</label>
<input type="text" id="lastName" class="input" placeholder="Only letters allowed" autocomplete="off" />
<div id="errorLastName" class="errorDiv">
<p id="emptyLastName">Do not leave this field empty!</p>
<p id="incorrectLastName">Numbers, spaces or special symbols are not allowed</p>
</div>
</div>
<div class="divInformation">
<label class="label" for="email">Email Address:</label>
<input type="text" id="email" class="input" placeholder="Type a valid email address" autocomplete="off" />
<div id="errorEmail" class="errorDiv">
<p id="emptyEmail">Do not leave this field empty!</p>
<p id="incorrectEmail">Incorrect Email Address</p>
</div>
</div>
<div class="divInformation">
<label class="label" for="password">Password:</label>
<input type="password" id="password" class="input" placeholder="Between 5 and 15 symbols" autocomplete="off" />
<div id="errorPassword" class="errorDiv">
<p id="emptyPassword">Do not leave this field empty!</p>
<p id="tooShortPassword">Password must contains at least 5 letters or numbers</p>
<p id="tooLongPassword">Password must not be longer than 15 letters or numbers</p>
</div>
</div>
<div class="divInformation">
<label class="label" for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" class="input" placeholder="Retype your password" autocomplete="off" />
<div id="errorConfirmPassword" class="errorDiv">
<p id="passwordNotMatch">Password does not match the confirm password!</p>
<p id="emptyField">Do not leave this field empty!</p>
</div>
</div>
</fieldset>
<fieldset id="nextStep">
<button id="nextStepBtn">Next Step</button>
</fieldset>
<fieldset id="verifyHuman" style="display: none">
<legend>Verify that you are not a robot</legend>
<div>
<label for="numberVerification" class="labelNumber">4 + 3 = ?</label>
<input type="number" id="numberVerification" autocomplete="off" />
<p id="incorrectSum">Sum is not correct. Try again!</p>
</div>
</fieldset>
<fieldset id="submitFieldset" style="display: none">
<div id="submit">
<button id="submitBtn">Send</button>
</div>
</fieldset>
<fieldset id="ageVerification" style="display: none">
<legend>Are you over 18?</legend>
<div>
<input id="yesBtn" type="submit" value="Yes, I am" />
<input id="noBtn" type="reset" value="No, I am not" />
</div>
</fieldset>
<fieldset id="congratulationsFieldset" style="display: none">
<div>
<p id="congratulations">CONGRATULATIONS!</p>
<p id="successfullySubmitted">YOUR REGISTRATION HAS BEEN SUCCESSFULLY SUBMITTED</p>
</div>
</fieldset>
<fieldset id="stoppingFieldset" style="display: none">
<div>
<p id="stop">STOP HERE!</p>
<p id="notAllowedToContinue">YOU ARE NOT ALLOWED TO REGISTER</p>
</div>
</fieldset>
</form>
</div>
</body>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: url('https://image.ibb.co/cV81tH/fall_powerpoint_templates_free_fall_powerpoint_templates_powerpoint_background_google_search_download_750x425.jpg');
background-size: cover;
background-repeat: no-repeat;
}
#wrapper {
width: 30%;
margin: 0 auto;
}
form {
background: transparent;
}
#titleRegistration {
text-align: center;
font-size: 30px;
color: rgb(145, 5, 5);
}
#userInformation {
border: 1px solid rgb(145, 5, 5);
border-bottom: none;
}
legend {
font-weight: bold;
font-size: 24px;
color: rgb(145, 5, 5);
}
.divInformation {
width: 100%;
height: 75px;
}
.divInformation div {
width: 51%;
height: 25%;
float: right;
}
.divInformation div p {
color: rgb(248, 1, 1);
width: 100%;
height: 100%;
float: right;
font-size: 12px;
margin-top: 0px;
text-align: center;
}
.label {
color: rgb(145, 5, 5);
height: 30%;
font-weight: bold;
font-size: 20px;
}
.input {
margin-top: 2px;
border-radius: 3px;
text-align: center;
height: 25%;
width: 50%;
float: right;
background-color: white;
border: 1px solid grey;
}
#nextStep {
border: 1px solid rgb(145, 5, 5);
border-top: none;
border-top: none;
text-align: center;
}
#nextStepBtn {
background-color: rgb(145, 5, 5);
height: 50px;
width: 150px;
color: white;
font-size: 18px;
font-weight: bold;
border-radius: 10px;
}
#nextStepBtn:hover {
cursor: pointer;
}
#verifyHuman {
text-align: center;
border: 1px solid rgb(145, 5, 5);
margin-top: 40%;
}
.labelNumber {
font-size: 24px;
font-weight: bold;
color: rgb(145, 5, 5);
}
#numberVerification {
width: 50px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
font-size: 22px;
font-weight: bold;
color: rgb(4, 133, 36);
}
#incorrectSum {
color: rgb(248, 1, 1);
font-size: 20px;
text-align: center;
display: none;
}
#submitFieldset {
border: none;
margin-bottom: 40%;
}
#submit {
width: 100%;
text-align: center;
}
#submitBtn {
background-color: rgb(145, 5, 5);
height: 50px;
width: 150px;
color: white;
font-size: 22px;
font-weight: bold;
border-radius: 10px;
}
#submitBtn:hover {
cursor: pointer;
}
#ageVerification {
font-size: 22px;
font-weight: bold;
border: 1px solid rgb(145, 5, 5);
margin-top: 40%;
margin-bottom: 40%;
}
#yesBtn {
float: left;
border-radius: 10px;
background-color: rgb(250, 164, 3);
color: white;
font-size: 18px;
font-weight: bold;
height: 50px;
width: 150px;
}
#noBtn {
float: right;
border-radius: 10px;
background-color: rgb(211, 6, 6);
color: white;
font-size: 18px;
font-weight: bold;
height: 50px;
width: 150px;
}
#congratulationsFieldset {
border: 1px solid rgb(102, 2, 2);
margin-top: 40%;
margin-bottom: 40%;
}
#congratulations {
text-align: center;
font-size: 28px;
font-weight: bold;
color: rgb(145, 5, 5);
}
#successfullySubmitted {
text-align: center;
font-size: 22px;
font-style: italic;
color: rgb(145, 5, 5);
}
#stoppingFieldset {
border: 1px solid rgb(248, 1, 1);
margin-top: 40%;
margin-bottom: 40%;
}
#stop {
text-align: center;
font-size: 28px;
font-weight: bold;
color: rgb(248, 1, 1);
}
#notAllowedToContinue {
text-align: center;
font-size: 22px;
font-style: italic;
color: rgb(248, 1, 1);
}
.errorDiv {
width: 50%;
float: right;
margin-top: 0px;
font-size: 8px;
}
#emptyUsername {
display: none;
}
#notEnoughLetters {
display: none;
}
#tooMuchLetters {
display: none;
}
#lettersOrNumbers {
display: none;
}
#emptyFirstName {
display: none;
}
#incorrectFirstName {
display: none;
}
#emptyLastName {
display: none;
}
#incorrectLastName {
display: none;
}
#emptyEmail {
display: none;
}
#incorrectEmail {
display: none;
}
#emptyPassword {
display: none;
}
#tooShortPassword {
display: none;
}
#tooLongPassword {
display: none;
}
#passwordNotMatch {
display: none;
}
#emptyField {
display: none;
}
@media screen and (max-width: 1334px) {
#titleRegistration {
font-size: 24px;
}
legend {
font-size: 20px;
}
.label {
font-size: 18px;
}
#nextStepBtn {
font-size: 16px;
}
#submitBtn {
font-size: 20px;
}
#yesBtn {
width: 100%;
}
#noBtn {
width: 100%;
}
#congratulations {
font-size: 24px;
}
#successfullySubmitted {
font-size: 18px;
}
#stop {
font-size: 24px;
}
#notAllowedToContinue {
font-size: 24px;
}
}
@media screen and (max-width: 1220px) {
#wrapper {
width: 35%;
}
#titleRegistration {
font-size: 20px;
}
legend {
font-size: 18px;
}
.label {
font-size: 16px;
}
.input {
width: 98%;
font-size: 12px;
}
.divInformation div {
width: 100%;
}
#congratulations {
font-size: 14px;
}
#successfullySubmitted {
font-size: 12px;
}
#stop {
font-size: 14px;
}
#notAllowedToContinue {
font-size: 12px;
}
}
@media screen and (max-width: 750px) {
#wrapper {
width: 40%;
}
}
@media screen and (max-width: 550px) {
#wrapper {
width: 56%;
}
}
@media screen and (max-width: 450px) {
#wrapper {
width: 76%;
}
}
$(document).ready(function validate () {
let allIsValid = 0
let titleRegistration = $('#titleRegistration')
let userInformation = $('#userInformation')
let username = $('#username')
let firstName = $('#firstName')
let lastName = $('#lastName')
let email = $('#email')
let password = $('#password')
let confirmPassword = $('#confirmPassword')
let verifyHuman = $('#verifyHuman')
let numberVerification = $('#numberVerification')
let incorrectSum = $('#incorrectSum')
let ageVerification = $('#ageVerification')
let nextStepFieldset = $('#nextStep')
let nextStepBtn = $('#nextStepBtn')
let submitFieldset = $('#submitFieldset')
let submit = $('#submit')
let submitBtn = $('#submitBtn')
let yesBtn = $('#yesBtn')
let noBtn = $('#noBtn')
let congratulationsFieldset = $('#congratulationsFieldset')
let stoppingFieldset = $('#stoppingFieldset')
let emptyUsername = $('#emptyUsername')
let errorUsername = $('#errorUsername p')
let tooMuchLetters = $('#tooMuchLetters')
let notEnoughLetters = $('#notEnoughLetters')
let lettersOrNumbers = $('#lettersOrNumbers')
let emptyFirstName = $('#emptyFirstName')
let errorFirstName = $('#incorrectFirstName')
let emptyLastName = $('#emptyLastName')
let errorLastName = $('#incorrectLastName')
let errorEmail = $('#incorrectEmail')
let emptyEmail = $('#emptyEmail')
let emptyPassword = $('#emptyPassword')
let errorShortPassword = $('#tooShortPassword')
let errorLongPassword = $('#tooLongPassword')
let passwordNotMatch = $('#passwordNotMatch')
let emptyField = $('#emptyField')
nextStepBtn.on('click', function (event) {
event.preventDefault()
validateInfo()
})
function validateInfo () {
validateForm(username, /^[A-Za-z\d]{3,20}$/g)
validateForm(firstName, /^[A-Za-z]{1,1000}$/g)
validateForm(lastName, /^[A-Za-z]{1,1000}$/g)
validateForm(email, /^(([^<>()\[\]\\.,;:\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,}))$/g)
validateForm(password, /^.{5,15}$/g)
validateForm(confirmPassword, /^.{1,1000}$/g)
if (confirmPassword.val() === password.val()) {
validateForm(password, /^.{5,15}$/g)
validateForm(confirmPassword, /^.{5,15}$/g)
allIsValid++
} else {
confirmPassword.css('border', '2px solid red')
}
}
function validateForm (input, pattern) {
if (pattern.test(input.val())) {
input.css('border', '2px solid green')
allIsValid++
if (input == username) {
emptyUsername.css('display', 'none')
notEnoughLetters.css('display', 'none')
tooMuchLetters.css('display', 'none')
lettersOrNumbers.css('display', 'none')
}
else if (input == firstName) {
emptyFirstName.css('display', 'none')
errorFirstName.css('display', 'none')
}
else if (input == lastName) {
errorLastName.css('display', 'none')
emptyLastName.css('display', 'none')
}
else if (input == email) {
errorEmail.css('display', 'none')
emptyEmail.css('display', 'none')
}
else if (input == password) {
errorShortPassword.css('display', 'none')
errorLongPassword.css('display', 'none')
emptyPassword.css('display', 'none')
}
else if (input == confirmPassword) {
passwordNotMatch.css('display', 'none')
emptyField.css('display', 'none')
}
if (input == confirmPassword) {
if (confirmPassword.val() === password.val()) {
confirmPassword.css('border', '2px solid green')
passwordNotMatch.css('display', 'none')
emptyField.css('display', 'none')
}else {
confirmPassword.css('border', '2px solid red')
passwordNotMatch.css('display', 'block')
emptyField.css('display', 'none')
}
nextStep()
}
}else {
input.css('border', '2px solid red')
allIsValid = 0
if (input == username) {
checkErrorUsername(username)
}
else if (input == firstName) {
if (!/^.{1,1000}$/g.test(input.val())) {
firstName.css('border', '2px solid red')
errorFirstName.css('display', 'none')
emptyFirstName.css('display', 'block')
}else {
emptyFirstName.css('display', 'none')
errorFirstName.css('display', 'block')
}
}
else if (input == lastName) {
if (!/^.{1,1000}$/g.test(input.val())) {
lastName.css('border', '2px solid red')
errorLastName.css('display', 'none')
emptyLastName.css('display', 'block')
}else {
emptyLastName.css('display', 'none')
errorLastName.css('display', 'block')
}
}
else if (input == email) {
if (!/^.{1,1000}$/g.test(input.val())) {
email.css('border', '2px solid red')
errorEmail.css('display', 'none')
emptyEmail.css('display', 'block')
}else {
emptyEmail.css('display', 'none')
errorEmail.css('display', 'block')
}
}
else if (input == password) {
if (!/^.{1,1000}$/g.test(input.val())) {
password.css('border', '2px solid red')
errorShortPassword.css('display', 'none')
errorLongPassword.css('display', 'none')
emptyPassword.css('display', 'block')
}else {
checkPassword(password)
}
}
else if (input == confirmPassword) {
passwordNotMatch.css('display', 'none')
emptyField.css('display', 'block')
}
}
}
function nextStep () {
if (allIsValid > 7 && confirmPassword.val() === password.val()) {
titleRegistration.css('display', 'none')
verifyHuman.css('display', 'block')
userInformation.css('display', 'none')
nextStepFieldset.css('display', 'none')
submitFieldset.css('display', 'block')
}else {
validateInfo()
}
}
submitBtn.on('click', function (event) {
event.preventDefault()
if (numberVerification.val() == 7) {
verifyHuman.css('display', 'none')
submitFieldset.css('display', 'none')
ageVerification.css('display', 'block')
verifyAge()
}else {
verifyHuman.css('display', 'block')
incorrectSum.css('display', 'block')
}
})
function verifyAge () {
yesBtn.on('click', function (event) {
event.preventDefault()
congratulationsFieldset.css('display', 'block')
ageVerification.css('display', 'none')
})
noBtn.on('click', function (event) {
event.preventDefault()
stoppingFieldset.css('display', 'block')
ageVerification.css('display', 'none')
})
}
function checkErrorUsername (input) {
if (!/^.{1,1000}$/g.test(input.val())) {
username.css('border', '2px solid red')
lettersOrNumbers.css('display', 'none')
notEnoughLetters.css('display', 'none')
tooMuchLetters.css('display', 'none')
emptyUsername.css('display', 'block')
}else {
if (!/^[A-Za-z\d]{1,1000}$/g.test(input.val())) {
emptyUsername.css('display', 'none')
notEnoughLetters.css('display', 'none')
tooMuchLetters.css('display', 'none')
lettersOrNumbers.css('display', 'block')
} else {
if (!/^[A-Za-z\d]{3,}$/g.test(input.val())) {
emptyUsername.css('display', 'none')
lettersOrNumbers.css('display', 'none')
tooMuchLetters.css('display', 'none')
notEnoughLetters.css('display', 'block')
}else {
emptyUsername.css('display', 'none')
lettersOrNumbers.css('display', 'none')
notEnoughLetters.css('display', 'none')
tooMuchLetters.css('display', 'block')
}
}
}
}
function checkPassword (input) {
if (!/^.{5,}$/g.test(input.val())) {
emptyPassword.css('display', 'none')
errorLongPassword.css('display', 'none')
errorShortPassword.css('display', 'block')
}else {
emptyPassword.css('display', 'none')
errorShortPassword.css('display', 'none')
errorLongPassword.css('display', 'block')
}
}
})