<html>
<head>
<title>Test JavaScript Form Validation</title>
<style>
.red
{
color:red;
}
</style>
<body>
<h2>Test JavaScript Form Validation</h2>
<script language="JavaScript">
function validate()
{
var val = f1.name.value;
var isValid = val.match(/^[0-9a-zA-Z]+$/);
if (!isValid)
{
alert("pls enter alphabet and digit");
}
}
</script>
</head>
<form id="f1">
<table>
<tr>
<td>Name<span class="red">*</span></td>
<td><input type="text" id="name" name="name"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="SEND" id="submit" onClick="validate();"/>
<input type="reset" value="CLEAR" id="reset"/></td>
</tr>
</table>
</form>
</body>
</html>
Category Archives: Java Script
Only Digit and Alphabet Validation in JavaScript
Only Digit Validation in JavaScript
<html>
<head>
<title>Test JavaScript Form Validation</title>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<h2>Test JavaScript Form Validation</h2>
<script language="JavaScript">
function validate()
{
var val = f1.name.value;
var isValid = (val.search(/^[0-9]+$/) !== -1);
if (!isValid)
{
alert("pls enter digits");
}
}
</script>
<form id="f1">
<table>
<tr>
<td>Phone No :<span class="red">*</span></td>
<td><input type="text" id="name" name="phone"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="SEND" id="submit" onClick="validate();"/>
<input type="reset" value="CLEAR" id="reset"/></td>
</tr>
</table>
</form>
</body>
</html>
Only Alphabet Validation in JavaScript
<html>
<head>
<title>Test JavaScript Form Validation</title>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<h2>Test JavaScript Form Validation</h2>
<script language="JavaScript">
function validate()
{
var val = f1.name.value;
var isValid = val.match(/^[a-zA-Z]+$/);
if (!isValid)
{
alert("pls enter alphabet");
}
}
</script>
<form id="f1">
<table>
<tr>
<td>Name<span class="red">*</span></td>
<td><input type="text" id="name" name="name"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="SEND" id="submit" onClick="validate();"/>
<input type="reset" value="CLEAR" id="reset"/></td>
</tr>
</table>
</form>
</body>
</html>
Min and Max Length Validation in JavaScript
<html>
<head>
<title>Test JavaScript Form Validation</title>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<h2>Test JavaScript Form Validation</h2>
<script language="JavaScript">
function validate()
{
var val = f1.name.value.trim();
var isValid = (val.length >= 6) && (val.length <= 10);
if (!isValid)
{
alert("length between 6 to 10");
}
}
</script>
<form id="f1">
<table>
<tr>
<td>Name<span class="red">*</span></td>
<td><input type="text" id="name" name="name"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="SEND" id="submit" onClick="validate();"/>
<input type="reset" value="CLEAR" id="reset"/></td>
</tr>
</table>
</form>
</body>
</html>
Fixed Length validation in JavaScript
<html>
<head>
<title>Test JavaScript Form Validation</title>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<h2>Test JavaScript Form Validation</h2>
<script language="JavaScript">
function validate()
{
var val = f1.name.value.trim();
var isValid = (val.length == 10);
if (!isValid)
{
alert("Mobile Number must be of length 10");
}
}
</script>
<form id="f1">
<table>
<tr>
<td>Contact Number<span class="red">*</span></td>
<td><input type="text" id="name" name="name"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="SEND" id="submit" onClick="validate();"/>
<input type="reset" value="CLEAR" id="reset"/></td>
</tr>
</table>
</form>
</body>
</html>
Empty Field Validation in JavaScript
<html>
<head>
<title>Test JavaScript Form Validation</title>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<h2>Test JavaScript Form Validation</h2>
<form id="f1" >
<table>
<tr>
<!-- A <span> element used to color a part of a text. -->
<td>Name<span style="color:red">*</span></td>
<td><input type="text" id="name" name="name"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="SEND" id="submit" onclick="validate()"/>
<input type="reset" value="CLEAR" id="reset"/></td>
</tr>
</table>
</form>
<script language="JavaScript">
function validate()
{
var val = f1.name.value;
if (val.trim().length==0)
{
alert("Empty Field");
}
}
</script>
</body>
</html>
Email Validation in JavaScript
<html>
<head>
<title>Test JavaScript Form Validation</title>
<style>
.red
{
color:red;
}
</style>
</head>
<body>
<h2>Test JavaScript Form Validation</h2>
<script language="JavaScript">
function validate()
{
var val = f1.name.value.trim();
var atPos = val.indexOf("@");
var dotPos = val.lastIndexOf(".");
var isValid = (atPos > 0) && (dotPos > atPos + 1) && (val.length > dotPos + 2);
if (!isValid)
{
alert("Please, enter valid email address");
}
}
</script>
<form id="f1">
<table>
<tr>
<td>Email Address<span class="red">*</span></td>
<td><input type="text" id="name" name="name"/></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="SEND" id="submit" onClick="validate();"/>
<input type="reset" value="CLEAR" id="reset"/>
</td>
</tr>
</table>
</form>
</body>
</html>
TextArea in JavaScript
<html>
<head>
<script>
function clearContents(x)
{
x.value='';
}
</script>
</head>
<body>
<textarea onfocus="clearContents(this);" placeholder="Please enter the address" >default value</textarea>
</body>
</html>
onclick event of radio button in JavaScript
<html>
<head>
<title>JavaScript Radio button onclick Example</title>
<script type="text/javascript">
function MyAlert()
{
if (document.forms[0].radio1[0].checked == true)
{
alert ( "You have selected " +
document.forms[0].radio1[0].value );
}
if(document.forms[0].radio1[1].checked == true )
{
alert ( "You have selected " + document.forms[0].radio1[1].value );
}
}
</script>
</head>
<body>
<form name="Form1" >
<input type="radio" name="radio1" onclick = "MyAlert()" value="Apple" />Apple <br>
<input type="radio" name="radio1" onclick = "MyAlert()" value="Orange" />Orange
</form>
</body>
</html>
onclick event of Checkbox in JavaScript
<html>
<body>
<input type="checkbox" onclick="fun1(this)" value="mca"> Checkbox
<input type="checkbox" onclick="fun1(this)" value="mca4" checked> MCA
<script>
function fun1(x)
{
alert("Checkbox clicked "+x.checked +
" Value = " + x.value);
}
</script>
</body>
</html>
Web Technology & Application Development – 2640002 