Loading
View RSS Feed

rishab

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

Rate this Entry
Interface
1)Add participating College
Design a UI page / screen to capture the following details when adding a new participating college in NSEP system:
College name, city (should allow selecting from predefined list OR add if it is not present), SPOC person name and contact number, whether college is affiliated and the courses offered by that college (can be from the following 20 – Course1, Course2, ….., Course20).

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



HTML Code:

Code:
<html>

<title>NSEP Participating College details</title>
<script type="text/javascript" src="validatecol.js">
</script>


<body bgcolor="CCCCFF">

</br>


<h2 align="center"><u>INFORMATION FOR PARTICIPATING COLLEGE</u></h2> </br>
<marquee behavior="alternate" scrollamount="6" bgcolor="lightpink">******ADD PARTICIPATING COLLEGE DETAILS******</marquee>

<form name="f1">

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



<th colspan="2">Enter Participating College  Information</th>



<tr>

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

<td><input type="text" name="txtclg" /></td>

</tr>



<tr>

<td>City:</td>

<td><select name="cityloc">

<option value="city">----Enter city----</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>SPOC Name:<font color="red">*</font></td>

<td><input type="text" name="txtspoc"  /></td>

</tr>



<tr>

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

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

</tr>




<tr>

<td>College Affilitated:<font color="red">*</font></td>

<td>

<input type="radio" name="optyes" value="0"/>Yes

<input type="radio" name="optyes" value="1"/>No


</td>

</tr>



<tr>

<td>Courses offered:<font color="red">*</font></td>

<td><select name="courseopt" size="4"  multiple text-align="bottom" ;">
/*onblur="valList(this)*/

<option value="c1">Course1</option>

<option value="c2">Course2</option>

<option value="c3">Course3</option>

<option value="c4">Course4</option>

<option value="c5">Course5</option>

<option value="c6">Course6</option>

<option value="c7">Course7</option>

<option value="c8">Course8</option>

<option value="c9">Course9</option>

<option value="c10">Course10</option>

<option value="c11">Course11</option>

<option value="c12">Course12</option>

<option value="c13">Course13</option>

<option value="c14">Course14</option>

<option value="c15">Course15</option>

<option value="c16">Course16</option>

<option value="c17">Course17</option>

<option value="c18">Course18</option>

<option value="c19">Course19</option>

<option value="c20">Course20</option>


</select>
</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 PARTICIPATING COLLEGE DETAILS******</marquee>

</body>

</html>
Validation
1)Add participating College
Use the screen designed earlier for adding new college and incorporate the following:
On submitting the page / screen, ensure all mandatory fields have been filled in.
Perform other client side validations for fields (College, city and SPOC name cannot be greater than 20 characters, SPOC contact number will be exactly 10 digits, for affliated colleges, the minimum courses offered should be 10, whereas other colleges should offer minimum 5 courses)
Provide a Reset button to clear all the fields


JavaScript Code:

Code:
function validate()
{
    var cname=document.getElementById("txtclg").value;
    var sname=document.getElementById("txtspoc").value;
    var scon=document.getElementById("txtcon").value;
   
   if(mandatory(cname,sname,scon)==false)
        alert("All the mandatory fields should be filled...");
   else if(col_valid(cname)==false)
        alert("College name cannot be greater than 20...");   
   else if(spoc_valid(sname)==false)
        alert("SPOC name cannot be greater than 20...");    
   else if(no_valid(scon)==false)
        alert("SPOC Contact number should have exactly 10 digits...");
   else if(col_valid()==false)
        alert("For affliated colleges, the minimum courses offered should be 10 whereas other colleges should offer minimum 5 courses...");
   else
        alert("Registration successful...");
}
function mandatory(a,b,c)
{
   if(a.length==0 || b.length==0 || c.length==0)   
      return false;
   return true;
}
function col_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 col_valid()
{
     var a=document.f1.optyes[0].checked;
     var l=0;
     for (var i=0;i<document.f1.courseopt.length;i++)
    {  
         if(document.f1.courseopt.options[i].selected)
         l++;
    }
    if((a==true && l>=10) || (a==false && l>=5))
       return true; 
    else
       return false;
}

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