Most Popular Tutorials
-
What is Javascript
-
BOM (Browser object model)
-
DOM (Document object model)
-
Variable
-
Variable is empty or Not
-
Javascript output
-
Function
-
Events
-
Array
-
Get text value
-
Get Form field value
-
Pattern validation
-
Form validation
-
Checkbox validation
-
Inner Html form validation
-
Form validation on php server
-
Window and window location
-
Get Text Value
-
get javascript value in php
-
Date Format
-
Get php variable in javascript
-
Redirect page in javascript
-
Auto Refresh page and DIV
-
Get text value from dropdown
-
Clear Browser History
-
Get Checkbox value
-
select (Dropdown)
-
PopUp Contact Form
-
sidebar contact form
-
Show modal on page load
-
Auto calculate price GST
-
print html and Div content
-
Calculate Discount prince
-
Checked single or all checkbox
-
Auto Fill form data on click checkbox
-
Show subcategory (Dependent Dropdown)
-
country, state, city (Dependent Dropdown)
-
Image upload with preview image
-
Filter table data
-
Character Limit Validation
-
uploading file size validation
-
Special Character validation
-
multiple file upload (Add more)
-
function call after page load
-
Disable Submit Button After Form Submission
-
disable browser back button
-
Remove selected item from second & third dropdown list
-
Interview Question
-
Active Tab Menu
-
String methods
Most Popular Tutorials :-
Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List
How to use pattern validation in javascript?
Html pattern Validation
File name : index.php
<html>
<head>
<body>
<form action="/action_page.php">
<label for="username">Username <i>(letters and numbers only, no punctuation or special characters)</i></label><br>
<!-- <input name="username" id="username" pattern="[A-Za-z0-9]+"> -->
<input name="fname" id="fname" pattern="^(?!^ +$)([\w -&]+)$">
<input name="lname" id="lname" pattern="[a-zA-Z0-9_&-]+([ ]?[a-zA-Z0-9_&-]+)*">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="country_code">User Name:</label>
<input type="text" id="user_name" name="user_name"
pattern="[A-Za-z]{6}" title="User Name">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" pattern=".{8,}" title="Eight or more characters">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="search">Search:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="website">Homepage:</label>
<input type="url" id="website" name="website"
pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
<form action="somefile.php">
<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>
<form action="somefile.php">
<input
type="text"
name="username"
placeholder="Username"
pattern="[a-z]{1,15}"
title="Username should only contain lowercase letters. e.g. Sana">
</form>
<p> pattern="[A-Za-z0-9_]{1,15}"</p>
<p>pattern="[a-zA-Z][a-zA-Z0-9-_.]{1,20}"</p>
<form action="file.php">
<input
type="text"
name="user_name"
placeholder="User name"
pattern="[a-z]{1,15}"
id="user_name">
<input type="submit">
</form>
</body>
<script>
var input = document.getElementById('user_name');
input.oninvalid = function(event) {
event.target.setCustomValidity('User name should only contain lowercase letters. e.g. Sana');
}
</script>
</head>
</html>
<head>
<body>
<form action="/action_page.php">
<label for="username">Username <i>(letters and numbers only, no punctuation or special characters)</i></label><br>
<!-- <input name="username" id="username" pattern="[A-Za-z0-9]+"> -->
<input name="fname" id="fname" pattern="^(?!^ +$)([\w -&]+)$">
<input name="lname" id="lname" pattern="[a-zA-Z0-9_&-]+([ ]?[a-zA-Z0-9_&-]+)*">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="country_code">User Name:</label>
<input type="text" id="user_name" name="user_name"
pattern="[A-Za-z]{6}" title="User Name">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd" pattern=".{8,}" title="Eight or more characters">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="search">Search:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
<form action="/action_page.php">
<label for="website">Homepage:</label>
<input type="url" id="website" name="website"
pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
<form action="somefile.php">
<input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>
<form action="somefile.php">
<input
type="text"
name="username"
placeholder="Username"
pattern="[a-z]{1,15}"
title="Username should only contain lowercase letters. e.g. Sana">
</form>
<p> pattern="[A-Za-z0-9_]{1,15}"</p>
<p>pattern="[a-zA-Z][a-zA-Z0-9-_.]{1,20}"</p>
<form action="file.php">
<input
type="text"
name="user_name"
placeholder="User name"
pattern="[a-z]{1,15}"
id="user_name">
<input type="submit">
</form>
</body>
<script>
var input = document.getElementById('user_name');
input.oninvalid = function(event) {
event.target.setCustomValidity('User name should only contain lowercase letters. e.g. Sana');
}
</script>
</head>
</html>
Zip Code (PinCode) Validation
File name : index.php
<label for="zipcode_pincode">
Pin code:</label>
<input type="text"
name="pincode"
id="pincode"
pattern="[0-9]{6}"
required /><br />
Pin code:</label>
<input type="text"
name="pincode"
id="pincode"
pattern="[0-9]{6}"
required /><br />
Pin code pattern validation
input:invalid { color: red; }
File name : index.php
<input type="text" pattern="[1-9][0-9]{5}" />
^[1-9][0-9]{5}$
^: Starts with anchor
[1-9]: Matches exactly one digit from 1 to 9
[0-9]{5}: Matches exactly five digits in the inclusive range 0-9
$: Ends with anchor
Mobile number pattern validation
File name : index.php
<input type="tel" class="form-control" required="required" name="mobile_number" id="mobile_number" maxlength="10" placeholder="Mobile No" pattern="[5-9]{1}[0-9]{9}" onkeypress="return isNumber('mobile_number',event)" />
<?php echo form_error('mobile_number','<span class="help-block" style="color:red;"">','</span>'); ?>
<span class="required" id="mobile_number_error" aria-required="true"></span>
<?php echo form_error('mobile_number','<span class="help-block" style="color:red;"">','</span>'); ?>
<span class="required" id="mobile_number_error" aria-required="true"></span>
Telephone number pattern validation
File name : index.php
<input type="tel" class="form-control" name="telephone_number" id="telephone_number" maxlength="13" pattern="[1-9]{1}[0-9]{12}" placeholder="Telephone Number" onkeypress="return isNumber('telephone_number',event)" />
<?php echo form_error('telephone_number','<span class="help-block" style="color:red;"">','</span>'); ?>
<span class="required" id="telephone_number_error" aria-required="true"></span>
<?php echo form_error('telephone_number','<span class="help-block" style="color:red;"">','</span>'); ?>
<span class="required" id="telephone_number_error" aria-required="true"></span>
isNumber function
function isNumber(id,evt) {
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
$('#'+id+'_error').text('Please enter only Numbers.');
return false;
}else{
$('#'+id+'_error').html("");
}
return true;
}
evt = (evt) ? evt : window.event;
var charCode = (evt.which) ? evt.which : evt.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
$('#'+id+'_error').text('Please enter only Numbers.');
return false;
}else{
$('#'+id+'_error').html("");
}
return true;
}
File name : index.php
If your field for user name only accept letters and middle of space but not for begining and end
User name: /^[^\s][a-zA-Z\s]+[^\s]$/
If your field for user ID only accept letters,numbers and underscore and no spaces allow
user ID: /^[\w]+$/
If your field for password only accept letters,number and special character no spaces allow
Password: /^[\w@#&]+$/
Note: \w content a-zA-Z, number, underscore (_) if you add more character, add you special character after \w.
User name: /^[^\s][a-zA-Z\s]+[^\s]$/
If your field for user ID only accept letters,numbers and underscore and no spaces allow
user ID: /^[\w]+$/
If your field for password only accept letters,number and special character no spaces allow
Password: /^[\w@#&]+$/
Note: \w content a-zA-Z, number, underscore (_) if you add more character, add you special character after \w.
Phone number and postal code validation.
File name : index.php
<style>
input[type='text']
{
padding:10px;
font-size:1.2em;
}
input[type='submit']
{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.5em;
margin: 4px 2px;
cursor: pointer;
}
</style>
<form onsubmit="validate()">
<p>
<input type="text"id="phone-number" placeholder="phone number"/>
</p><p>
<input type="text" id="postal-code" placeholder="postal code" />
</p>
<p>
<input type="submit" />
</p>
</form>
function validate(){
var phoneNumber = document.getElementById('phone-number').value;
var postalCode = document.getElementById('postal-code').value;
var phoneRGEX = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;
var postalRGEX = /^[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$/i;
var phoneResult = phoneRGEX.test(phoneNumber);
var postalResult = postalRGEX.test(postalCode);
if(phoneResult == false)
{
alert('Please enter a valid phone number');
return false;
}
if(postalResult == false)
{
alert('Please enter a valid postal number');
return false;
}
return true;
}
input[type='text']
{
padding:10px;
font-size:1.2em;
}
input[type='submit']
{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 1.5em;
margin: 4px 2px;
cursor: pointer;
}
</style>
<form onsubmit="validate()">
<p>
<input type="text"id="phone-number" placeholder="phone number"/>
</p><p>
<input type="text" id="postal-code" placeholder="postal code" />
</p>
<p>
<input type="submit" />
</p>
</form>
function validate(){
var phoneNumber = document.getElementById('phone-number').value;
var postalCode = document.getElementById('postal-code').value;
var phoneRGEX = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/;
var postalRGEX = /^[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}$/i;
var phoneResult = phoneRGEX.test(phoneNumber);
var postalResult = postalRGEX.test(postalCode);
if(phoneResult == false)
{
alert('Please enter a valid phone number');
return false;
}
if(postalResult == false)
{
alert('Please enter a valid postal number');
return false;
}
return true;
}
Date Format validation.
File name : index.php
var dob = document.getElementById('dob').value;
var dob_error = document.getElementById('dob');
// var date_format = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/;
// var date_format = /^\d{2}\/\d{2}\/\d{4}$/ ;
var date_format = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ;
var valid_date = date_format.test(dob);
if(valid_date == false)
{
//alert('Please enter a valid Date');
dob_error.style.border = "red solid 3px";
return false;
}
var dob_error = document.getElementById('dob');
// var date_format = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/;
// var date_format = /^\d{2}\/\d{2}\/\d{4}$/ ;
var date_format = /^(0[1-9]|1[0-2])\/(0[1-9]|1\d|2\d|3[01])\/(19|20)\d{2}$/ ;
var valid_date = date_format.test(dob);
if(valid_date == false)
{
//alert('Please enter a valid Date');
dob_error.style.border = "red solid 3px";
return false;
}
Previous Next
Trending Tutorials
Review & Rating
0.0 / 5
0 Review
5
(0)
4
(0)
3
(0)
2
(0)
1
(0)
Write Review Here
Most Popular Tutorials
-
select (Dropdown)
-
BOM (Browser object model)
-
country, state, city (Dependent Dropdown)
-
Calculate Discount prince
-
Get php variable in javascript
-
multiple file upload (Add more)
-
Window and window location
-
What is Javascript
-
Get Form field value
-
Variable is empty or Not
-
Function
-
Get Text Value
-
Checkbox validation
-
Disable Submit Button After Form Submission
-
Date Format
-
Show modal on page load
-
Redirect page in javascript
-
Array
-
Remove selected item from second & third dropdown list
-
Auto calculate price GST
Important Link
-
How to manage Session in php Tutorials.
More ....... -
upcomming codeigniter and angular js tutorials.
Click here to see More ...
