Skip to content

Commit adc6517

Browse files
iagathaiagatha
committed
forms
0 parents  commit adc6517

File tree

3 files changed

+246
-0
lines changed

3 files changed

+246
-0
lines changed

‎index.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;900&display=swap" rel="stylesheet">
11+
<title>Formulário</title>
12+
</head>
13+
<body>
14+
<div class="container">
15+
<div class="header">
16+
<h2>Criar uma conta</h2>
17+
</div>
18+
19+
<form id="form" class="form">
20+
<div class="form-control">
21+
<label for="username">Nome de usuário</label>
22+
<input type="text" id="username" placeholder="Digite seu nome de usuário....">
23+
<i class="fas fa-exclamation-circle"></i>
24+
<i class="fas fa-check-circle"></i>
25+
<small>Mensagem de error</small>
26+
</div>
27+
28+
<div class="form-control">
29+
<label for="email">Email</label>
30+
<input type="text" id="email" placeholder="Digite seu email...">
31+
<i class="fas fa-exclamation-circle"></i>
32+
<i class="fas fa-check-circle"></i>
33+
<small>Mensagem de error</small>
34+
</div>
35+
36+
<div class="form-control">
37+
<label for="password">Senha</label>
38+
<input type="password" id="password" placeholder="Digite sua senha...">
39+
<i class="fas fa-exclamation-circle"></i>
40+
<i class="fas fa-check-circle"></i>
41+
<small>Mensagem de error</small>
42+
</div>
43+
44+
<div class="form-control">
45+
<label for="password-confirmation">Confirmação de senha</label>
46+
<input type="password" id="password-confirmation" placeholder="Digite sua senha novamente...">
47+
<i class="fas fa-exclamation-circle"></i>
48+
<i class="fas fa-check-circle"></i>
49+
<small>Mensagem de error</small>
50+
</div>
51+
52+
53+
<button type="submit">Enviar</button>
54+
</form>
55+
</div>
56+
<script src="https://kit.fontawesome.com/f9e19193d6.js"
57+
crossorigin="anonymous"></script>
58+
<script src="./script.js"></script>
59+
</body>
60+
</html>

‎script.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
const form = document.getElementById('form');
2+
const username = document.getElementById('username');
3+
const email = document.getElementById('email');
4+
const password = document.getElementById('password');
5+
const passwordConfirme = document.getElementById('password-confirmation');
6+
7+
form.addEventListener('submit', (e) => {
8+
e.preventDefault();
9+
10+
checkInput();
11+
});
12+
13+
function checkInput() {
14+
const usernameValue = username.value;
15+
const emailValue = email.value;
16+
const passwordValue = password.value;
17+
const passworConfirmeValue = passwordConfirme.value;
18+
19+
20+
if(usernameValue === '') {
21+
setErrorFor(username, "O nome de usuário é obrigatório.");
22+
}else{
23+
setSuccessFor(username);
24+
}
25+
26+
if(emailValue === '') {
27+
setErrorFor(email, "O email é obrigatório");
28+
}else if (!checkEmail(emailValue)){
29+
setErrorFor(email, 'Por favor, insira um email válido.')
30+
}else {
31+
setSuccessFor(email);
32+
}
33+
34+
if(password === '') {
35+
setErrorFor(password, "A senha é obrigatória");
36+
}else if(passwordValue.length < 7) {
37+
setErrorFor(password, 'A senha precisa conter no mínimo 7 caracteres');
38+
}else{
39+
setSuccessFor(password);
40+
}
41+
42+
if(passworConfirmeValue === '') {
43+
setErrorFor(passwordConfirme, 'A confirmação de senha é obrigatório')
44+
}else if(passworConfirmeValue !== passwordValue){
45+
setErrorFor(passwordConfirme, "As senhas não conferem");
46+
}else{
47+
setSuccessFor(passwordConfirmeVlue);
48+
}
49+
50+
const formControls = form.querySelectorAll('form-control');
51+
const formIsValid = [... formControls].every((formControl) => {
52+
return(formControl.className = "form-control sucess");
53+
})
54+
55+
if(formIsValid) {
56+
console.log("O formulário está 100% válido")
57+
}
58+
}
59+
60+
61+
function setErrorFor(input, message) {
62+
const formControl = input.parentElement;
63+
const small = formControl.querySelector('small');
64+
65+
// adicionar a mensagem de error
66+
small.innerText = message;
67+
68+
//adiciona a classe de error
69+
formControl.className = 'form-control error';
70+
}
71+
function setSuccessFor(input){
72+
const formControl = input.parentElement;
73+
74+
// adicionar class de success
75+
formControl.className = 'form-control success';
76+
}
77+
function checkEmail(email){
78+
return /^(([^<>()\[\]\\.,;:\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,}))$/.test(
79+
email
80+
);
81+
}
82+

‎style.css

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
font-family: 'Poppins', sans-serif;
6+
7+
}
8+
9+
body{
10+
width: 100%;
11+
min-height: 100vh;
12+
background: linear-gradient(90deg, #00dbde 0%, #fc00ff 100%);
13+
display: flex;
14+
justify-content: center;
15+
align-items: center;
16+
}
17+
18+
.container{
19+
background-color: #fafafa;
20+
border-radius: 10px;
21+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
22+
width: 400px;
23+
max-width: 100%;
24+
overflow: hidden;
25+
}
26+
27+
.header{
28+
background-color: #eee;
29+
padding: 20px;
30+
}
31+
32+
.form{
33+
padding: 20px;
34+
}
35+
36+
.form-control{
37+
margin-bottom: 10px;
38+
padding-bottom: 20px;
39+
position:relative;
40+
}
41+
42+
.form-control label {
43+
display: inline-block;
44+
margin-bottom: 5px;
45+
}
46+
47+
.form-control input {
48+
border: 2px solid;
49+
display: block;
50+
border-radius: 10px;
51+
font-size: 14px;
52+
width: 100%;
53+
padding: 10px;
54+
}
55+
56+
.form-control i {
57+
position: absolute;
58+
top: 45px;
59+
right: 10px;
60+
visibility: hidden;
61+
}
62+
63+
.form-control small {
64+
position: absolute;
65+
bottom: 0;
66+
left: 0;
67+
visibility: hidden;
68+
69+
}
70+
71+
.form button {
72+
background-color: #fc00ff;
73+
border: 2px solid #fc00ff;
74+
color: #fff;
75+
font-size: 14px;
76+
width: 100%;
77+
border-radius: 10px;
78+
padding: 10px;
79+
}
80+
81+
/*Error and succes */
82+
.form-control.success input{
83+
border-color: #2ecc71;
84+
}
85+
86+
.form-control.error input{
87+
border-color: #e74c3e;
88+
}
89+
90+
.form-control.success i.fa-check-circle{
91+
color: #2ecc71;
92+
visibility: visible;
93+
}
94+
95+
.form-control.error i.fa-exclamation-circle{
96+
color: #e74c3e;
97+
visibility: visible;
98+
}
99+
100+
.form-control.error small{
101+
visibility: visible;
102+
color: #e74c3e;
103+
}
104+

0 commit comments

Comments
 (0)