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 / 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 / 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 / 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 / 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 / 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 / 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>