Scribd
Upload
46 views9 pages

Lab No.2 Javascript Forms and Validation HTML Code

This document contains HTML, CSS, and JavaScript code for a registration form with validation. The form collects personal information like name, phone number, email, and password. JavaScript functions validate the input and display error messages. On successful validation, check icons are shown. The code includes functions for validating individual fields like name, phone number, email and password on input and blur events.

Uploaded by

Aisha Anwar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 views9 pages

Lab No.2 Javascript Forms and Validation HTML Code

This document contains HTML, CSS, and JavaScript code for a registration form with validation. The form collects personal information like name, phone number, email, and password. JavaScript functions validate the input and display error messages. On successful validation, check icons are shown. The code includes functions for validating individual fields like name, phone number, email and password on input and blur events.

Uploaded by

Aisha Anwar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

LAB NO.

2
JavaScript Forms and Validation
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta lang="en-Us">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/style.css">
<link rel="stylesheet" href="style/animate.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
<script type="text/javascript" src="script/script.js"></script>
<title>
LAB2 javascript
</title>
</head>
<body>

<fieldset>
<legend> SSUET Registration form </legend>

<form>
<!--First name coding start here-->
First Name<br>
<input type="text" id="fname" name="firstname" oninput="fname_oninput()" onblur="fname_onblur()"

onclick="fn_onclick();ln_onclick()">
<i class="fa fa-spinner fa-spin" id="fn_spin"></i> <i class="fa fa-check" id="fn_check"> </i>
<!--first name coding end here -->
<!--last name coding start here -->

<br> Last Name <br>


<input type="text" id="lname" name="lastname" onclick="ln_onclick()"
oninput="lname_oninput();user_oninput()" onblur="lname_onblur()">
<i class="fa fa-spinner fa-spin" id="ln_spin"></i> <i class="fa fa-check" id="ln_check"> </i>
<br> College <br>
<input type="text" id="lname" name="lastname" onclick="ln_onclick()"
oninput="lname_oninput();user_oninput()" onblur="lname_onblur()">
<i class="fa fa-spinner fa-spin" id="ln_spin"></i> <i class="fa fa-check" id="ln_check"> </i>
<br> Grade <br>
<input type="text" id="lname" name="lastname" onclick="ln_onclick()"
oninput="lname_oninput();user_oninput()" onblur="lname_onblur()">
<i class="fa fa-spinner fa-spin" id="ln_spin"></i> <i class="fa fa-check" id="ln_check"> </i>

<!--last name coding end here -->


<!--mobile number start here -->
<br> Mobile Number <br>
<input type="number" id="mobile1" name="mobile number"
onclick="renumber_onclick();number_onclick()" oninput=" number_oninput()" onblur="number_onblur()">
<i class="fa fa-spinner fa-spin" id="m1_spin"></i> <i class="fa fa-check" id="m1_check"> </i>
<!--mobile number end here -->
<!--re mobile start here -->

<br> Confirm Mobile Number <br>


<input type="number" id="mobile2" name="confirm mobile number" oninput="remobile_oninput()"
onclick="renumber_onclick()" onblur="renumber_onblur()">
<i class="fa fa-spinner fa-spin" id="m2_spin"></i> <i class="fa fa-check" id="m2_check"> </i>
<br> Address <br>
<input type="number" id="mobile2" name="confirm mobile number" oninput="remobile_oninput()"
onclick="renumber_onclick()" onblur="renumber_onblur()">
<i class="fa fa-spinner fa-spin" id="m2_spin"></i> <i class="fa fa-check" id="m2_check"> </i>
<br> Applied For <br>
<input type="number" id="mobile2" name="confirm mobile number" oninput="remobile_oninput()"
onclick="renumber_onclick()" onblur="renumber_onblur()">
<i class="fa fa-spinner fa-spin" id="m2_spin"></i> <i class="fa fa-check" id="m2_check"> </i>
<br> Why You Choose this feild <br>
<input type="number" id="mobile2" name="confirm mobile number" oninput="remobile_oninput()"
onclick="renumber_onclick()" onblur="renumber_onblur()">
<i class="fa fa-spinner fa-spin" id="m2_spin"></i> <i class="fa fa-check" id="m2_check"> </i>
<!--re mobile end here here -->

<br> E-mail <br>


<input type="email" id="email" name="email" onclick="email_onclick()" oninput="email_oninput()"
onblur="email_unblur()">
<i class="fa fa-spinner fa-spin" id="em_spin"></i> <i class="fa fa-check" id="em_check"> </i>
<p id="emp" style="color: red; padding: 0;margin: 0;display: none; ">Enter only gmail and yahoomail </p>
<!--username coding start here-->
<br> Username <br>
<input type="text" id="username" name="username" disabled>

<i class="fa fa-spinner fa-spin" id="ur_spin"></i> <i class="fa fa-check" id="ur_check"> </i>
<!--username coding end here -->
<br> Password <br>
<input type="password" id="password" name="password" oninput="pass_oniput()"
onblur="pass_unblur()" onclick="pass_onclick()">
<i class="fa fa-spinner fa-spin" id="pd_spin"></i> <i class="fa fa-check" id="pd_check"> </i>
<p id="pass-dis" style="color: red; padding: 0;margin: 0; display: none;">enter minimun 6 digit password ,
first latter sholud be uppercase ,<br>enter alteast one lowercase , number and symbol </p>
<br> Why SSUET <br>
<input type="number" id="mobile2" name="confirm mobile number" oninput="remobile_oninput()"
onclick="renumber_onclick()" onblur="renumber_onblur()">
<i class="fa fa-spinner fa-spin" id="m2_spin"></i> <i class="fa fa-check" id="m2_check"> </i>
<br> <br>
<input type="submit" id="submit" value="SignUp">
</form>
</fieldset>
</body>
</html>
CSS CODE:
#m1_spin{
font-size:30px;
position: absolute;
color:blue;
display: none;
}
#m2_check{
font-size: 30px;
position: absolute;
color: green;
display: none;
}
#m2_spin{
font-size:30px;
position: absolute;
color:blue;
display: none;
}
#em_check{
font-size: 30px;
position: absolute;
color: green;
display: none;
}
#em_spin{
font-size:30px;
position: absolute;
color:blue;
display: none;
}
#ur_check{
font-size: 30px;
position: absolute;
color: green;
display: none;
}
#ur_spin{
font-size:30px;
position: absolute;
color:blue;
display: none;
}
#pd_check{
font-size: 30px;
position: absolute;
color: green;
display: none;
}
#pd_spin{
font-size:30px;
position: absolute;
color:blue;
display: none;
}
#submit{
width: 200px;
height: 40px;
background: skyblue;
border: none;
color: white;
font-size: 22px;
font-family:calibri;
letter-spacing: 1px;
}

JS CODE:
/*firstname validation*/
function fname_oninput()
{
var fname = document.getElementById("fname").value;
var input = document.getElementById("fname");
var spin = document.getElementById("fn_spin");
var check = document.getElementById("fn_check");
var spinur = document.getElementById("ur_spin") ;

var a = fname == "" ? fname : spin.style.display="inline" ;


var a = fname == "" ? fname : spinur.style.display="inline" ;
var b = fname.match(/[0-9]/i) ? window.alert("do not enter number") :spin.style.display="inline" ;
var c = fname.length>4 ? check.style.display="inline" : check.style.display="none";
fname.length<4 ? spin.display="inline" : spin.style.display="none";
fname.length>10 ? window.alert("your name is too long please enter short name " ) : fname;

}
function fname_onblur()
{
var fname = document.getElementById("fname").value;
var input = document.getElementById("fname");
fname=="" ? input.setAttribute("placeholder"," Enter your name first ") : fname;
fname=="" ? input.style.border="2px solid red" : fname ;
fname=="" ? input.style.color="red" : fname ;
fname=="" ? input.setAttribute("class"," animated infinite bounce" ): fname ;

}
function fn_onclick()
{
var fname = document.getElementById("fname").value;
var input = document.getElementById("fname");
fname=="" ? input.value="" : fname ;
fname=="" ? input.style.border="1px solid skyblue": fname ;
fname=="" ? input.style.color="black" : fname ;
fname=="" ? input.setAttribute("class"," "): fname ;
}

/*end first name validation*/


/*last name validation*/
function lname_oninput()
{
var lname = document.getElementById("lname").value;
var input = document.getElementById("lname");
var spin = document.getElementById("ln_spin");
var check = document.getElementById("ln_check");

var a = lname == "" ? lname : spin.style.display="inline" ;


var b = lname.match(/[0-9]/i) ? window.alert("do not enter number") :spin.style.display="inline" ;
var c = lname.length>4 ? check.style.display="inline" : check.style.display="none";
lname.length<4 ? spin.display="inline" : spin.style.display="none";
lname.length>10 ? window.alert("your name is too long please enter short name " ) : lname;

}
function lname_onblur()
{
var lname = document.getElementById("lname").value;
var input = document.getElementById("lname");
lname=="" ? input.setAttribute("placeholder"," Enter your name first ") : lname;
lname=="" ? input.style.border="2px solid red" : lname ;
lname=="" ? input.style.color="red" : lname ;
lname=="" ? input.setAttribute("class"," animated infinite bounce" ): lname ;

function ln_onclick()
{
var lname = document.getElementById("lname").value;
var input = document.getElementById("lname");
lname=="" ? input.value="" : lname ;
lname=="" ? input.style.border="2px solid skyblue": lname ;
lname=="" ? input.style.color="black" : lname ;
lname=="" ? input.setAttribute("class"," "): lname ;
}

/*last name validation end */


/*username validation*/
function user_oninput()
{
var a = document.getElementById("fname").value;
var b = document.getElementById("lname").value;
var check = document.getElementById("ur_check");
var user = document.getElementById("username");
var spinur = document.getElementById("ur_spin") ;

var c = user.setAttribute("value",a+b);
user.setAttribute("disabled" ,"disabled") ;
b=="" ? b : check.style.display="inline";
b=="" ? spinur.style.display="inline" :spinur.style.display="none";

/*end username validation*/

/*mobiel number validation*/


function number_oninput()
{
var num = document.getElementById("mobile1").value;
var input = document.getElementById("mobile1") ;
var check = document.getElementById("m1_check");
var spin = document.getElementById("m1_spin") ;

var a = num=="" ? num : spin.style.display="inline" ;


var b = num.length<10 ? spin.style.display="inline" : a;
num.length>10 ? spin.style.display="none" : a;
var c = num.length>10 ? window.alert("enter only 10 digit number" ) : a;
num.length==10? check.style.display="inline" : check.style.display="none" ;
num.length==10? spin.style.display="none" : check.style.display="none" ;
}
function number_onblur()
{
var num = document.getElementById("mobile1").value;
var input = document.getElementById("mobile1") ;
num=="" ? input.style.border="2px solid red" : num ;
num=="" ? input.setAttribute("placeholder","please enter your number") : num;
num=""? input.style.color="red" : num;
num=="" ? input.setAttribute("class"," animated infinite bounce" ) : num;

}
function number_onclick()
{
var num = document.getElementById("mobile1").value;
var input = document.getElementById("mobile1") ;
num=="" ? input.style.border="2px solid skyblue" : num ;
num=="" ? input.setAttribute("placeholder","") : num;
num=""? input.style.color="black" : num;
num=="" ? input.setAttribute("class"," " ) : num;

/*end mobile number validation*/


/*re enter mobile number validation*/
function remobile_oninput()
{

var num1 = document.getElementById("mobile1").value;


var num2 = document.getElementById("mobile2").value;
var check = document.getElementById("m2_check");
var spin = document.getElementById("m2_spin");
var a = num1==num2 ? check.style.display="inline" : check.style.display="none";
var d = num1==num2 ? spin.style.display="none": spin.style.display="inline" ;
var c = num2.length>10 ? window.alert("enter only 10 digit number" ) : d;

}
function renumber_onblur()
{
var num = document.getElementById("mobile2").value;
var input = document.getElementById("mobile2") ;
num=="" ? input.style.border="2px solid red" : num ;
num=="" ? input.setAttribute("placeholder","please re enter your number") : num;
num=""? input.style.color="red" : num;
num=="" ? input.setAttribute("class"," animated infinite bounce" ) : num;

function renumber_onclick()
{
var num = document.getElementById("mobile2").value;
var input = document.getElementById("mobile2") ;
num=="" ? input.style.border="2px solid skyblue" : num ;
num=="" ? input.setAttribute("placeholder","") : num;
num=""? input.style.color="black" : num;
num=="" ? input.setAttribute("class"," ") : num;

/* end re enter mobile number validation*/


/*password validaion start*/

function pass_oniput()
{

var value = document.getElementById("password").value;


var check = document.getElementById("pd_check");
var spin = document.getElementById("pd_spin");
var passd = document.getElementById("pass-dis");

var a = value =="" ? value : spin.style.display="inline";


var b = value.charAt(0).match(/[A-Z]/g) ? value : b ;
var c = b.match(/[a-z]/g) ? value : c ;
var d = c.match(/[0-9]/g) ? value : d ;
var e = d.match(/[@|#|$|%|%|*|+|]/g) ? value : e ;

e.length>6 ? spin.style.display="none" : spin.style.display="inline";


e.length>6 ? check.style.display="inline" : spin.style.display="none";
e.length>6 ? passd.style.display="none" : passd.style.display="inline";

}
function pass_unblur()
{
var value = document.getElementById("password").value;
var input = document.getElementById("password");
value=="" ? input.style.border="2px solid red" : value ;
value=="" ? input.setAttribute("placeholder","please re enter your password") :value;
value=""? input.style.color="red" :value ;
value=="" ? input.setAttribute("class"," animated infinite bounce" ) :value ;

}
function pass_onclick()
{
var value = document.getElementById("password").value;
var input = document.getElementById("password");
value=="" ? input.style.border="2px solid skyblue" : value ;
value=="" ? input.setAttribute("placeholder","") :value;
value=""? input.style.color="black" :value ;
value=="" ? input.setAttribute("class"," " ) :value ;
var passd = document.getElementById("pass-dis");
passd.style.display="block";

/*password validaion start*/


/*email validation start here*/

function email_oninput()
{

var value = document.getElementById("email").value;


var input = document.getElementById("email");
var spin = document.getElementById("em_spin");
var check = document.getElementById("em_check");
var emp = document.getElementById("emp") ;
var a = value=="" ? value : spin.style.display="inline" ;
var b = value.match("gmail.com") || value.match("yahoomail.com") ? value : b ;
var c = b.length>14 ? spin.style.display="none" : spin.style.display="inline" ;
b.length>14 ? check.style.display="inline" : check.style.display="none" ;
b.length>14 ? emp.style.display="none" : emp.style.display="block" ;

}
function email_unblur()
{
var value = document.getElementById("email").value;
var input = document.getElementById("email");
value=="" ? input.style.border="2px solid red" : value ;
value=="" ? input.setAttribute("placeholder","please enter your email") :value;
value=""? input.style.color="red" :value ;
value=="" ? input.setAttribute("class"," animated infinite bounce" ) :value ;

}
function email_onclick()
{
var value = document.getElementById("email").value;
var input = document.getElementById("email");
value=="" ? input.style.border="2px solid skyblue" : value ;
value=="" ? input.setAttribute("placeholder","") :value;
value=""? input.style.color="black" :value ;
value=="" ? input.setAttribute("class"," " ) :value ;
var emp = document.getElementById("emp");
emp.style.display="block";
}
/*email validation end here */

OUTPUT:

You might also like