...

View Full Version : Javascript validation



ali.irfan
05-14-2009, 07:31 AM
Hi
I have developed the following function for the validation of Zip code,the problem is, when user enters the valid zip code in first attempt, the background color of text box changes to green while I want that if user enters the valid zip code in first attempt then text box's background color should't change,if user enters invalid sip code then then text box's background color should change to red and then on entering valid zip code the text box's background color should change green?
Please help me how can I solve this problem I have tried a lot.

function isValidZipCode(name,msg) {
//name takes the id of text box
//msg takes the id of label where message will be displayed.
nameValue=document.getElementById(name).value;
var re = /^\d{5}([\-]\d{4})?$/;
if(nameValue == '' || nameValue == null ){
document.getElementById(msg).innerHTML='This field is Required';
document.getElementById(name).style.backgroundColor = "#fcc";
document.getElementById(name).style.borderColor = "#c00";
document.getElementById(name).focus();
return false;
}else
if(!re.exec(nameValue)){
document.getElementById(msg).innerHTML='Enter a valid zip code';
document.getElementById(name).style.backgroundColor = "#fcc";
document.getElementById(name).style.borderColor = "#c00";
document.getElementById(name).focus();
return false;
}
else{
document.getElementById(msg).innerHTML=' ';
document.getElementById(name).style.backgroundColor = "#cfc";
document.getElementById(name).style.borderColor = "#0c0";
}
return true;
}

Old Pedant
05-14-2009, 07:53 AM
Use re.test( ) instead of re.exec( ).

Philip M
05-14-2009, 08:18 AM
Here you are:-


<input type = "text" name = "uname" id = "uname" onblur = "isValidZipCode()">
<div id = "msg"></div>

<script type = "text/javascript">

var badFlag;
function isValidZipCode() {
nameValue=document.getElementById("uname").value;
document.getElementById("msg").innerHTML=' ';
document.getElementById("uname").style.backgroundColor = "";
document.getElementById("uname").style.borderColor = "";
if (/^\d{5}([\-]\d{4})?$/.test(nameValue)) {
var OK = true;
if (badFlag) {
document.getElementById("msg").innerHTML=' ';
document.getElementById("uname").style.backgroundColor = "#cfc";
document.getElementById("uname").style.borderColor = "#0c0";
return false;
}
}

if(nameValue == '' || nameValue == null ){
badFlag = true;
document.getElementById("msg").innerHTML='This field is Required';
document.getElementById("uname").style.backgroundColor = "#fcc";
document.getElementById("uname").style.borderColor = "#c00";
document.getElementById("uname").focus();
return false;
}

else if(!OK){
badFlag = true;
document.getElementById("msg").innerHTML='Enter a valid zip code';
document.getElementById("uname").style.backgroundColor = "#fcc";
document.getElementById("uname").style.borderColor = "#c00";
document.getElementById("uname").focus();
return false;
}

}
</script>


It is a bad idea to use name as the name of a variable or HTML element so I have changed it to uname.

Note the need for quotes - document.getElementById("msg").innerHTML = 'Enter a valid zip code';


"In the second half the tide turned completely on its head ........" - Football commenator



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum