Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Javascript validation

    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;
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,591
    Thanks
    78
    Thanked 4,385 Times in 4,350 Posts
    Use re.test( ) instead of re.exec( ).

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,029
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Here you are:-

    Code:
    <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
    Last edited by Philip M; 05-14-2009 at 08:34 AM. Reason: Typo


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •