Loading
View RSS Feed

rishab

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

Rate this Entry
Interface
1)Register Member
Design a UI page / screen to capture the following details when registering a new member in NSEP system:
Member name, gender, address, contact number, college, current year of graduation, committed amount, bank name and student account number

The page should allow accepting input easily using keyboard as well.
Indicate mandatory fields on the page / screen.



HTML File:
Code:
<html>
<head>
<title>
member registration in NSEP     
</title>
<script type="text/javascript" src="validatereg.js">

</script>
</head> 
 
<body bgcolor="ccccff"></br>
<h2><center><u>REGISTER MEMBER</u></h1><br/>
<form action="">
<table  align="center" border="2" bgcolor="lightgreen">

<th colspan="2"> Enter Member Details</th>


<tr>
<td>Member Name<font color="red">*</font>:</td>
<td><input type="text" id="urname"/></td>
</tr>

<tr>
<td>Gender:</td>
<td><input type="radio" name="gndr" value="male">Male</br>
    <input type="radio" name="gndr" value="female">Female</td>

</tr>

<tr>
<td>Address<font color="red">*</font> :</td>
<td><textarea row=5 cols=10 id="addr"></textarea></td>
</tr>

<tr>
<td>Contact no<font color="red">*</font> :</td>

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

<tr>
<td>College:</td>
<td><input type="text" id="urcol"/></td>
</tr>

<tr>
<td>Current Year of Graduation<font color="red">*</font> :</td>
<td><input type="text" id="yeargrad"/></td>

</tr>

<tr>
<td>Committed amount<font color="red">*</font> :</td>
<td><input type="text" id="com_amt"/></td>
<tr>

<tr>
<td>Bank Name<font color="red">*</font> :</td>

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

<tr>
<td>Student account no<font color="red">*</font>:</td>
<td><input type="text" id="accname"/></td>
</tr>

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

</table>
</br>

<center> <em>(*)mark fields are mandatory to fill</em>
 </center>
         


    </form>
  </body>	
</html>


Validation

1)Register Member
Use the screen designed earlier for member registration and incorporate the following:
On submitting the page / screen, ensure all mandatory fields have been filled in.
Perform other client side validations for fields (member and bank name cannot be greater than 20 characters, address should have minimum 20 characters, contact number should exactly have 10 digits, current year of graduation can be either of 1, 2 or 3, committed amount should be >= 1000 and in multiples of 1000 and bank number will be exactly 12 digits)
Provide a Reset button to clear all the fields



Validation (JavaScript File):
Code:
function validate()
{

   var name=document.getElementById("urname").value;
   var address=document.getElementById("addr").value;
   var contactno=document.getElementById("urmob").value;
   var college=document.getElementById("urcol").value;
   var gradyr=document.getElementById("yeargrad").value;
   var comamt=document.getElementById("com_amt").value;
   var bank=document.getElementById("bankname").value;
   var accn=document.getElementById("accname").value;

  if(mandatory(name,address,contactno,gradyr,comamt,bank,accn)==false)
      alert("All the mandatory fields should be filled...");
  else if(mem_valid(name)==false)
      alert("Member name cannot be greater than 20...");   
   else if(add_valid(address)==false)
      alert("Address should have minimum 20 characters...");   
   else if(no_valid(contactno)==false)
      alert("Contact number should have exactly 10 digits...");
   else if(gradyr_valid(gradyr)==false)
      alert("Current year of graduation can be either of 1,2 or 3...");
   else if(comamt_valid(comamt)==false)
      alert("Committed amount should be >= 1000 and multiples of 1000...");
   else if(bank_valid(bank)==false)
      alert("Bank name cannot be greater than 20...");   
  else if(accn_valid(accn)==false)
      alert("Bank number will be exactly 20 digits...");  
   else
      alert("Registration successful...");
}

function mandatory(a,b,c,d,e,f,g)
{
   if(a.length==0 || b.length==0 || c.length==0 || d.length==0 || e.length==0 || f.length==0 || g.length==0)   
      return false;
   return true;
}

function mem_valid(a)
{
   if(a.length>20)
      return false;
   return true;
}
function add_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 gradyr_valid(a)
{
   if(a=="1" || a=="2" || a=="3")
      return true;
   return false;
}
function comamt_valid(a)
{
   if(a>=1000 && a%1000==0)
     return true;
   return false;
}
function bank_valid(a)
{
   if(a.length>20)
      return false;
   return true;
}
function accn_valid(a)
{
   var reg=/\d{20}/;
   if(!reg.test(a))
      return false;
   return true;
}

Submit "Case Study: Application User Interface and Validation in Web designing Part1" to Digg Submit "Case Study: Application User Interface and Validation in Web designing Part1" to del.icio.us Submit "Case Study: Application User Interface and Validation in Web designing Part1" to StumbleUpon Submit "Case Study: Application User Interface and Validation in Web designing Part1" 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.