JavaScript Tutorials
- What is Javascript?
- What is BOM?
- What is DOM?
- Variable
- check variable value is empty
- JavaScript Output
- Functions
- Javascript Events
- Input Events
- onchange Event
- Javascript Output methods
- If else statement
- Arrays
- Pattern Validation
- Form Validation
- Inner Html Form Validation
- Inline Form Validation
- Checkbox Validation
- Inline Inner Html Form Validation
- Server side php Validation
- Validate a HTML Form with PHP
- window and window location
- Get Text Value
- Get hidden field value
- JavaScript & PHP
- Date Format
- get php value in javascript
- Redirect page & Autoredirect page
- Auto Refresh page & Div
- How to get select text value from Dropdown box
- How to clear browser history in javascript
- Checkbox Problems
- Select option problems
- Popup Contact Form
- Sidebar Contact Form
- How to use a multistep Form or Form wizard
- Auto Calculate Price
- print Application Form
- Auto Calculate GST in Javascript by select price
- Calculate GST by input value in text box Jquery
- Calculate Discount
- onClick Checkbox
- autofil form data click on checkbox
- Show subcategory list
- Show city list as per state
- Show district list as per country and state
- Show good morning good night wish
- image upload with preview image
- Print Div Content
- Show modal popup on page load
- filter table data usign javascript.
- Character Limit Validation.
- Validate File 5MB Upload
- Validate Special character
- More File Upload
- Call JavaScript Function After Page Load
- Drop Down First option Value Disabled --- Please Select ---
- How to Disable Submit Button After Form Submission
- How to disable browser back button using Jquery?
- How to Remove selected item from second & third dropdown list?
- Interview Questions of JavaScript.
Important Link
Html5 pattern validation
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>
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 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>
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>
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;
}