Skip to content

C
cs251_group31
Commit 6d108ed9 authored by SHESHANSH AGRAWAL's avatar SHESHANSH AGRAWAL
Browse files
Options

Adding Task B of Lab02

parent 34c14f0f
Show whitespace changes
Inline Side-by-side
Showing with 314 additions and 0 deletions
lab02_group31_outlab/Task B/form.html 0 → 100644
View file @ 6d108ed9
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Form Validation</title>
<script type="text/javascript" src="validation.js"></script>
</head>
<body id="wrapper">
<h1 align="center">Form Validation</h1><br>
<div class = "main_container" ><br><br><br>
<table style="margin-left:20px;">
<form id="frm" method="post" action="https://www.cse.iitb.ac.in/~sharat/php/example/form.php" >
<tr>
<td>
<label class="label" for="text">Name:</label>
</td>
<td>
<!-- The onblur and onfocus actions focus on the flyover concept of the form implementation -->
<input type="text" id="name" class="input_field" name="text" onblur="validate(this)" onfocus="unvalidate(this)">
</td>
</tr>
<tr>
<td></td>
<td>
<div id="nameerr" style="color:red"></div>
</td>
</tr>
<tr>
<td>
<label class="label" for="email">Email:</label>
</td>
<td>
<input type="text" id="email" name="email" class="input_field" onblur="validate(this)" onfocus="unvalidate(this)">
</td>
</tr>
<tr>
<td></td>
<td>
<div id="emailerr" style="color:red"></div>
</td>
</tr>
<tr>
<td>
<label class="label" for="password">Password:</label>
</td>
<td>
<input type="password" id="pass" name="pass" class="input_field" onblur="validate(this)" onfocus="unvalidate(this)"> </button>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="passerr" style="color:red"></div>
</td>
</tr>
<tr><td></td>
<!-- the onclick function focusses on the overall validation when submit button -->
<td><input type="button" class="button" value="Submit" onclick="validator()"></td>
</tr>
</form>
</table>
</div>
</body>
\ No newline at end of file
lab02_group31_outlab/Task B/style.css 0 → 100644
View file @ 6d108ed9
.input_field
{
width:300px;
margin-top:10px;
margin-bottom:10px;
}
.label
{
font-weight:bold;
margin-left: 10px;
}
.main_container{
width:700px;
height:330px;
background:#13A6AD;
box-shadow: 10px 10px 5px #888888;
border-radius: 10px;
margin: 0 auto;
}
input[type=text] {
width: 500px;
padding: 6px 6px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 5px;
}
input[type=password] {
width: 500px;
padding: 6px 6px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 5px;
}
.button
{
width:100px;
height:50px;
background:#196F3D;
font-size: 100%;
border:none;
border-radius: 5px;
margin-left: 100px;
cursor:pointer;
font-weight:bold;
-webkit-transition: font-size 2s;
transition: font-size 1s;
}
.button:hover
{
font-size: 110%;
opacity:0.8;
}
#emailerr,#nameerr,#passerr
{
font-weight:bold;
}
#wrapper
{
margin: 0px auto;
width:1000px;
}
lab02_group31_outlab/Task B/validation.js 0 → 100644
View file @ 6d108ed9
//the following function validates the fields on the press of submit button
function validator()
{
form = document.forms["frm"];
error = false; //the err value becomes true whenever atleast one error is found in a field and stops the submission process of the form
//checking the length range of name
for (var i = form.length - 2; i >= 0; i--) { //checks if there is any invalid data in each of the elements of the form
error = validate(form[i]) || error;
}
//if the error is encountered nowhere the encode function is called
if(!error)
{
encode();
}
}
//this function performs the task of replacing the '<' or '>' or "'" or '"' characters in the strings after that it submits the form
function encode()
{
form = document.forms["frm"];
name = form[0].value;
pass = form[2].value;
name = name.replace('>',"\&gt\;");
name = name.replace('<',"\&lt\;");
name = name.replace('"',"\&quot\;");
name = name.replace("'","\&#x27\;");
pass = pass.replace('"',"\&quot\;");
pass = pass.replace("'","\&#x27\;");
pass = pass.replace('>',"\&gt\;");
pass = pass.replace('<',"\&lt\;");
form[0].value = name;
form[2].value = pass;
document.getElementById('frm').submit();
}
//the following function is implementing the on the fly validation
//the argument x represents the field which calls the function
function validate(x) //returns true if there is an invalid data
{
name = x.id; //extracting the id of the calling input field
name = name+"err";//id of the div displaying the corresponding error
errbox = document.getElementById(name);
val = document.getElementById(x.id).value;
err = false; //keeps track if there is any invalid data
//validation when the calling input field is name
if(x.id == "name")
{
if(val.length>50||val.length<6)
{
document.getElementById('nameerr').innerHTML = "Length of name must be between 6 and 50";
err = true;
}
}
//validation when the calling input field is email
if(x.id == "email")
{
email = val;
if(email.search('@')==-1)
{
document.getElementById('emailerr').innerHTML = "Email must contain '@'";
err = true;
}
else
{
email1 = email.split("@");
domain = email1[1];
local = email1[0];
var x = /[a-zA-Z0-9._]/gi;
if(local == "" || domain == "")
{
document.getElementById('emailerr').innerHTML = "You cant leave local/domain part blank";
err = true;
}
else if(local.match(x).length != local.length)
{
document.getElementById('emailerr').innerHTML = "LocalAddress must be alphanumeric or can have '.' or '_'";
err = true;
}
else if(local.length<=2)
{
document.getElementById('emailerr').innerHTML = "LocalAddress must have atleast 3 letters";
err = true;
}
else if(domain.match(/[a-zA-Z.]/g).length != domain.length)
{
document.getElementById('emailerr').innerHTML = "DomainAddress Segments must be alphabetical";
err = true;
}
else if(domain.search('\\.')==-1)
{
document.getElementById('emailerr').innerHTML = "DomainAddress must contain atleast one '.'";
err = true;
}
else
{
domainarr = domain.split(".");
domain1 = domainarr[0];
if(domain1.length<3)
{
document.getElementById('emailerr').innerHTML = "First Domain Segment must be at least 3 characters long"
err = true;
}
var i ;
for(i in domainarr)
{
if(domainarr[i].length<2)
{
document.getElementById('emailerr').innerHTML = "DomainSegments must be at least 2 characters long";
err = true;
}
}
}
}
}
//validation when the calling input field is pass
if(x.id == "pass")
{
pass = val;
if(pass.length>20||pass.length<8)
{
document.getElementById('passerr').innerHTML = "Length of password must be between 8 and 50";
err = true;
}
else if(pass.search('!')==-1 && pass.search('@')==-1 && pass.search('\\$')==-1 && pass.search('_')==-1)
{
document.getElementById('passerr').innerHTML = "Password must contain atleast one character among(!,@,$,_)";
err = true;
}
}
return err;
}
//the following function ensures to remove the flashing errors if any of that field when the user focusses that field
function unvalidate(x)
{
name = x.id + "err";
document.getElementById(name).innerHTML = "";
}
\ No newline at end of file
lab02_group31_outlab/readme.txt 0 → 100644
View file @ 6d108ed9
Group Details:
Group Number: 31
Members:
Chitwan Saharia (150050011) (100%)
Sheshansh Agrawal (150050027) (100%)
Abhinav Goyal (150050108) (100%)
Honor Code:
I, Chitwan Saharia, pledge on my honour and religion that I have not given or received any unauthorized assistance which would be considered unethical and unacceptable on this assignment or any previous task.
I, Sheshansh Agrawal, pledge on my religion and patriotism that I have not given or received any unauthorized assistance which would be considered unethical and unacceptable on this assignment or any previous task.
I, Abhinav Goyal, pledge on my honour and patriotism that I have not given or received any unauthorized assistance which would be considered unethical and unacceptable on this assignment or any previous task.
Details:
Task A: We have used Bootstrap classes to implement the designs of the website.
Task B:We have used basic stylings in designing the layout of form.The javascript ensures the on
the fly validation along with the normal one.
Task C:The accordion has been implemented through basic javascript.The animation part of accordion
has also been implemented.Also on hovering over the names of the pokemons in evolution state one can see the popover of the pictures of corresponding pokemons.
Bonus:
We have attempted both the bonus tasks(i.e in Task B and in Task D)
Citations:
1.www.w3schools.com
2.https://inkscape.org/en/doc/basic/tutorial-basic.html
3.http://www.webdesignerforum.co.uk/topic/69933-how-to-create-a-simple-popover/
4.http://www1.iitb.ac.in/academic/downloadForms/
5.https://accounts.google.com/SignUp?service=mail&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ltmpl=default
6.https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet
Reflection:
1.We learnt to execute simple loop and conditional statements in javascript.
2.Designing web pages using Bootstrap.
3.Making excessive use of CSS and JavaScript to implement the interactivity of front end web pages.
4.Different types of events and actions on the html tags when we can call JavaScript Functions.
5.Basics of SVG in HTML.
6.PDF editing in Inkscape.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment