Lab No.2 Javascript Forms and Validation HTML Code

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<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>


<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>
<br> Grade <br>



<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>


<br> Confirm Mobile Number <br>

<input type="number" id="mobile2" name="confirm mobile number" oninput="remobile_oninput()"
onclick="renumber_onclick()" onblur="renumber_onblur()">
<br> Address <br>
<br> Applied For <br>
<br> Why You Choose this feild <br>

<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>

<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>

<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>
<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()
{
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()
{
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()
{
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()
{
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()
{
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()
{
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()
{
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()
{
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 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 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()
{
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()
{
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:

Lab No.2 Javascript Forms and Validation HTML Code

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab No.2 Javascript Forms and Validation HTML Code

Uploaded by

Copyright:

Available Formats

LAB NO.

<br> Last Name <br>

<br> Confirm Mobile Number <br>

<br> E-mail <br>

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

/end first name validation/

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

/last name validation end /

/end username validation/

/mobiel number validation/

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

/end mobile number validation/

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

/* end re enter mobile number validation*/

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

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

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

/password validaion start/

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

You might also like