Jesin's Blog

Welcome to the Portal of Technology

  • Facebook
  • GitHub
  • Google+
  • RSS
  • Twitter
  • Home
  • Categories
    • Domains
    • Linux
    • Networking
    • PHP
    • Virtualization
    • Web Design
    • Web Servers
    • Windows
  • WordPress Plugins
    • Custom Error Pages
    • HTTP Digest Authentication
    • Mailgun Email Validator
  • Toolbox
    • DNS Lookup Tool
    • htdigest Generator Tool Online
    • htpasswd Generator Tool Online
    • HTTP Headers Lookup Tool
    • MD5 Encryption Tool
    • Open Port Check Tool
    • SHA-1 Encryption Tool
    • URL Encoding/Decoding Tool
  • About Me
  • Contact Me
  • Sitemap
Home ›
Web Design ›
Javascript Validation with Regular Expressions

Javascript Validation with Regular Expressions

March 22, 2011 Web Design Jesin A 6 Comments

web design category thumbnail

After reading this article you’ll be able to do advanced javascript validation using regular expressions a.k.a. RegExp for basic javascript validation read Javascript Validation – Textbox Combobox Radiobutton Checkbox. Using regular expressions the entered content can be validated with advanced conditions like the string entered shouldn’t contain spaces, special characters, numbers, uppercase or lowercase etc. Once you learn the art of using regular expressions you can use it with many computer languages.

Regular Expressions

The following is how regular expressions can be used

[abc] – find any character in the brackets a, b or c

[a-z] – find the range of characters within brackets i.e. a to z lowercase. Can also be used with numbers [0-9]

[^xyz] – find any character other than the ones specified in the brackets i.e. x,y and z

(word) – find the “word” specified in the round brackets

[abc|xyz] – find either the characters a,b,c or x,y,z

Javascript Validation Numeric

We’ll start first with validating a textbox that accepts only numbers. So the condition is we check whether the textbox contains anything ELSE other than numbers and display a message

<script type="text/javascript">
function validate()
{
var regexp1=new RegExp("[^0-9]");
if(regexp1.test(document.getElementById("age").value))
{
alert("Only numbers are allowed");
return false;
}
}
</script>
<form action="" method="post" onsubmit="return validate()">
<input type="text" id="age" name="age">
<input type="submit" value="submit">
</form>

As you can see the function validate() checks if the entered string contains characters that does NOT (notice the ^ symbol) match the numbers 0 to 9 including white spaces and special characters.

Javascript Validation Alphabets

From numbers we’ll move to alphabets first an example for validation lowercase alphabets and then to validate both uppercase and lowercase.

<script type="text/javascript">
function validate()
{
var regexp1=new RegExp("[^a-z]");
if(regexp1.test(document.getElementById("txt").value))
{
alert("Only alphabets from a-z are allowed");
return false;
}
}
</script>
<form action="" method="post" onsubmit="return validate()">
<input type="text" id="txt" name="txt">
<input type="submit" value="submit">
</form>

Now we’ll use the pipe symbol (|) to check if the value is outside a-z OR A-Z.

<script type="text/javascript">
function validate()
{
var regexp1=new RegExp("[^a-z|^A-Z]");
if(regexp1.test(document.getElementById("txt").value))
{
alert("Only alphabets from a-z and A-Z are allowed");
return false;
}
}
</script>
<form action="" method="post" onsubmit="return validate()">
<input type="text" id="txt" name="txt">
<input type="submit" value="submit">
</form>

The above code will reject even whitespaces but in case you want to allow whitespaces the following code will do it.

<script type="text/javascript">
function validate()
{
var pattern=/[^a-z|^A-Z|^\s]/;
if(document.getElementById("txt").value.match(pattern))
{
alert("Only alphabets from a-z and A-Z are allowed");
return false;
}
}
</script>
<form action="" method="post" onsubmit="return validate()">
<input type="text" id="txt" name="txt">
<input type="submit" value="submit">
</form>

Here we create a RegExp pattern and use the match to validate it.

Javascript validation check for a word

This type of javascript validation will check if the entered text contains a particular word round brackets are used to find out complete words

<script type="text/javascript">
function validate()
{
var regexp1=new RegExp("(word1|word2)");
if(regexp1.test(document.getElementById("txt").value))
{
alert("Word found in string");
return false;
}
}
</script>
<form action="" method="post" onsubmit="return validate()">
<input type="text" id="txt" name="txt">
<input type="submit" value="submit">
</form>

Two words are checked in this code word1 and word2 for checking a single word use new RegExp(“(word)”)

Javascript Validation whitespace

Validate a string against any whitespaces including tab and carriage return using the pattern and match function

<script type="text/javascript">
function validate()
{
var pattern=/\s/;
if(document.getElementById("txt").value.match(pattern))
{
alert("Whitespaces are not allowed");
return false;
}
}
</script>
<form action="" method="post" onsubmit="return validate()">
<input type="text" id="txt" name="txt">
<input type="submit" value="submit">
</form>

Related posts:

web design category thumbnailJavascript Validation – Textbox Combobox Radiobutton Checkbox web design category thumbnailJavascript Reload Image jquery add remove textboxHow to Add/Remove text boxes using jQuery and PHP web design category thumbnailJavascript Simple Slideshow web design category thumbnailUsername availability check with AJAX and PHP

Tags: javascript

Comments

  1. Harendra says

    March 13, 2013 at 6:27 pm

    Very nice article given and easily help for anyone !!!

    Reply
  2. neel says

    March 17, 2013 at 6:45 pm

    very good.My knowledge has improved.

    Reply
  3. Supriya says

    November 28, 2013 at 6:04 pm

    need a code for limiting the entry of special symbol in description field.

    Reply
  4. Supriya says

    November 28, 2013 at 6:06 pm

    nice one……….

    Reply
  5. palanivel says

    September 29, 2015 at 4:18 pm

    very good.My knowledge has improved.

    Reply
  6. purva baraiya says

    May 23, 2019 at 3:13 pm

    Nice One.. Thank you…

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Get a wealth of information delivered to your inbox. Subscribe and never miss a single article.

  • Tutorials and howtos
  • Code, scripts and commands
  • Online Tools

* No spam, unsubscribe anytime

Hire Me

  • SSL installation and hardening (A+ on Qualys SSL test)
  • Apache & Nginx configuration
  • Email deliverability improvement (10/10 on Mail Tester & MailGenius)
  • WordPress customization, optimization and migration
  • and much more…

    Tools

    • DNS Lookup Tool
    • htdigest Generator Tool Online
    • htpasswd Generator Tool Online
    • HTTP Headers Lookup Tool
    • MD5 Encryption Tool
    • Open Port Check Tool
    • SHA-1 Encryption Tool
    • URL Encoding/Decoding Tool

    Nav

    • Home
    • About Me
    • Contact Me
    • Privacy Policy
    • Sitemap
    Vultr SSD VPS

    Creative Commons License
    Jesin's Blog by Jesin A is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
    Based on a work at websistent.com.