HTML form validation using REGEX
|
Table of Contents |
REGEX stands for Regular Expression. A regular expression is an object that describes a pattern of characters.
Regular expressions are used to perform pattern-matching and "search-and-replace" functions on text.
Syntax
var patt=new RegExp(pattern,modifiers);
or more simply:
var patt=/pattern/modifiers;
Modifiers
Modifiers are used to perform case-insensitive and global searches:
|
Modifier |
Description |
|
Perform case-insensitive matching | |
|
Perform a global match (find all matches rather than stopping after the first match) | |
|
m |
Perform multiline matching |
Brackets
Brackets are used to find a range of characters:
|
Expression |
Description |
|
Find any character between the brackets | |
|
Find any character not between the brackets | |
|
[0-9] |
Find any digit from 0 to 9 |
|
[A-Z] |
Find any character from uppercase A to uppercase Z |
|
[a-z] |
Find any character from lowercase a to lowercase z |
|
[A-z] |
Find any character from uppercase A to lowercase z |
|
[adgk] |
Find any character in the given set |
|
[^adgk] |
Find any character outside the given set |
|
(red|blue|green) |
Find any of the alternatives specified |
Metacharacters
Metacharacters are characters with a special meaning:
|
Metacharacter |
Description |
|
Find a single character, except newline or line terminator | |
|
Find a word character | |
|
Find a non-word character | |
|
Find a digit | |
|
Find a non-digit character | |
|
Find a whitespace character | |
|
Find a non-whitespace character | |
|
Find a match at the beginning/end of a word | |
|
Find a match not at the beginning/end of a word | |
|
\0 |
Find a NUL character |
|
Find a new line character | |
|
\f |
Find a form feed character |
|
\r |
Find a carriage return character |
|
\t |
Find a tab character |
|
\v |
Find a vertical tab character |
|
Find the character specified by an octal number xxx | |
|
Find the character specified by a hexadecimal number dd | |
|
Find the Unicode character specified by a hexadecimal number xxxx |
Quantifiers
|
Quantifier |
Description |
|
Matches any string that contains at least one n | |
|
Matches any string that contains zero or more occurrences of n | |
|
Matches any string that contains zero or one occurrences of n | |
|
Matches any string that contains a sequence of X n's | |
|
Matches any string that contains a sequence of X to Y n's | |
|
Matches any string that contains a sequence of at least X n's | |
|
Matches any string with n at the end of it | |
|
Matches any string with n at the beginning of it | |
|
Matches any string that is followed by a specific string n | |
|
Matches any string that is not followed by a specific string n |
RegExp Object Methods
|
Method |
Description |
|
Compiles a regular expression | |
|
Tests for a match in a string. Returns the first match | |
|
Tests for a match in a string. Returns true or false |
|
|
Definition:
The test() method tests for a match in a string.This method returns true if it finds a match, otherwise it returns false.
Syntax
RegEx.test(string);
Example
Do a global search, and test for "Hello" and "W3Schools" in a string:
<script type="text/javascript">
var str="Hello world!";
//look for "Hello"
var patt=/Hello/g; //perform global search for Hello
var result=patt.test(str);
document.write("Returned value: " + result);
</script>
The output of the code above will be:
Returned value: true
|
|
Following example guides you how to perform validation using Regular Expression object in javascript.
in this example I have created three files,
form_valid.html - contains html code for form design.
style.css - contains basic style property for the form.
validation.js - This is the file in which I have performed all validation code
In this example I have performed following validation:
- empty field validation
- range validation
- numaric field validation
- email validation
Note: all validation is being performed on submit event.
form_valid.html
<html>
<head>
<title>validation</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
<script src="validation.js" type="text/javascript"></script>
</head>
<body>
<h3>Validation form demo using javascript</h3>
<form action="" method="get">
<h3>Contact Form :</h3>
<div id="form1">
<div class="lbl">Name :</div>
<div class="ctrl" style="float: left;">
<input type="text" name="fname" id="fname">
<span id="err_fname"></span>
</div>
<div class="lbl">Address :</div>
<div class="ctrl">
<textarea rows="4" cols="30" id="addr" name="addr"></textarea>
<span id="err_addr"> </span>
</div>
<div class="lbl">Pincode :</div>
<div class="ctrl">
<input onkeydown="return chk_pin(event);" type="text" name="pin" id="pin">
<span id="err_pin"></span>
</div>
<div class="lbl">Contact No :</div>
<div class="ctrl">
<input type="text" name="cn" id="cn">
<span id="err_cn"></span>
</div>
<div class="lbl">Email :</div>
<div class="ctrl">
<input type="text" name="mail" id="mail">
<span id="err_mail"></span>
</div>
<div class="ctrl" style="text-align: center">
<input type="submit" name="submit" id="submit" value="submit" onclick="return chk_valid();">
<input type="reset" name="reset" id="reset" value="Cancel">
</div>
</div>
</form>
</body>
</html>
style.css
#form1{
border-style: inset;
border-width: 0px;
width:600px;
}
.lbl{
width:150px;
float:left;
text-align: right;
border-style: inset;
border-width:0px;
padding:2px;
}
.ctrl{
width:430px;
float:left;
border-style: inset;
border-width:0px;
padding:2px;
}
validation.js
function chk_valid()
{
var fname=document.getElementById("fname").value;
var addr=document.getElementById("addr").value;
var pin=document.getElementById("pin").value;
var email=document.getElementById("mail").value;
var cn=document.getElementById("cn").value;
var flg=0;
if(fname == "")
{
var msg="please enter name";
document.getElementById("err_fname").innerHTML=msg; // inject error message into specified element
flg++;
}
else
{
document.getElementById("err_fname").innerHTML="";
}
if(addr == "")
{
var msg="please enter address";
document.getElementById("err_addr").innerHTML=msg;
flg++;
}
else
{
document.getElementById("err_addr").innerHTML="";
}
if( pin == "")
{
var msg="please enter pincode";
document.getElementById("err_pin").innerHTML=msg;
flg++;
}
else
{
// following pattern allows exactly 6 character long string having numaric characters only
// "^" indicates begining of string, "$" indicates end of string.
var reg = /^([0-9]{6})$/;
if(reg.test(pin) == false)
{
var msg="please enter valid pincode";
document.getElementById("err_pin").innerHTML=msg;
flg++;
}
else
{
document.getElementById("err_pin").innerHTML="";
}
}
if(email == "")
{
var msg="please enter email";
document.getElementById("err_mail").innerHTML=msg;
flg++;
}
else
{
// following pattern specifies the rules for email
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if(reg.test(email) == false)
{
var msg="please enter valid email";
document.getElementById("err_mail").innerHTML=msg;
flg++;
}
else
{
document.getElementById("err_mail").innerHTML="";
}
}
if(cn == "")
{
var msg="please enter contact no.";
document.getElementById("err_cn").innerHTML=msg;
flg++;
}
else
{
var reg=/^([0-9]{7,12})$/;
if(reg.test(cn) == false)
{
var msg="insert valid contact no.";
document.getElementById("err_cn").innerHTML=msg;
flg++;
}
else
{
document.getElementById("err_cn").innerHTML="";
}
}
// If any error remain in the form during submission then variable flg remain greater than 0, Form is not submitted if flg is greater than 0.
if(flg > 0)
{
return false;
}
else
{
return true;
}
}
function chk_pin(e)
{
// The which property specifies which key or button was pressed for the event.
// only accepts 0-9, backspace and tab keys
if(e.which >=48 && e.which <=57 || e.which == 8 || e.which == 9)
{
return true;
}
else
{
return false;
}
}
|
|