Animated form validation

Developer
Kittons
Size
3,760 Kb
Views
18,216
  1. Animated form validation Previews
  2. Animated form validation HTML Codes
  3. Animated form validation CSS Codes
  4. Animated form validation JS Codes

How do I make an animated form validation?

Using animations exported from after effects I did an animated version of the google login form. It simulates an email validation: regardless of what you input it will display the invalid animation. . What is a animated form validation? How do you make a animated form validation? This script and codes were developed by Kittons on 18 November 2022, Friday.

Animated form validation Previews
IQ Test

Animated form validation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>animated form validation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"> <div class="logo"></div>
</div>
<h1>One Account. All of Google.</h1>
<h2>Sign in to continue to Gmail</h2>
<div class="formContainer"> <div id="main_bg"></div> <div id="main"></div> <div id="wrong"></div>
</div> <script src='https://labs.nearpod.com/bodymovin/demo/login/bodymovin.js'></script>
<script src='https://labs.nearpod.com/bodymovin/demo/login/all.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated form validation - Script Codes CSS Codes

@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'), url(//fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
input,
div { box-sizing: border-box;
}
input[type="text"]{ width : 273px; height : 43px; padding : 0 7px; font-size : 16px; border : none; background-color : transparent;
}
body { background-color: #fff; margin: 0px; height: 100%; overflow: auto; font-size: 0;
}
button { border: none; outline: none; padding: 0; width : 273px; height : 35px; cursor : pointer;
}
#main,
#wrong,
#main_bg { position: absolute; top: 0; left: 0; right: 0; width: 360px; height: 600px; display: block; overflow: hidden; transform: translate3d(0, 0, 0); margin: auto; opacity: 1;
}
#main_bg { z-index: 1;
}
#main { z-index: 2;
}
#wrong { z-index: 3;
}
h1 { font-family: 'Open Sans', arial; -webkit-font-smoothing: antialiased; color: #555; font-size: 42px; font-weight: 300; margin-top: 0; margin-bottom: 20px; text-align: center;
}
h2 { font-family: 'Open Sans', arial; -webkit-font-smoothing: antialiased; color: #555; font-size: 18px; font-weight: 400; margin-bottom: 20px; text-align: center;
}
.formContainer { position: relative;
}
.header { height: 108px; width: 100%; text-align: center; overflow: hidden;
}
.header .logo { background-image: url(https://ssl.gstatic.com/images/branding/googlelogo/1x/googlelogo_color_112x36dp.png); background-size: 112px 36px; background-repeat: no-repeat; float: none; margin: 40px auto 30px; display: block; height: 38px; width: 116px;
}

Animated form validation - Script Codes JS Codes

var mainElem = document.getElementById('main'), main_bgElem = document.getElementById('main_bg'), wrongElem = document.getElementById('wrong');
var inputElem;
var mainAnim, mainBgAnim, buttonAnim, wrongAnim;
wrongElem.style.display = 'none';
mainAnim = loadAnimation(mainElem, 'html', false, false, mainAnim_data);
mainBgAnim = loadAnimation(main_bgElem, 'svg', false, false, mainBg_data);
replaceInputElem();
function loadAnimation(container, renderer, autoplay, loop, data) { var animData = { container: container, renderer: renderer, autoplay: autoplay, loop: loop, animationData: data }; return bodymovin.loadAnimation(animData);
}
function doGetCaretPosition(oField) { var iCaretPos = 0; if (document.selection) { oField.focus(); var oSel = document.selection.createRange(); oSel.moveStart('character', -oField.value.length); iCaretPos = oSel.text.length; } else if (oField.selectionStart || oField.selectionStart == '0') iCaretPos = oField.selectionStart; return iCaretPos;
}
function replaceInputElem() { var lastValue; function inputKeyDown(ev) { var text = inputElem.value; if (lastValue === text) { if (ev.keyCode === 13) { loadWrongAnimation(); } return; } lastValue = text; var pos = doGetCaretPosition(inputElem); var atPos = text.lastIndexOf('@'); if (atPos >= pos || atPos === -1) { mainBgAnim.playSegments([0, 5], true); } else { mainBgAnim.playSegments([6, 15], true); } } var elem = document.getElementById('inputPlaceholder'); elem.innerHTML = ''; inputElem = document.createElement('input'); inputElem.setAttribute('type', 'text'); inputElem.onkeyup = inputKeyDown; elem.appendChild(inputElem); loadButtonAnim();
}
function wrongComplete() { wrongElem.style.display = 'none'; mainElem.style.display = 'block'; main_bgElem.style.display = 'block'; mainAnim.goToAndStop(0); mainAnim.play();
}
function loadWrongAnimation() { if (wrongAnim) { wrongAnim.removeEventListener('complete', wrongComplete); wrongAnim.destroy(); } var wrongDataInstance = JSON.parse(JSON.stringify(wrongData)); wrongDataInstance.assets[0].layers[0].t.d.t = inputElem.value || ' '; var wrongInstanceData = { container: wrongElem, renderer: 'svg', loop: false, autoplay: true, animationData: wrongDataInstance } wrongElem.style.display = 'block'; mainElem.style.display = 'none'; main_bgElem.style.display = 'none'; wrongAnim = bodymovin.loadAnimation(wrongInstanceData); wrongAnim.addEventListener('complete', wrongComplete);
}
function loadButtonAnim() { var elem = document.getElementById('blue_bt'); elem.innerHTML = ''; var button = document.createElement('button'); button.style.backgroundColor = 'transparent'; elem.appendChild(button); function buttonOut(ev) { if (!checkIfChild(ev.target, button)) { buttonAnim.setDirection(-1); buttonAnim.play(); document.removeEventListener('mouseover', buttonOut); button.addEventListener('mouseover', buttonOver); } } function buttonOver() { buttonAnim.setDirection(1); buttonAnim.play(); setTimeout(function() { document.addEventListener('mouseover', buttonOut); }, 0); button.removeEventListener('mouseover', buttonOver); } buttonAnim = loadAnimation(button, 'svg', false, false, buttonAnimData); buttonAnim.addEventListener('elementsReady', function() { mainAnim.play(); button.addEventListener('mouseover', buttonOver); button.addEventListener('click', loadWrongAnimation); });
}
function checkIfChild(elem, parent) { while (elem.parentNode) { if (elem.parentNode === parent) { return true; } elem = elem.parentNode; } return false;
}
Animated form validation - Script Codes
Animated form validation - Script Codes
Home Page Home
Developer Kittons
Username airnan
Uploaded November 18, 2022
Rating 4
Size 3,760 Kb
Views 18,216
Do you need developer help for Animated form 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!

Kittons (airnan) Script Codes
Name
Behind the Grunt
Murally
An animated year
Curved warp
A christmas loop in svg
HTML codepen banner
Shapes recolored
Tribute to white stripes
Adventure Interactive Time in 2.75D
Movin bodymovin
Create amazing Facebook ads 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!