JavaScript Data Validator Form Tutorial

35
0

JavaScript-Data-Validator-Form-Tutorial

Hello, Guys, I Hope You all of Fine, Today I have shared with you JavaScript Data Validator Form. We will use to HTML5, CSS3 and JavaScript after that We have been made a JavaScript Data Validation Form Easily with Beautiful Design. I have made complete it after that I have shared with you and understand with you step by step after that I hope you can learn it as well.

First of All, I have made a Simply Sign Up Form with the help of HTML5. I have published below Sign up form you can simply copy it and paste with the personal text editor.

JavaScript Data Validator Form

  • HTML5 Sign Up Form Simple (Paste with HTML5 File)

<table align=”center”><tr>
<td>First Name</td>
<td><input type=”text” placeholder=”First Name” id=”F_Name”</td>
<div id=”FN”></div>
</tr><tr>
<td>Last Name</td>
<td><input type=”text” placeholder=”Last Name” id=”L_Name”</td>
<div id=”LN”></div>
</tr><tr>
<td>Email</td>
<td><input type=”email” placeholder=”Email” id=”email”</td>
<div id=”E_Check”></div>
</tr><tr>
<td>Password</td>
<td><input type=”password” placeholder=”Password” id=”pass”</td>
<div id=”password”></div>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type=”password” placeholder=”Password” id=”c_pass”</td>
<div id=”c_password”></div>
</tr><tr><td><input type=”button” value=”Sign UP” id=”btn” onclick=”myfun()”></td>
</tr></table>

© WWW.OnlineITtuts.Com

After that, We Will using CSS3 and do it style with looking is beautiful. CSS3 Style Coad is Below, It is my design style if you want to change any color or font-size or any properties as you wish.

  • CSS3 Used with Sign Up Form Looking Beautiful. (Paste with CSS3 File)

 

body
{
background: #1db6e2;
}

table
{
font-family: Trebuchet MS;
font-size: 18px;
color: white;
}

#F_Name
{
width: 220px;
height: 30px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 02px;
border: none;
}
#L_Name
{
width: 220px;
height: 30px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 02px;
border: none;
}
#email
{
width: 220px;
height: 30px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 02px;
border: none;
}
#pass
{
width: 220px;
height: 30px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 02px;
border: none;
}

#c_pass
{
width: 220px;
height: 30px;
margin-top: 20px;
margin-bottom: 20px;
border-radius: 02px;
border: none;
}

#btn
{
margin-top: 50px;
width: 150px;
height: 30px;
border: none;
font-family: Trebuchet MS;
font-size: 20px;
}

#FN
{
color: red;
font-family: Trebuchet MS;
font-size: 14px;
}

#LN
{
color: red;
font-family: Trebuchet MS;
font-size: 14px;
}

#E_Check
{
color: red;
font-family: Trebuchet MS;
font-size: 14px;
}

#password
{
color: red;
font-family: Trebuchet MS;
font-size: 14px;
}

#c_password
{
color: red;
font-family: Trebuchet MS;
font-size: 14px;
}

© WWW.OnlineITtuts.Com

After Complete Two Steps Like HTML5 and CSS3 you are Completed Sign Up Form with Design. After That you can use JavaScript and Make Data Validator Form Easily. JavaScript Script is Below.

  • JavaScript Script Included as Script. Please Paste in JS File.

<script type=”text/javascript”>

function myfun()
{
var FirstName=document.getElementById(‘F_Name’).value;
var LastName=document.getElementById(‘L_Name’).value;
var Email=document.getElementById(’email’).value;
var password=document.getElementById(‘pass’).value;
var C_password=document.getElementById(‘c_pass’).value;

if(FirstName==””)
{

document.getElementById(‘FN’).innerHTML=”Please Enter Your FirstName”;

}

else if(FirstName!=””)

{

document.getElementById(‘FN’).innerHTML=””;

}
if(LastName==””)
{

document.getElementById(‘LN’).innerHTML=”Please Enter Your Last Name”;

}
else if(LastName!=””)

{

document.getElementById(‘LN’).innerHTML=””;

}
if(Email==””)
{

document.getElementById(‘E_Check’).innerHTML=”Please Enter Your Email”;

}

else if(Email!=””)

{

document.getElementById(‘E_Check’).innerHTML=””;

}

if(password==””)
{

document.getElementById(‘password’).innerHTML=”Please Enter Password”;

}

else if(password!=””)

{

document.getElementById(‘password’).innerHTML=””;

}
if(C_password==””)
{

document.getElementById(‘c_password’).innerHTML=”Please Enter Confirm Password”;

}

else if (password.length<6 || C_password.length<6)
{

alert(‘Password Must Use More Than 06 Characters’);
}
else if (password!=C_password)
{

alert(‘Password Does Not Match’);

}
else
{
alert(‘Well Come to ‘ + FirstName + ” ” + LastName);

}

if(password!=C_password)

{

document.getElementById(‘c_password’).innerHTML=””;

}

}
</script>

© WWW.OnlineITtuts.Com

After that you can simply copy Step by Step Script and Paste with Personal Editor. After that Your Can Use JavaScript Data Validator Form with Personal Websites as well. I have already tested it you can simply follow on my instructions. I hope you can understand as well, If you have any question / suggestion to comment me on below section I will reply with your answr about 24 hours. If you like my tutorial to share with personal friends and follow on my website Social Media Pages like Facebook, Google+ and Twitter for Post Updates

SHARE
Next articleStored Procedure SQL Server 2014 Tutorial
Asif Ali, is a Web Designer, Web Developer, SEO Expert, Graphics Designer, I am working Online Marketer working since last four years on the internet several successfully. You Contact on him.