Skip to content

Instantly share code, notes, and snippets.

View bartcis's full-sized avatar

bartcis

3 followers · 1 following
View GitHub Profile
@bartcis
bartcis / form validation.html
Last active May 13, 2019 18:46
Full HTML markup for HTML+CSS only form validation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Maven+Pro:900|Overpass" rel="stylesheet">
<title>HTML + CSS From Validation</title>
@bartcis
bartcis / style.css
Created May 12, 2019 07:22
All CSS styles for HTML+CSS only form validation
body {
background: linear-gradient(125deg, #9683EE, #3F4FDA);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: #65449B;
}
button {
@bartcis
bartcis / validation.js
Created May 12, 2019 07:41
Pseudo code for form validation
formInput.addEventListener('focus', () => {
if (formInput.valid) {
// Validaton - value correct
} else {
// Validaton - value incorrect
}
});
submitButton.addEventListener('click', (event) => {
event.preventDefault();
@bartcis
bartcis / html_field.html
Last active May 12, 2019 09:51
Example form field to validate
<div class="form__field">
<input type="text" class="form__field__input" name="firstName" placeholder=" " pattern="[A-Za-z]{2,99}" required>
<label for="firstName" class="form__field__label">First Name</label>
<p class="form__field__error">Is your First Name correct?</p>
<div class="form__field__state-icon"></div>
</div>
@bartcis
bartcis / input.html
Last active May 12, 2019 09:52
Example input field in HTML
<input type="text" class="form__field__input" name="firstName" placeholder=" " pattern="[A-Za-z]{2,99}" required>
@bartcis
bartcis / css_combinators.css
Created May 12, 2019 09:00
Example CSS selector combinators
.form__field__input ~ .form__field__state-icon {
color: red;
}
.form__field__input + .form__field__label {
color: red;
}
@bartcis
bartcis / pseudoclass.css
Created May 12, 2019 09:07
CSS pseudo-classes and combinators
.form__field__input:focus + .form__field__label,
.form__field__input:valid + .form__field__label,
.form__field__input:invalid + .form__field__label {
top: -.5rem;
font-size: .6rem;
}
@bartcis
bartcis / placeholder.css
Last active May 12, 2019 10:00
Invaild status placeholde fix
// Zmodyfikowany styl
.form__field__input:invalid + .form__field__label {
top: -.5rem;
font-size: .6rem;
}
// Oryginalny styl - reset modyfikacji jeśli placeholder istnieje
.form__field__input:placeholder-shown + .form__field__label {
top: .35rem;
font-size: 1rem;
@bartcis
bartcis / specificity_calc.css
Created May 12, 2019 14:02
Sample calculation of Specificity
// 0-1-0 + 0-1-0 + 0-1-0 = 0-3-0
.form__field__input:placeholder-shown + .form__field__label {
color: red;
}
// 1-0-0 + 0-0-1 + 0-0-1 = 1-0-2
#wrapper ul li {
color: red;
}
@bartcis
bartcis / initial_styles.css
Created May 12, 2019 14:38
Initial styles for inputs
.old-input[type="text"],
.old-input[type="email"],
.old-input[type="number"] {
color: red;
}