A Pen by Web Dev Simplified on CodePen.
Created
June 7, 2022 15:28
-
-
Save saminwankwo/dc1328f0590afb927ff20906eb1244ab to your computer and use it in GitHub Desktop.
Form Validation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="error"></div> | |
<form id="form" action="/" method="GET"> | |
<div> | |
<label for="name">Name</label> | |
<input id="name" name="name" type="text" required> | |
</div> | |
<div> | |
<label for="password">Password</label> | |
<input id="password" name="password" type="password"> | |
</div> | |
<button type="submit">Submit</button> | |
</form> | |
<!-- Side Links Only --> | |
<div class="side-links"> | |
<a href="https://youtu.be/In0nB0ABaUk" target="_blank" class="side-link side-link-youtube"> | |
<i class="fab fa-youtube-square side-link-icon"></i> | |
<span class="side-link-text">View Tutorial</span> | |
</a> | |
<a href="https://github.com/WebDevSimplified" target="_blank" class="side-link side-link-github side-link-icon"> | |
<i class="fab fa-github-square"></i> | |
<span class="side-link-text">View GitHub</span> | |
</a> | |
<a href="https://twitter.com/DevSimplified" target="_blank" class="side-link side-link-twitter"> | |
<i class="fab fa-twitter-square side-link-icon"></i> | |
<span class="side-link-text">View Twitter</span> | |
</a> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const name = document.getElementById('name') | |
const password = document.getElementById('password') | |
const form = document.getElementById('form') | |
const errorElement = document.getElementById('error') | |
form.addEventListener('submit', (e) => { | |
let messages = [] | |
if (name.value === '' || name.value == null) { | |
messages.push('Name is required') | |
} | |
if (password.value.length <= 6) { | |
messages.push('Password must be longer than 6 characters') | |
} | |
if (password.value.length >= 20) { | |
messages.push('Password must be less than 20 characters') | |
} | |
if (password.value === 'password') { | |
messages.push('Password cannot be password') | |
} | |
if (messages.length > 0) { | |
e.preventDefault() | |
errorElement.innerText = messages.join(', ') | |
} | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Background Styles Only */ | |
@import url('https://fonts.googleapis.com/css?family=Raleway'); | |
* { | |
font-family: Raleway; | |
} | |
html { | |
width: 100%; | |
height: 100%; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
background-color: #DFDFDF; | |
} | |
.side-links { | |
position: absolute; | |
top: 15px; | |
right: 15px; | |
} | |
.side-link { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
text-decoration: none; | |
margin-bottom: 10px; | |
color: white; | |
width: 180px; | |
padding: 10px 0; | |
border-radius: 10px; | |
} | |
.side-link-youtube { | |
background-color: red; | |
} | |
.side-link-twitter { | |
background-color: #1DA1F2; | |
} | |
.side-link-github { | |
background-color: #6e5494; | |
} | |
.side-link-text { | |
margin-left: 10px; | |
font-size: 18px; | |
} | |
.side-link-icon { | |
color: white; | |
font-size: 30px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment