Wednesday 18 October 2017

NIIT HTML Q2 ACTIVITY BOOK CHAPTER 5 ADDING CONSTRAINTS ~ niit post

Question 2:  after creating the online registration form,you need to incorporate the following constraints on the form element:


Ans:-
<!DOCTYPE HTML>
<html>
<head><link type="text/css" rel="stylesheet" href="external stylesheet/homestylesheet.css"/>
<script>
function checkNum()
{
if(!form1.number.value.match</^[0-9]+$/) && form1.number.value !="")
    {
form1.number.value="";
form1.number.focus();
alert"please enter only number in text");
    }
}
function checkRoll()
{
if (!form1.roll.value.match(/^[0-9]+$) && form1.roll.value !="")
   {
from1.roll.value="";
from1.roll.focus();
alert("please enter only alphabets in text");
   }
}
function checkFirstName()
{
if (!form1.usrname.value.match(/^[0-9]+$) && form1.usrname.value !="")
   {
from1.usrname.value="";
from1.usrname.focus();
alert("please enter only alphabets in text");
   }
}
function checkLastName()
{
if (!form1.usrname1.value.match(/^[0-9]+$) && form1.usrname1.value !="")
   {
from1.usrname1.value="";
from1.usrname1.focus();
alert("please enter only alphabets in text");
   }
}
fucnktion check()
{
if((document.form1.usrname.value!="")&&(document.form1.usrname1.value!="")&&(document.form1.mail.value!="")&&(document.form1.roll.value!="")(document.form1.number.value!="")&&(document.form1.sel.value!="andro"))
{
alert("your detail has been saved.\nplease submit the course fee at the cash counter before 13-04-2013 and collect your id card.\nthe training will start on 23-04-2013 from 10:30am to 4:30pm.");
}
else if((document.form1.usrname.value!="")&&(document.form1.usrname1.value!="")&&(document.form1.mail.value!="")&&(document.form1.roll.value!="")(document.form1.number.value!="")&&(document.form1.sel.value!="java"))
{
alert("your detail has been saved.\nplease submit the course fee at the cash counter before 20-03-2013 and collect your id card.\nthe java training will start on 30-04-2013 from 10:30am to 4:30pm.");
}
else if((document.form1.usrname.value!="")&&(document.form1.usrname1.value!="")&&(document.form1.mail.value!="")&&(document.form1.roll.value!="")(document.form1.number.value!="")&&(document.form1.sel.value!="C"))
{
alert("your detail has been saved.\nplease submit the course fee at the cash counter before 20-04-2013 and collect your id card.\nthe Robotics training will start on 30-04-2013 from 10:30am to 4:30pm.");
}
else if((document.form1.usrname.value!="")&&(document.form1.usrname1.value!="")&&(document.form1.mail.value!="")&&(document.form1.roll.value!="")(document.form1.number.value!="")&&(document.form1.sel.value!="hack"))
{
alert("your detail has been saved.\nplease submit the course fee at the cash counter before 13-05-2013 and collect your id card.\n  training will start on 31-04-2013 from 10:30am to 4:30pm.");
}
}
</script>
<style>
button{
border:2px solid navy;
background:white;
height:40px;
width:120px;
border-radius:5px;
background-color:navy;
color:white;
}
h1{
text-color:navy;
padding-left:80px;
text-align:center;
}
td{
font-size:20px;
width:400px;
padding:5px;
}
form{
border:5px solid red;
}
h1{
color:#C71585;
}
table{
margin-right:400px;
margin-left:400px;
}
</style>
</head>
<body>
<form name="form1" onsubmit="check();">
<h1>Registration Online</h1>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="usrname" placeholder="enter your first name" onkeyup="checkFirstName();"required></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="usrname1" placeholder="enter your last name" onkeyup="checkLastName();"required></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type="text" title="email" id="mail" placeholder="enter your email address" pattern="[^@]+@[a-zA-Z]+\.[a-zA-Z]{2,6}"required></td>
</tr>
<tr>
<td>Roll Number</td>
<td><input type="text" id="roll" placeholder="enter your roll number" onkeyup="checkRoll();"required></td>
</tr
<td>Training Program</td>
<td><select id="sel">
<option value="movie">Select Training </option>
<option value="andro">Android </option>
<option value="java">Java </option>
<option value="C">Robotics </option>
<option value="hack">Ethical Hacking </option>
</select></td>
</tr>
<tr>
<td>Contact Number</td>
<td><input type="num" id="number" onkeyup="checkRoll();" placeholder="enter your contact number" required></td>
</tr>
<tr><td>
<Button type="submit">Submit<Button></td>
<td><BUTTON type="reset">Reset</BUTTON></td>
</tr>
</table>
</form>
</body>
</html>

No comments:

Post a Comment