Form Validation in JavaScript with Example
JavaScript Validation on Form Submit Button
In this blog post I will demonstrate how to validate html controls in asp.net web application. I will cover javascript email validation, mobile number validation, numeric only and alphabets only validation. Find the javascript code snippet below:-
 |
| html form validation on submit |
Defaul.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Javascript validate form value</title>
<script type="text/javascript">
// To validate input full name
function ValidateLettersWithSpaceOnly (evt)
{
evt = (evt) ? evt : event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
((evt.which) ? evt.which : 0));
if (charCode > 32 && (charCode < 65 || charCode > 90) &&
(charCode < 97 || charCode > 122)) {
return false;
}
return true;
}
// To validate copy/paste full name
function ValidateFullNamePaste (obj)
{
var totalCharacterCount = window.clipboardData.getData('Text');
var strValidChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz ";
var strChar;
var FilteredChars = "";
for (i = 0; i < totalCharacterCount.length; i++) {
strChar = totalCharacterCount.charAt(i);
if (strValidChars.indexOf(strChar) != -1) {
FilteredChars = FilteredChars + strChar;
}
}
obj.value = FilteredChars;
return false;
}
// To validate input user name
function ValidateUsernameOnly(evt)
{
evt = (evt) ? evt : event;
var characterCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode :
((evt.which) ? evt.which : 0));
if (characterCode > 31 && (characterCode < 65 || characterCode > 90) && (characterCode < 45 || characterCode > 46) &&
(characterCode < 97 || characterCode > 122) && (characterCode < 48 || characterCode > 57)) {
return false;
}
return true;
}
// To validate copy/paste user name
function ValidateUsernamePaste(obj)
{
var totalCharacterCount = window.clipboardData.getData('Text');
var strValidChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-.";
var strChar;
var FilteredChars = "";
for (i = 0; i < totalCharacterCount.length; i++) {
strChar = totalCharacterCount.charAt(i);
if (strValidChars.indexOf(strChar) != -1) {
FilteredChars = FilteredChars + strChar;
}
}
obj.value = FilteredChars;
return false;
}
// To validate input email id
function validateEmail(emailField)
{
emailField= document.getElementById("txtEmail").value;
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (reg.test(emailField) == false) {
alert('Invalid Email Address');
return false;
}
return true;
alert('Submitted sucessfully.');
}
// To validate input phone/mobile number
function ValidateNumberOnly(evt)
{
if ((evt.keyCode < 48 || evt.keyCode > 57))
{
return false;
}
}
// To validate copy/paste phone/mobile number
function ValidateNumberPaste(obj)
{
var totalCharacterCount = window.clipboardData.getData('Text');
var strValidChars = "0123456789";
var strChar;
var FilteredChars = "";
for (i = 0; i < totalCharacterCount.length; i++) {
strChar = totalCharacterCount.charAt(i);
if (strValidChars.indexOf(strChar) != -1) {
FilteredChars = FilteredChars + strChar;
}
}
obj.value = FilteredChars;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>
javascript onsubmit return</h1>
<br />
<div>
Full Name:<br />
<asp:TextBox ID="txtFullName" onkeypress="return ValidateLettersWithSpaceOnly(event);"
onPaste="return ValidateFullNamePaste(this);" MaxLength="50" runat="server">
</asp:TextBox>
<br />
<br />
User Name:<br />
<asp:TextBox ID="txtUsername" onkeypress="return ValidateUsernameOnly(event);" onPaste="return ValidateUsernamePaste(this);"
MaxLength="30" runat="server">
</asp:TextBox>
<br />
<br />
Mobile/Phone:<br />
<asp:TextBox ID="txtPhone" onkeypress="return ValidateNumberOnly(event);" onPaste="return ValidateNumberPaste(this);"
MaxLength="10" runat="server">
</asp:TextBox>
<br />
<br />
E-mail:<br />
<asp:TextBox ID="txtEmail" MaxLength="30" runat="server"></asp:TextBox>
<asp:Button ID="btnSave" Text="Register" runat="server" OnClientClick="validateEmail(this);" />
</div>
</form>
</body>
</html>
Form Validation in JavaScript with Example
Reviewed by Ravi Kumar
on
11:43 AM
Rating:
Reviewed by Ravi Kumar
on
11:43 AM
Rating:
No comments: