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. How to create Animated User Registration From with Validation using HTML, CSS and JavaScript
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:


Progrramer Tutoials : Animated User Registration From with Validation Design
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.

Progrramer Tutoials: Animated_User_Registration_Form_Required_Field


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.

Progrramer Tutoials: Animated_User_Registration_Form_Mouse_Pointer


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

progrramers-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

6 comments:

  1. 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 !

    ReplyDelete
  2. I 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

    ReplyDelete
  3. Seedboxes additionally prove to be useful when your ISP is impacting your P2P traffic, offering a choice to outfox your ISP.
    Dan Seedbox

    ReplyDelete
  4. Nice blog here! after reading, i decide to buy a sleeping bag ASAP ny web design firms

    ReplyDelete
  5. I have been checking out many of your posts and it’s nice stuff. I will surely bookmark your site branding agency sf

    ReplyDelete
  6. I 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