if (at<0)
{
alert("Not a valid e-mail")
document.forms[0].action="tryjs_email.htm"
}
}
</script>
</head>
<body>
<form onsubmit="validate()" action="tryjs_rightpage.htm">
<input type="text" name="email" size="30">
<input type="submit" value="Validate">
</form>
</body>
</html>
2.Value Validation
How you can validate an input-field with max values.
Coding
<html>
<head>
<script language="JavaScript">
function validate()
{
txt=document.forms[0].field.value
if (txt>5||txt<0)
{
alert("Must be between 0 and 5")
document.forms[0].action="tryjs_value.htm"
}
}
</script>
</head>
<body>
<form onsubmit="validate()" action="tryjs_rightpage.htm">
Enter a value from 0 to 5:
<input type="text" name="field" size="10">
<input type="submit" value="Validate">
</form>
</body>
</html>
3. Length Validation
How you can validate number of letters in an input-field.
Coding
<html>
<head>
<script language="JavaScript">
function validate()
{
input=document.forms[0].field.value
if (input.length>5)
{
alert("Do not insert more than 5 letters")
document.forms[0].action="tryjs_lengthvalidate.htm"
}
}
</script>
</head>
<body>
<form onsubmit="validate()" action="tryjs_rightpage.htm">
<input type="text" name="field" size="20">
<input type="submit" value="Validate">
</form>
</body>
</html>
4.Form Validation
A form containing all of the validation above.
Coding
<html>
<head>
<script language="JavaScript">
function validate()
{
at=document.forms[0].email.value.indexOf("@")
val=document.forms[0].val.value
firstname=document.forms[0].firstname.value
if (at<0)
{
alert("Not a valid e-mail")
var right="false"
}
if (val>5)
{
alert("Your code must be between 0 and 5")
var right="false"
}
if (firstname.length>10)
{
alert("Your name must be less than 10 letters")
var right="false"
}
if (right=="false")
{
document.forms[0].action="tryjs_formvalidate.htm"
}
}
</script>
</head>
<body>
<form onsubmit="validate()" action="tryjs_rightpage.htm">
Enter your e-mail:
<input type="text" name="email" size="30">
<br>
Enter your code, value from 0 to 5:
<input type="text" name="val" size="10">
<br>
Enter your first name, 10 letters:
<input type="text" name="firstname" size="20">
<input type="submit" value="Validate">
</form>
</body>
</html>
5.Focu
How to set focus on a input field.
Coding
<html>
<head>
<script language="JavaScript">
function setfocus()
{
document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="field" size="30">
<input type="button" value="Get Focus" onclick="setfocus()">
</form>
</body>
</html>
6. Selected
How to make the content in an input field selected.
Coding
<html>
<head>
<script language="JavaScript">
function setfocus()
{
document.forms[0].field.select()
document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
<input type="text" name="field" size="30" value="input text">
<input type="button" value="Selected" onclick="setfocus()">
</form>
</body>
</html>
7. Radiobutton
How the client can select options from radio buttons.
Coding
<html>
<head>
<script language="JavaScript">
function check()
{
browser=document.forms[0].browser
answer=document.forms[0].answer
for (i = 0; i<browser.length; ++ i)
{
if (browser[i].checked)
{
answer.value=browser[i].value
}
}
}
</script>
</head>
<body>
<form>
Which browser is your favorite<br>
<input type="radio"
name="browser" onclick="check()"
value="Explorer">Microsoft Internet Explorer<br>
<input type="radio"
name="browser" onclick="check()"
value="Netscape">Netscape Navigator<br>
<input type="text" name="answer">
</form>
</body>
</html>
8.Checkbox
How the client can select options from checkboxes.
Coding
<html>
<head>
<script language="JavaScript">
function check()
{
coffee=document.forms[0].coffee
answer=document.forms[0].answer
txt=""
for (i = 0; i<coffee.length; ++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}
}
answer.value=txt
}
</script>
</head>
<body>
<form>
How do you like your coffee<br>
<input type="checkbox"
name="coffee" value="cream">With cream<br>
<input type="checkbox"
name="coffee" value="sugar">With sugar<br>
<input type="text" name="answer">
<input type="button" name="test" onclick="check()"
value="Order">
</form>
</body>
</html>
9. Select from a dropdown list box
How the client can select options from a drop down list
Coding
<html>
<head>
<script language="JavaScript">
function put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=option
document.forms[0].favorite.value=txt
}
</script>
</head>
<body>
<form>
My favorite browser is:
<input type="text" name="favorite">
<br><br><br>
<select name="dropdown" onchange="put()">
<option>--Select your favourite--
<option>Internet Explorer
<option>Netscape Navigator
</select>
</form>
</body>
</html>
10. Select more than one options
How the client can select many options from a drop down list.
Coding
<html>
<head>
<script language="JavaScript">
function put()
{
option=document.forms[0].dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=document.forms[0].number.value
txt=txt + option
document.forms[0].number.value=txt
}
</script>
</head>
<body>
<form>
Select numbers:<br>
<select name="dropdown">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>0
</select>
<input type="button" onclick="put()" value="-->"> <input
type="text" name="number">
</form>
</body>
</html>