Hello World! I am here once again with continuation of my previous post ‘How to Create Animated Registration Form Using HTML, CSS & JavaScript’. In previous post we have see an Animated User Registration Form which was built using HTML, CSS & JavaScript.
If you have not read yet please click this link to go through:
This form was basically designed for beginners but now it’s gonna be little tricky with few complex JavaScript codes. I would suggest observing the codes very carefully and if there is any issue with the concept please feel free to ask me by writing your problems in to the comments.
Okey in this article we will create same User Registration Form more advance and able to restrict invalid or empty value entry from user side. But before we go ahead first we must understood the importance of Restriction of invalid entry from client side.
Generally restriction of invalid entry through any kind of form is known as ‘Validation’ or ‘Form input validation’. Validation is a process that checks and controls the form input data. For example say you have a registration form where visitor/user feed first name, last name, email and password to create their account on you website. If you want that every user must feed their email address and password in proper manner then they must go through a validation process which checks and returns that submitted data is correct and well structured or not.
If you want to check our live example please clicks the below link.
Be careful: Client side validation is just like a guide for the user/visitors. Client side validation only filters the input data as you want but it can be manipulated by the experts. You must validate the inputs with server side validation process also. Server validation post will uploaded soon be with us and let’s move to logical explanation of this registration form.
The logic working behind this Registration Form is little complex. Every adjacent label of text input field which has required attribute get added ‘**’ on ending of word as suffix by invoking function ‘addph()’ on load.
Whenever user focus on the input fields then myfocus() function will fired on ‘onfocus event’ and the adjacent label will float upside but when user loose the focus from input field JavaScript function ‘myblur()’ will be fired on ‘onblur event’ and the function will check whether the input field has required attribute or not. If it has required attribute then it will throw the animated error ‘This is required field’ else the label move back to its previous position.
When user once again focus on same field error will be disappeared by re-calling myfocus() function.
Whenever user type something the input field then mytxt() function will be call on ‘onkeyup event’ and it will show a clear text button on the right side of the same text input field. If user want to delete the input users do not have press delete or backspace key for long time, he just need to click clear text button and text field will be empty.
Here are the HTML codes. Copy and paste into your favorite editor and save as index.html file.
These are the CSS codes which will stylize you HTML tags on browser. Copy and paste into the head tags of index.html file that you recently created. Save it like show in the image.
At last but the most important one, the JavaScript. Copy and paste the JavaScript code in the script tags located at bottom part of index.html file. Save it like show in the image.
Save and run the index.html file into your favorite browser. What you are observing please write in to the comment section we will wait for your comments. You can also ask for custom code snippets.
Follow our blog by registering you email on our blog, trust us we will never spam you, also like us on our Facebook page.
Next post will elaborate how to work with regular expression and error handlers to prevent the unwanted entry on the same form which we have created today. Thanks for joining us have nice day.
If you have not read yet please click this link to go through:
 |
| How to create Animated User Registration From with Validation using HTML, CSS and JavaScript |
This form was basically designed for beginners but now it’s gonna be little tricky with few complex JavaScript codes. I would suggest observing the codes very carefully and if there is any issue with the concept please feel free to ask me by writing your problems in to the comments.
Okey in this article we will create same User Registration Form more advance and able to restrict invalid or empty value entry from user side. But before we go ahead first we must understood the importance of Restriction of invalid entry from client side.
Generally restriction of invalid entry through any kind of form is known as ‘Validation’ or ‘Form input validation’. Validation is a process that checks and controls the form input data. For example say you have a registration form where visitor/user feed first name, last name, email and password to create their account on you website. If you want that every user must feed their email address and password in proper manner then they must go through a validation process which checks and returns that submitted data is correct and well structured or not.
If you want to check our live example please clicks the below link.
Be careful: Client side validation is just like a guide for the user/visitors. Client side validation only filters the input data as you want but it can be manipulated by the experts. You must validate the inputs with server side validation process also. Server validation post will uploaded soon be with us and let’s move to logical explanation of this registration form.
Logical Explanation
The logic working behind this Registration Form is little complex. Every adjacent label of text input field which has required attribute get added ‘**’ on ending of word as suffix by invoking function ‘addph()’ on load.
Whenever user focus on the input fields then myfocus() function will fired on ‘onfocus event’ and the adjacent label will float upside but when user loose the focus from input field JavaScript function ‘myblur()’ will be fired on ‘onblur event’ and the function will check whether the input field has required attribute or not. If it has required attribute then it will throw the animated error ‘This is required field’ else the label move back to its previous position.
When user once again focus on same field error will be disappeared by re-calling myfocus() function.
Whenever user type something the input field then mytxt() function will be call on ‘onkeyup event’ and it will show a clear text button on the right side of the same text input field. If user want to delete the input users do not have press delete or backspace key for long time, he just need to click clear text button and text field will be empty.
Here are the HTML codes. Copy and paste into your favorite editor and save as index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content ="HTML, CSS, JaavScript, Animated Registration Forms">
<meta name="description" content ="How to create Animated Registration Form Using HTML, CSS & JaavScript">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<title>Animated User Registration Form with Validation - Progrramers Tutorials</title>
<style>
//CSS Code goes here
</style>
</head>
<body>
<h1>Sign Up Form</h1>
<div class="container">
<div class="myform">
<div class="mylogo">
<i class="fas fa-user"></i>
</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="text" placeholder="User Name" class="txt_input" required></div>
<span class="cleartxt"><i class="fas fa-window-close"></i></span>
<span class="errortxt"></span>
</div>
</div>
<div class="myform">
<div class="mylogo">
<i class="fas fa-envelope"></i>
</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="email" placeholder="Email" class="txt_input" required></div>
<span class="cleartxt"><i class="fas fa-window-close"></i></span>
<span class="errortxt"></span>
</div>
</div>
<div class="myform">
<div class="mylogo">
<i class="fas fa-key"></i>
</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="password" placeholder="Password" class="txt_input" required></div>
<span class="cleartxt"><i class="fas fa-window-close"></i></span>
<span class="errortxt"></span>
</div>
</div>
<div class="myform">
<div class="mylogo">
<i class="fas fa-check"></i>
</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="password" placeholder="Confirm Password" class="txt_input" required></div>
<span class="cleartxt"><i class="fas fa-window-close"></i></span>
<span class="errortxt"></span>
</div>
</div>
<div class="myform">
<div class="mylogo">
<i class="fas fa-globe"></i>
</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="url" placeholder="Website" class="txt_input"></div>
<span class="cleartxt"><i class="fas fa-window-close"></i></span>
<span class="errortxt"></span>
</div>
</div>
<div class="myform">
<div class="mylogo">
</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="button" value="Save" class="txt_button"></div>
</div>
</div>
</div>
<script>
//JavaScipt code goes here
</script>
</body>
</html>
These are the CSS codes which will stylize you HTML tags on browser. Copy and paste into the head tags of index.html file that you recently created. Save it like show in the image.
*{box-sizing: border-box}
body{background: #244e63;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}/*Change the color of body*/
h1{text-align: center;color:#FFF;}
.myform{height:48px;display: flex;margin:20px;}
.mylogo{width:48px;font-size:24px;display: flex;flex-direction:column;justify-content:flex-end;text-align: center;color:#FFF;}/*--Change the color of logo--*/
.myinput{width:calc(100% - 50px);position: relative;}
.mylabel{position: absolute;left: 0;right: 0;top: 0;bottom: 0;font-size:14px;transition:all 0.3s;color:#edff47} /*--Change the color and transition of label --*/
.mytext{position: absolute;left: 0;bottom: 0;right:4px}
.txt_input{width: 100%;height:25px;outline: none;border: none;border-bottom: 1px solid #aaa;background: transparent;font-size: 16px;color:#FFF}
.txt_trans{font-size:16px;padding-top:22px;color:#999} /*--Change the landing color after transition of label --*/
.txt_button{background:#0099FF;padding:10px 30px;outline:none;border:none;border-radius:5px;color:#fff;font-size:18px;transition:all 0.4s}
.txt_button:hover{background:#ff9900;color:#212121}
/*Error Part*/
.errortxt{position: absolute;bottom: -16px;left:250px;font-size:14px;color: #ff9900;transition:all 0.2s;visibility: hidden;}
.cleartxt{position: absolute;bottom:0;right:250px;color: #ff9900; font-size:14px;cursor: pointer;transition:all 0.2s;visibility: hidden;}
.showcleartxt{visibility: visible !important;right:10px;}
.showerrortxt{visibility: visible !important;left:0px;}
At last but the most important one, the JavaScript. Copy and paste the JavaScript code in the script tags located at bottom part of index.html file. Save it like show in the image.
var _ = function($){return document.querySelectorAll($)};
const elem = _(".txt_input");
window.onload = function(){
addph(elem);
}
//add placehoder function
var addph = function(e){
for(var i=0;i<e.length;i++){
e[i].parentNode.parentNode.querySelector(".mylabel").innerHTML = e[i].getAttribute("placeholder");
e[i].setAttribute("placeholder", "");
if(e[i].hasAttribute("required")==true){
e[i].parentNode.parentNode.querySelector(".mylabel").innerHTML += " **";
}
}
}
//for loop start
for(var i=0;i<elem.length;i++){
elem[i].onfocus = function(){
myfocus(this)
}
elem[i].onblur = function(){
myblur(this);
}
/*script for clear text button*/
elem[i].onkeyup = function(){
mytxt(this);
}
}
//for loop end
//for loop start
/*script for clear text button*/
for(var i=0;i<_(".cleartxt").length;i++){
_(".cleartxt")[i].onclick = function(){
cleartxt(this);
}
}
//for loop end
//myfocus function
var myfocus = function(e){
e.parentNode.parentNode.querySelector(".mylabel").classList.remove("txt_trans");
e.parentNode.parentNode.querySelector(".errortxt").classList.remove("showerrortxt");
e.parentNode.parentNode.querySelector(".errortxt").innerHTML = "";
}
//myblur function
var myblur = function(e){
if(e.hasAttribute("required")==false){
if(e.value === ""){
e.parentNode.parentNode.querySelector(".mylabel").classList.add("txt_trans");
}
}else{
if(e.value === ""){
e.parentNode.parentNode.querySelector(".errortxt").classList.add("showerrortxt");
e.parentNode.parentNode.querySelector(".errortxt").innerHTML = "This is required field";
}
}
}
var mytxt = function(e){
var cleartxt = e.parentNode.parentNode.querySelector(".cleartxt");
if(e.value == "" || e.value == null || e.value == undefined){
cleartxt.classList.remove("showcleartxt");
}else{
cleartxt.classList.add("showcleartxt");
}
}
var cleartxt = function(e){
var txt_input = e.parentNode.querySelector(".txt_input");
txt_input.value = "";
txt_input.focus();
e.classList.remove("showcleartxt");
}
_(".txt_button")[0].onclick = function(){
alert("You have click save button");
}
Save and run the index.html file into your favorite browser. What you are observing please write in to the comment section we will wait for your comments. You can also ask for custom code snippets.
Follow our blog by registering you email on our blog, trust us we will never spam you, also like us on our Facebook page.
Next post will elaborate how to work with regular expression and error handlers to prevent the unwanted entry on the same form which we have created today. Thanks for joining us have nice day.
Related Topics
Hello World! This my new post How To Create Animated User Registration From With Validation Using HTML, CSS And JavaScript, If you face any problem while checking this codes please let me know I here with you as much as in. Soon we will be meeting on YouTube channel of Progrrmers . Thanks and see you !
ReplyDeleteI was reading through some of your content on this internet site and I believe this site is really instructive! Keep putting up. new york website design company
ReplyDeleteSeedboxes additionally prove to be useful when your ISP is impacting your P2P traffic, offering a choice to outfox your ISP.
ReplyDeleteDan Seedbox
Nice blog here! after reading, i decide to buy a sleeping bag ASAP ny web design firms
ReplyDeleteI have been checking out many of your posts and it’s nice stuff. I will surely bookmark your site branding agency sf
ReplyDeleteI dont think Ive scan anything like this before. So good to find somebody with some original thoughts on this subject. thank for starting this up. This website is something that is needed on the web, someone with a little originality. Good job for bringing something new to the internet! branding agency san francisco
ReplyDelete