├── .vscode └── settings.json ├── index.html ├── script.js └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Novo usuario - Sujeito Programador 15 | 16 | 17 | 18 |
19 |
20 |

Nova conta

21 |
22 | 23 |
24 |
25 | 26 | 31 | Aqui vai a mensagem de erro.... 32 |
33 | 34 |
35 | 36 | 41 | Aqui vai a mensagem de erro.... 42 |
43 | 44 |
45 | 46 | 51 | Aqui vai a mensagem de erro.... 52 |
53 | 54 |
55 | 56 | 61 | Aqui vai a mensagem de erro.... 62 |
63 | 64 | 65 | 66 |
67 | 68 |
69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | 2 | const form = document.getElementById("form"); 3 | const username = document.getElementById("username") 4 | const email = document.getElementById("email") 5 | const password = document.getElementById("password") 6 | const passwordConfirmation = document.getElementById("password-confirmation"); 7 | 8 | 9 | form.addEventListener("submit", (event) => { 10 | event.preventDefault(); 11 | 12 | checkForm(); 13 | }) 14 | 15 | email.addEventListener("blur", () => { 16 | checkInputEmail(); 17 | }) 18 | 19 | 20 | username.addEventListener("blur", () => { 21 | checkInputUsername(); 22 | }) 23 | 24 | 25 | function checkInputUsername(){ 26 | const usernameValue = username.value; 27 | 28 | if(usernameValue === ""){ 29 | errorInput(username, "Preencha um username!") 30 | }else{ 31 | const formItem = username.parentElement; 32 | formItem.className = "form-content" 33 | } 34 | 35 | } 36 | 37 | function checkInputEmail(){ 38 | const emailValue = email.value; 39 | 40 | if(emailValue === ""){ 41 | errorInput(email, "O email é obrigatório.") 42 | }else{ 43 | const formItem = email.parentElement; 44 | formItem.className = "form-content" 45 | } 46 | 47 | 48 | } 49 | 50 | 51 | function checkInputPassword(){ 52 | const passwordValue = password.value; 53 | 54 | if(passwordValue === ""){ 55 | errorInput(password, "A senha é obrigatória.") 56 | }else if(passwordValue.length < 8){ 57 | errorInput(password, "A senha precisa ter no mínimo 8 caracteres.") 58 | }else{ 59 | const formItem = password.parentElement; 60 | formItem.className = "form-content" 61 | } 62 | 63 | 64 | } 65 | 66 | 67 | function checkInputPasswordConfirmation(){ 68 | const passwordValue = password.value; 69 | const confirmationPasswordValue = passwordConfirmation.value; 70 | 71 | if(confirmationPasswordValue === ""){ 72 | errorInput(passwordConfirmation, "A confirmação de senha é obrigatória.") 73 | }else if(confirmationPasswordValue !== passwordValue){ 74 | errorInput(passwordConfirmation, "As senhas não são iguais.") 75 | }else{ 76 | const formItem = passwordConfirmation.parentElement; 77 | formItem.className = "form-content" 78 | } 79 | 80 | 81 | } 82 | 83 | 84 | function checkForm(){ 85 | checkInputUsername(); 86 | checkInputEmail(); 87 | checkInputPassword(); 88 | checkInputPasswordConfirmation(); 89 | 90 | const formItems = form.querySelectorAll(".form-content") 91 | 92 | const isValid = [...formItems].every( (item) => { 93 | return item.className === "form-content" 94 | }); 95 | 96 | if(isValid){ 97 | alert("CADASTRADO COM SUCESSO!") 98 | } 99 | 100 | } 101 | 102 | 103 | function errorInput(input, message){ 104 | const formItem = input.parentElement; 105 | const textMessage = formItem.querySelector("a") 106 | 107 | textMessage.innerText = message; 108 | 109 | formItem.className = "form-content error" 110 | 111 | } -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | font-family: "Poppins", sans-serif; 7 | } 8 | 9 | body{ 10 | background: #121212; 11 | width: 100%; 12 | min-height: 100vh; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | } 17 | 18 | .container{ 19 | background-color: #fafafa; 20 | border-radius: 14px; 21 | margin: 14px; 22 | max-width: 600px; 23 | width: 100%; 24 | box-sizing: 0 3px 5px rgba(0,0,0, 0.5); 25 | overflow: hidden; 26 | } 27 | 28 | .header{ 29 | background: linear-gradient(120deg, #3acbf0 0%, #8bb0ff 100%); 30 | padding: 24px; 31 | text-align: center; 32 | color: #FFF; 33 | } 34 | 35 | .form{ 36 | padding: 18px; 37 | } 38 | 39 | .form-content{ 40 | margin-bottom: 8px; 41 | padding-bottom: 18px; 42 | position: relative; 43 | } 44 | 45 | .form-content label{ 46 | display: inline-block; 47 | margin-bottom: 4px; 48 | } 49 | 50 | .form-content input{ 51 | display: block; 52 | width: 100%; 53 | border-radius: 8px; 54 | padding: 8px; 55 | border: 2px solid #dfdfdf; 56 | } 57 | 58 | .form-content a{ 59 | position: absolute; 60 | bottom: -8px; 61 | left: 0; 62 | visibility: hidden; 63 | } 64 | 65 | .form button{ 66 | background-color: #00c3ff; 67 | color: #FFF; 68 | width: 100%; 69 | border-radius: 14px; 70 | padding: 10px; 71 | border: 0; 72 | font-size: 16px; 73 | cursor: pointer; 74 | margin-top: 14px; 75 | } 76 | 77 | .form-content.error input{ 78 | border-color: #ff3b25; 79 | } 80 | 81 | .form-content.error a{ 82 | color: #ff3b25; 83 | visibility: visible; 84 | } --------------------------------------------------------------------------------