<body class="align">
<div class="grid">
<div class="registration_form">
<h2>registration </h2>
<form class="form" method="post">
<input class="input" type="text" name="name" id="name" autocomplete="off" placeholder="name"><br>
<span class="login_error" id="name_error"></span>
<input class="input" type="text" name="lastname" id="lastname" autocomplete="off" placeholder="lastname"><br>
<span class="login_error" id="lastname_error"></span>
<input class="input" type="email" name="email" id="email" autocomplete="off" placeholder="email"><br>
<span class="login_error" id="email_error"></span>
<input class="input" type="password" name="password" id="password" placeholder="••••••••••••"><br>
<span class="login_error" id="password_error"></span>
<br><button class="button" type="button" name="reg" id="reg">submit</button><br>
</form>
</div>
</div>
</body>
* {
box-sizing: border-box;
font-family: Georgia, serif;
}
html {
height: 100%;
}
body {
background-color: #847c7c9e;
}
.align {
color: #D6D7D7;
font-size: 17px;
padding: 5px;
}
.grid {
margin: auto;
max-width: 462px;
}
h2 {
font-size: 38px;
font-weight: 100;
text-transform: uppercase;
}
.registration_form{
background-image: linear-gradient(#017681, #028D9A);
box-shadow: 0 0 250px #70CED7;
text-align: center;
padding: 20px 15px;
}
.input{
border: 1px solid #242c37;
border-radius: 5px;
background-color: transparent;
text-align: center;
color: #D6D7D7;
font-size: 17px;
outline: 0;
padding: 8px;
width: 80%;
margin: 15px;
}
.input::placeholder {
color: #A8B3B4;
}
.button {
background-color: #01565E;
//background-image: linear-gradient(160deg, #4ba3e2, #67b1d4);
color: #fff;
padding: 8px;
margin-top: 5%;
margin-bottom: 2%;
width: 50%;
border: none;
border-radius: 8px;
font-size: 20px;
transition: all 0.5s;
outline: none;
}
.button:hover{
cursor: pointer;
box-shadow: 0px 4px 17px 3px #70CED7;
}
.login_error{
display: none;
font-size: 16px;
}
$().ready(function() {
//Name
$('#name').keyup(function(e) {
var name = $('#name').val();
switch(true){
case (name == ''):
$('#name').css('border', 'solid 1px #690008');
$('#name_error').text('name missing');
$('#name_error').show();
e.preventDefault();
break;
case (name.length <= 2):
$('#name').css('border', 'solid 1px #690008');
$('#name_error').text('at least 3 chars for name');
$("#name_error").show();
e.preventDefault();
break;
case (name.length >= 50):
$('#name').css('border', 'solid 1px #690008');
$('#name_error').text('no more than 50 chars for name');
$("#name_error").show();
e.preventDefault();
break;
default:
$('#name').css('border','solid 1px #242c37');
$('#name_error').hide();
}
});
//Lastname
$('#lastname').keyup(function(e) {
var lastname = $('#lastname').val();
switch(true){
case (lastname == ''):
$('#lastname').css('border', 'solid 1px #690008');
$('#lastname_error').text('lastname missing');
$("#lastname_error").show();
e.preventDefault();
break;
case (lastname.length <= 2):
$('#lastname').css('border', 'solid 1px #690008');
$('#lastname_error').text('at least 3 chars for lastname');
$("#lastname_error").show();
e.preventDefault();
break;
case (lastname.length >= 50):
$('#lastname').css('border', 'solid 1px #690008');
$('#lastname_error').text('no more than 50 chars for lastname');
$("#lastname_error").show();
e.preventDefault();
break;
default:
$('#lastname').css('border','solid 1px #242c37');
$('#lastname_error').hide();
}
});
//validation email function
function validateEmail(email) {
var regex = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
return regex.test(email);
}
//Email
$('#email').keyup(function(e) {
var email = $('#email').val();
switch(true){
case (email == ''):
$('#email').css('border', 'solid 1px #690008');
$('#email_error').text('email missing');
$('#email_error').show();
e.preventDefault();
break;
case (!validateEmail(email)):
$('#email').css('border', 'solid 1px #690008');
$('#email_error').text('invalid email');
$('#email_error').show();
e.preventDefault();
break;
default:
$('#email').css('border','solid 1px #242c37');
$('#email_error').hide();
}
});
//Password
$('#password').keyup(function(e) {
var password = $('#password').val();
switch(true){
case (password == ''):
$('#password').css('border', 'solid 1px #690008');
$('#password_error').text('password missing');
$("#password_error").show();
e.preventDefault();
break;
case (password.length < 8):
$('#password').css('border', 'solid 1px #690008');
$('#password_error').text('at least 8 chars for password');
$("#password_error").show();
e.preventDefault();
break;
default:
$('#password').css('border','solid 1px #242c37');
$('#password_error').hide();
}
});
});