Regular Expression to validate comma separated numbers using javascript

Today i got situation to validate text field containing comma separated numbers. I know how to validate numbers alone. But don’t know how to validate numbers with comma separated and each number should be 8 digits.

For example, 1234678,54872659,84567892,....

I searched google but didn’t find it and finally i got solution from my friend…

Here is the regular expression to do this trick,

/^(?:\s*\d{8}\s*(?:,|$))+$/

Usage:

<script language="javascript">
var pattern = /^(?:\s*\d{8}\s*(?:,|$))+$/;
var testvalue = document.getElementById('checkNumber').value;
if(pattern.test(testvalue)){
alert("Correct");
} else {
alert("Wrong");
}
</script>

 

More explanations on this regular expression, please check here

http://regex101.com/r/iY9bQ9

Hope this will be useful to you all.

Author: Vinodkumar Saravana.

input[type=submit] css not working in IE6

<style type="text/css">
form input[type=submit]{
background-color:#FE9900;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
border:1px solid #000066;
}
</style>

the above code wont work in IE6, either i cant put class or id in it.

The Internet Explorer 6 doesn’t support the attribute selector
[attr="value"]. 

So there is no way to address that submit input element with CSS only 
(IE 6 doesn’t support the adjacence selector + and :last-of-type selector 
neither that would help in this case).

So the only options you have is to either make that element uniquely addressable
by adding a class or ID or wrapping it into an additional span element.

Or – use JavaScript to select that element and apply the CSS rule to it. 
jQuery can make this fairly easy:

$("form input[type=submit]").css({
    "background-color": "#FE9900",
    "font-weight": "bold",
    "font-family": "Arial,Helvetica,sans-serif",
    "border": "1px solid #000066"
});

or another way you can call is using javascript,

Let’s just change our HTML to this.


<input type="text" class="text" value="" />
<input type="button" class="button" value="I am a button" />
<input type="submit" class="button" value="I am a submit" />

Then have the complimenting CSS:


input.text { /* my text css */ }
input.button { /* my button css */ }

Simple enough… but I’m still not satisifed. I’m thinking to myself, What a hassle. Who really wants to append all those classes.

Javascript will do it for you

Need I say more….

A plus i added to the code is that instead of hardcoding in text strings the types,

you the type assign as the class for each element, like:

window.onload = function()
{
var coll = document.getElementsByTagName(”input”);
for(var i=0; i<coll.length; i++)
{
if(coll[i].type)
{
coll[i].className += ‘ ‘ + coll[i].type + ‘ ‘;
}
}
}

This way, all inputs are assigned classes with their own names 
(without overwriting any additional classes the input might have)

Author: Gumbo and Ded

The Internet Explorer 6 doesn’t support the attribute selector [attr="value"]. So there is no way to address that submit input element with CSS only (IE 6 doesn’t support the adjacence selector + and :last-of-type selector neither that would help in this case).

So the only options you have is to either make that element uniquely addressable by adding a class or ID or wrapping it into an additional span element.

Or – as you’ve already stated that you can’t do that – use JavaScript to select that element and apply the CSS rule to it. jQuery can make this fairly easy:

Determine Whether JavaScript Is Enabled/Disabled Via PHP

Recently i was working on a project where there is a need to determine whether JavaScript is enabled or was disabled by the user. Depending whether the JavaScript is enable or not, the system will rely on JavaScript operation if it does and PHP operation if it doesn’t. The fundamental solution to this is to detect whether JavaScript is enable before the system can determine which approach can be used. However, there is no easy solution to determine whether a client scripting is enable in a server scripting language (PHP) without finish loading the page! Therefore, in this article we will discuss whether there is such possibility to use PHP to determine whether JavaScript is enabled for your web application.

The Problem

The main problem is that a server script language can never be able to determine whether a client script language is available as the server script language will always run first. Furthermore, the client script is always run on the client side and never executed on the server side. Therefore, when the server scripting is running at the server side and send to the client for display, the server scripting language will have no idea what is going on with the client environment. Hence, strictly speaking will be unable to determine JavaScript is enable or disable.

The Solution

Although it sounds impossible for server side to determine whether a client scripting is available such as JavaScript but certain tricks can be perform in order to achieve this. However, it won’t be a convenient one. Recall that every web system should have a redirect index.php page to prevent our code from showing in plaintext if anything happen? We can use that page to determine whether javascript is enable by writing a script to either append a value and post over to the next page or a better alternative is to store it into the user cookie. If you store a value and post it to the next page, the validation can only occur within the main page. However, if you utilize cookie to determine whether JavaScript is available, you can always use php to determine whether that cookie value is available. If it is not available (they delete their browser cookie on the way) you can redirect that user to the index.php to revalidate JavaScript is enable. Once it is being verify, you will just show a message to the user after index.php has redirect or run on pure php.

On the index.php script, it will be something like this,

01.<script type='javascript/text'>
02.function createCookie(name,value,days) {
03. if (days) {
04. var date = new Date();
05. date.setTime(date.getTime()+(days*24*60*60*1000));
06. var expires = "; expires="+date.toGMTString();
07. }
08. else var expires = "";
09. document.cookie = name+"="+value+expires+"; path=/";
10.}
11.createCookie('verify_cookie', 'Y', 1);
12.</script>
13.<meta http-equiv="refresh" content="2;url=main.php?c=1">

We have a function that help us to create a cookie if JavaScript available. Once this is done, we redirect the user to main.php where our real page is located with a get value of c=1. This value is needed to avoid recursive request. We can’t use PHP header function because it will redirect before JavaScript has the opportunity to run and the code should be placed before the head tag to make this valid. On all other pages we will have something like this before the header.

01.<?php
02. //filter the global variable first.
03. if(!isset($_COOKIE['verify_cookie']) && $_GET['c'] == 1){
04. echo 'JavaScript is disable';
05. }else if(!isset($_COOKIE['verify_cookie'])){
06. //perform check to determine whether the cookie expire OR it really was disabled.
07. header('location: index.php');
08. }else{
09. //perform another check on javascript similar to index.php if you afraid that the cookie exist but javascript was disabled.
10. }
11.?>

The above is to verify whether javascript exist in each page and use to run either pure php or combination with JavaScript as these script can be imported using PHP if needed. The solution above can be use as a references and not necessary a solid solution.

Alternative Solution

The alternative solution to this is to use the noscript tag which is very simple and make your life a better place to live in.

1.<script>
2.document.getElementsByTagName('body')[0].innerHTML = 'JavaScript is enable.';
3.<script>
4.<noscript>
5.JavaScript is disabled.
6.<noscript>

Conclusion

Many will turn to noscript tag that can really ease and simplify the way we code. However, for some system which required to determine whether script is enabled for different server script to run. This might help those that are doing such approach as noscript tag will only run after the server has processed its information. On the other hand, you can combine this approach with the no tag approach to better validate your logic.

Author: Clay Lua

Get image src using JavaScript

The very simple method in javascript to swap images of named imag tags

For example,

<img name=”image1″ src=”image.jpg” />
<script>document[“image1″].src=”image1.jpg”;</script>

So If I name a Div tag that wraps the image can I use that to specify the image tag in question?

Something like..

<div id=”namedDiv”><img src=”image.jpg” /></div>

The answer is possible, every dom node have childNodes property which is an array of nodes. You can pick first one.

<script>
var imgDiv=document.getElementById[‘namedDiv’];
imgDiv.childNodes[0].src=”image1.jpg”;
</script>

Depending on the markup and the browser, the <img> element may not be the only child. For example, if there is any whitespace such as a line break then many browsers other than IE will create a text node.

The easiest way is to use the getElementsByTagName method of the wrapper element, which returns a NodeList, and get the first element in that NodeList:

<script>
var div = document.getElementById(“namedDiv”);
var image = div.getElementsByTagName(“img”)[0];
image.src = “image1.jpg”;
</script>

You can shorten that if you don’t mind making it slightly harder to follow:

<script>
document.getElementById(‘namedDiv’).getElementsByTagName(‘img’)[0].src = ‘image1.jpg’;
</script>

but that makes it a bit harder to debug when you make a mistake 😉

I hope this will be useful to you. Please post your comments here

How to prevent right click on website?

We can prevent ricght click on website pages by using following code

<!– This for right click

//Disable right mouse click Script

var message=”Copyright bwsipl!!”;

///////////////////////////////////

function clickIE4(){

if (event.button==2){

alert(message);

return false;

}

}

function clickNS4(e){

if (document.layers||document.getElementById&&!document.all){

if (e.which==2||e.which==3){

alert(message);

return false;

}

}

}

if (document.layers){

document.captureEvents(Event.MOUSEDOWN);

document.onmousedown=clickNS4;

}

else if (document.all&&!document.getElementById){

document.onmousedown=clickIE4;

}

document.oncontextmenu=new Function(”alert(message);return false”)

// –>

« Older entries