Loading
View RSS Feed

rishab

Case Study: Application User Interface and Validation in Web designing Part2

Rating: 4 votes, 5.00 average.
Interface Designing

1)Add a new Bank
Design a UI page / screen to capture the following details when adding a new bank in NSEP system:
Bank name, branch location (assume that NSEP supports only few pre-selected locations for bank), SPOC name, SPOC contact number, type of accounts supported by the bank (various type of accounts include – saving, current, fixed, recurring, etc.) and whether the bank is a nationalized bank or not.

The page should allow accepting input easily using keyboard as well.
Indicate mandatory fields on the page / screen.
[B]
HTML Code:
Code:
<html>

<head>
<title>NSEP Bank details</title>
<script type="text/javascript" src="validatebank.js">

</script>
</head>



<body bgcolor="lightblue">

<br/>

<h2 align="center"><u>INFORMATION FOR ADDING A BANK</u></h2> </br>

<marquee behavior="alternate" scrollamount="6" bgcolor="lightpink">******ADD THE BANK DETAILS******</marquee>

<form name="f1">

</br>
<table  align="center" border="2" bgcolor="lightgreen">



<th colspan="2">Enter Bank  Information</th>



<tr>

<td align="center">Bank Name:<font color="red">*</font></td>
<td><input type="text" id="txtbank"></td>

</tr>



<tr>

<td align="center">Branch Location:</td>

<td><select name="brloc">

<option value=" q">-----Enter Your Branch Location-----</option>

<option value="kol">KOLKATA</option>

<option value="hyb">HYDERABAD</option>

<option value="del">DELHI</option>

<option value="ba">BANGALORE</option>

<option value="ot">Others</option>

</select>

</td>

</tr>



<tr>

<td align="center">SPOC Name:<font color="red">*</font></td>

<td><input type="text" id="txtspoc" />
</tr>



<tr>

<td align="center">SPOC Contact No.:<font color="red">*</font></td>

<td><input type="text" id="txtcon"/>

</tr>



<tr>

<td align="center">Type Of Account:<font color="red">*</font></td>

<td>
<select name="accn" size="5" multiple>
<option value="sav">SAVING</option>

<option value="cur">CURRENT</option>

<option value="fix">FIXED</option>

<option value="re">RECURRING</option>

<option value="ot">Others</option>

</select>

</td>

</tr>



<tr>

<td align="center">Nationalized:<font color="red">*</font></td>

<td>
<input type="radio" name="rad" value="yes"/>Yes

<input type="radio" name="rad" value="no"/>No

</td>

</tr>


<tr>
<td></td>

<td>
<input type="submit" value="REGISTER" onClick="validate();"/>

<input type="reset" value="CANCEL"/>
</td>

</tr>


</table>

</form>

<center>

<i>(*)mark fields are mandatory to fill.</i>
</center>
</br>
<marquee behavior="alternate" scrollamount="6" bgcolor="lightpink">******ADD THE BANK DETAILS******</marquee>

</body>

</html>
Validation:
1)Add a new Bank
Use the screen designed earlier for new bank addition and incorporate the following:
On submitting the page / screen, ensure all mandatory fields have been filled in.
Perform other client side validations for fields (bank, branch and SPOC names cannot be greater than 20 characters, SPOC contact number should exactly have 10 digits, irrespective of whether a bank is nationalized or not, it should support at least one type of account. However, nationalized banks should minimum support 2 types of account.
Provide a Reset button to clear all the fields




JavaScript Code

Code:
function validate()
{ 
    var bname=document.getElementById("txtbank").value;
    var sname=document.getElementById("txtspoc").value;
    var s_contact=document.getElementById("txtcon").value;

   /* if(mandatory(bname,sname,s_contact) ==false)
       alert("All the mandatory fields should be filled...");
   else if(bank_valid(bname)==false)
       alert("Bank name cannot be greater than 20...");   
   else if(spoc_valid(sname)==false)
       alert("SPOC name cannot be greater than 20...");   
   else if(no_valid(s_contact)==false)
       alert("SPOC Contact number should have exactly 10 digits...");
   else */
  if(accn_valid()==false)
        alert("nationalized banks should minimum support 2 types of account & otherwise, it should support at least one type of account...");       
   else
       alert("Bank addition successful...");
}

function mandatory(a,b,c)
{

   if(a.length==0 || b.length==0 || c.length==0)   
      return false;
   return true;
}

function bank_valid(a)
{
   if(a.length>20)
      return false;
   return true;
}
function spoc_valid(a)
{
   if(a.length>20)
      return false;
   return true;
}
function no_valid(a)
{
   var reg=/\d{10}/;
   if(!reg.test(a))
      return false;
   return true;
}
function accn_valid()
{
     var a=document.f1.rad[0].checked;
     var l=0;
     for (var i=0;i<document.f1.accn.length;i++)
    {  
         if(document.f1.accn.options[i].selected)
         l++;
    }
    if((a==true && l>=2) || (a==false && l>=1))
       return true; 
    else
       return false;
}

Submit "Case Study: Application User Interface and Validation in Web designing Part2" to Digg Submit "Case Study: Application User Interface and Validation in Web designing Part2" to del.icio.us Submit "Case Study: Application User Interface and Validation in Web designing Part2" to StumbleUpon Submit "Case Study: Application User Interface and Validation in Web designing Part2" to Google

Categories
Web Design

Comments




Disclaimer: Users of techforum4u.com are responsible for ensuring that any material they post (article, blog posts, images or other mulitimedia content) does not violate or infringe upon the copyright, patent, trademark, or any personal or proprietary rights of any third party, and is posted with the permission of the owner of such rights.Anyone who violates these rules may have their access privileges removed without warning.