Login Form CSS only validation

Developer
James Nowland
Size
5,739 Kb
Views
20,240
  1. Login Form CSS only validation Previews
  2. Login Form CSS only validation HTML Codes
  3. Login Form CSS only validation CSS Codes
  4. Login Form CSS only validation JS Codes

How do I make an login form css only validation?

Combining multiple concepts together of visible password, CSS Validation, Sibling Selectors, checkbox hacks this enables a CSS only validation for a login form.. What is a login form css only validation? How do you make a login form css only validation? This script and codes were developed by James Nowland on 31 October 2022, Monday.

Login Form CSS only validation Previews
IQ Test

Login Form CSS only validation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Login Form CSS only validation</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form action="#login" class="Form"> <h1 class="Form-title">Login</h1> <p class="Form-description">This form will allow you to login and validate with HTML5 + CSS.</p> <div class="Form-fields"> <input type="email" id="email" class="ControlInput ControlInput--email" placeholder=" " required > <label for="email" class="Control-label Control-label--email" >Email</label> <div class="Control-requirements Control-requirements--email"> Must be a valid email </div> <!-- this is here to give power to the :checked css selector --> <input type="checkbox" id="show-password" class="show-password" > <label for="show-password" class="Control-label Control-label--showPassword" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="32" height="32" class="svg-toggle-password" title="Toggle Password Security"> <title>Hide/Show Password</title> <path d="M24,9A23.654,23.654,0,0,0,2,24a23.633,23.633,0,0,0,44,0A23.643,23.643,0,0,0,24,9Zm0,25A10,10,0,1,1,34,24,10,10,0,0,1,24,34Zm0-16a6,6,0,1,0,6,6A6,6,0,0,0,24,18Z"/> <rect x="20.133" y="2.117" height="44" transform="translate(23.536 -8.587) rotate(45)" class="closed-eye"/> <rect x="22" y="3.984" width="4" height="44" transform="translate(25.403 -9.36) rotate(45)" style="fill:#fff" class="closed-eye"/> </svg> </label> <input type="text" id="password" placeholder=" " autocomplete="off" autocapitalize="off" autocorrect="off" required pattern=".{6,}" class="ControlInput ControlInput--password" > <label for="password" class="Control-label Control-label--password" >Password</label> <div class="Control-requirements"> Must contain at least 6 characters. We did this for your own sake. </div> <button type="submit" class="Button Form-submit"> Login <svg width='26px' height='26px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="Button-spinner"> <rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect> <circle cx="50" cy="50" r="40" stroke="#fff" fill="none" stroke-width="18" stroke-linecap="round"></circle> <circle cx="50" cy="50" r="40" stroke="#e7542b" fill="none" stroke-width="9" stroke-linecap="round" class="spinner"></circle> </svg> </button> </div>
</form> <script src="js/index.js"></script>
</body>
</html>

Login Form CSS only validation - Script Codes CSS Codes

.Form { width: 100%; max-width: 400px; margin: auto;
}
.Form-title { color: #00386a; margin: 0 0 15px;
}
.Form-description { color: #6d6665;
}
.Form-fields { border-radius: 15px; border: 1px solid #c5c1c0; background-color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 24px 15px;
}
.Control-label { color: #423e3d; font-weight: bold; -webkit-transition: color 300ms ease; transition: color 300ms ease;
}
.Control-requirements { background: pink; border-top: none; margin: -14px 0 15px; max-height: 0; overflow: hidden; -webkit-transition: all 200ms ease; transition: all 200ms ease; padding: 0 9px;
}
.ControlInput { border-radius: 3px; box-shadow: 0 1px 3px rgba(197, 193, 192, 0) inset; color: #6d6665; margin: 0.8em 0; border: 1px solid #c5c1c0; padding: 0.6em 0.6em; -webkit-transition: box-shadow 300ms ease-out; transition: box-shadow 300ms ease-out;
}
.ControlInput:hover { box-shadow: 0 1px 3px #c5c1c0 inset;
}
.ControlInput:focus { outline: #2bbee7 auto 3px;
}
.ControlInput:invalid:not(:focus):not(:placeholder-shown) { border-color: red; border-bottom: none;
}
.ControlInput:invalid:not(:focus):not(:placeholder-shown) + .Control-label { color: red;
}
.ControlInput:invalid:not(:focus):not(:placeholder-shown) + .Control-label + .Control-requirements { max-height: 100px; padding: 9px; border: 1px solid red;
}
.ControlInput:valid:not(:focus):not(:placeholder-shown) { border-color: #5fa550;
}
.ControlInput:valid:not(:focus):not(:placeholder-shown) + .Control-label { color: #5fa550;
}
.Control-requirements--email,
.ControlInput--email { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1;
}
.Control-label--email { -webkit-box-ordinal-group: -1; -ms-flex-order: -2; order: -2;
}
.ControlInput--password { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; padding-right: 50px;
}
.Control-label--password { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; margin-bottom: -32px;
}
.Control-label--showPassword { width: 32px; position: relative; top: 52px; left: 100%; text-align: right; margin-left: -36px;
}
.Form-submit { border: 1px solid #e7542b; background-color: #e7542b; border-radius: 3px; color: #fff; display: block; width: 100%; max-width: 100%; pointer-events: none; opacity: 0.6; cursor: default; -webkit-transition: opacity 300ms ease-out, max-width 150ms ease-out; transition: opacity 300ms ease-out, max-width 150ms ease-out; outline: none; position: relative; margin: auto;
}
.Form-submit:hover { background-color: #c83d17;
}
.Form-submit:active { background-color: #9b2f11; max-width: 50px; overflow: hidden; text-indent: 300px;
}
.Form-submit:active .Button-spinner { opacity: 1;
}
.ControlInput--email:valid ~ .ControlInput--password:valid ~ .Form-submit { cursor: pointer; pointer-events: auto; opacity: 1;
}
.Button-spinner { position: absolute; top: 50%; left: 50%; margin-left: -13px; margin-top: -13px; opacity: 0;
}
.show-password { display: none;
}
.show-password:checked ~ .ControlInput--password { text-security: disc; -webkit-text-security: disc; -moz-text-security: disc;
}
.show-password:checked ~ .Control-label--showPassword .svg-toggle-password .closed-eye { opacity: 1; -webkit-transition: opacity 300ms ease, height 400ms ease; transition: opacity 300ms ease, height 400ms ease; width: 4px; height: 44px;
}
.svg-toggle-password { fill: #008ed6;
}
.svg-toggle-password .closed-eye { opacity: 0; height: 0;
}
.Button { padding: 10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.spinner { -webkit-animation: dash 2s linear infinite; animation: dash 2s linear infinite; -webkit-animation-direction: normal; animation-direction: normal;
}
@-webkit-keyframes dash { 0% { stroke-dashoffset: 0; stroke-dasharray: 150.6 100.4; } 50% { stroke-dasharray: 1 250; } 100% { stroke-dashoffset: 502; stroke-dasharray: 150.6 100.4; }
}
@keyframes dash { 0% { stroke-dashoffset: 0; stroke-dasharray: 150.6 100.4; } 50% { stroke-dasharray: 1 250; } 100% { stroke-dashoffset: 502; stroke-dasharray: 150.6 100.4; }
}
@-webkit-keyframes spinner-in { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes spinner-in { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; }
}
html { box-sizing: border-box; height: 100%;
}
body { background-color: #f1f2f1; background-image: -webkit-linear-gradient(#e7e8e7, #f1f2f1); background-image: linear-gradient(#e7e8e7, #f1f2f1); display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 100%;
}
*, *:before, *:after { box-sizing: inherit;
}

Login Form CSS only validation - Script Codes JS Codes

// CSS Only Concept.
// Please note I wouldn't call this "production" code use at your own risk.
//
// A few sibling selectors + checkbox hacks + a CSS property `text-security: disc;` I didn't previously know about
//
// Note the password secruit
//
//https://css-tricks.com/form-validation-ux-html-css/
Login Form CSS only validation - Script Codes
Login Form CSS only validation - Script Codes
Home Page Home
Developer James Nowland
Username jnowland
Uploaded October 31, 2022
Rating 4.5
Size 5,739 Kb
Views 20,240
Do you need developer help for Login Form CSS only validation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

James Nowland (jnowland) Script Codes
Name
Ad Folding without regions
Download Rebound
Three Heading Solutions
SVG Modified with Query String
CSS3 Stroke and Gradient Text
Step 3
Responsive Typography for dummies.
Pure CSS Spinner
A Pen by James Nowland
Lorem pixel Images
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!