?
Solved

Another JavaScript validation problem...

Posted on 2011-10-23
16
Medium Priority
?
257 Views
Last Modified: 2012-08-14
I have posted a similar JavaScript validation problem not for a long time ago, but I have another issues now.
This time, I try to validate a simple credit card information form using regular expressions, but again, the form go through even if I don't input any value in the fields and not showing error messages.  I have tried to use different types of debugging method, including check Error Console on Firefox, but I couldn't say what I am missing...

I am assuming that the last function, validateThis(formObj), is not working properly, especially the condition of if statement has some issues.  But I just don't know how to fix it...

Thank you for your help in advance.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Credit Card information</title>
<link href="form.css" rel="stylesheet" type="text/css" />

//<script type="text/javascript">
//window.onerror=function(msg, url, linenumber)
//{
//alert('Error Message: '+msg+'\nULR: '+url+'\nLine Number: '+linenumber)
//  }

//msgWindow = window.open("", "Messages", 'left=20, top=20, width=300, height = 300, toolbar = 1, resizable = 0');
//function writeMsg(msg) {
//	msgWindow.document.write(msg);
//}
// </script>

<script type="text/javascript">
var re_sc = /^[0-9]{3}$/;
//writeMsg("security")
function checkSc(security){
 if (re_sc.test(security)) {
  //alert("VALID SSN");
  document.getElementById("error").innerHTML = "";
 } else {
  //alert("INVALID SSN");
  document.getElementById("error").innerHTML = "Please enter your credit card security code.";
 }
}
//writeMsg("exp")
var re_exD = /^\[0-9]{1,2}[\/ ]?[0-9]{1,2}$/;
//writeMsg("expDate")
function checkEd(expDate){
 if (re_exD.test(expDate)) {
  document.getElementById("error").innerHTML = "";
 } else {
  document.getElementById("error").innerHTML = "Please enter your credit card expiration date.";
 }
}
//writeMsg("cc")
var re_ccn = /^[0-9]{4}[\- ]?[0-9]{4}[\- ]?[0-9]{4}[\- ]?[0-9]$/;
//writeMsg("ccNum")
function checkCcn(ccNumber){
 if (re_ccn.test(ccNumber)) {
  document.getElementById("error").innerHTML = "";
 } else {
  document.getElementById("error").innerHTML = "Please enter your credit card number.";
 }
}
//writeMsg("submit")
function validateThis(formObj) {
	var returnValue = true;
//writeMsg("checkError")	
    if (checkSc(security) == true && checkEd(expDate) == true && checkCcn(ccNumber) == true) 
	  {
		 return returnValue;
	  }
	  
	  else 
	  {
		  document.getElementById("error").innerHTML = "There is something wrong with your credit card info.";
	  }
}
</script>
</head>

<body onload="document.getElementById('ccNumber').focus();document.getElementById('ccNumber').select(); err_msg.innerHTML ='';">
<div class = "container">
<div id="header"><img src="images/card.jpg" width="237" height="150" alt="creditcard" />

<h1>Credit Card Information</h1>
</div>

<h2>Thank you for your order!  Please provide us your credit card information below.</h2>
<br />

<form id="creditcard" name="creditcard" method="post" action="ccForm.php"  >
  <table width="880" cellpadding="8px">
 <div class="field">
  <br />
  <tr>
  <td>
    <div class = "field">
    <span id = "error" class = "help"></span>
    </div>
    <br />
    <div class = "field">
    <h3>Credit Card Number :</h3>
      <input type="text" name="ccNumber" id="ccNumber" size="19" />	 
    </div>
    
    <div class = "field">
    <h3>Expiration Date :</h3>  
      <input type="text" name="expDate" id="expDate" size="5" />
      </div>
    
    <div class = "field">
    <h3>Security Code :</h3>
      <input type="text" name="security" id="security" size="3" />
    </div>
      
    
    <br />
    <input name="submit" type="submit" id="button" value="Submit" onsubmit="return validateThis(this.form);" />
    
  </td>
  </tr>
  </table>
</form>
</div>
</body>
</html>

Open in new window

0
Comment
Question by:sabregirl
  • 7
  • 5
  • 4
16 Comments
 
LVL 15

Expert Comment

by:Eyal
ID: 37013737
try this...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Credit Card information</title>
<link href="form.css" rel="stylesheet" type="text/css" />

//<script type="text/javascript">
//window.onerror=function(msg, url, linenumber)
//{
//alert('Error Message: '+msg+'\nULR: '+url+'\nLine Number: '+linenumber)
//  }

//msgWindow = window.open("", "Messages", 'left=20, top=20, width=300, height = 300, toolbar = 1, 

resizable = 0');
//function writeMsg(msg) {
//	msgWindow.document.write(msg);
//}
// </script>

<script type="text/javascript">
var re_sc = /^[0-9]{3}$/;
//writeMsg("security")
function checkSc(security){
 if (re_sc.test(security)) {
  //alert("VALID SSN");
  document.getElementById("error").innerHTML = "";
 } else {
  //alert("INVALID SSN");
  document.getElementById("error").innerHTML = "Please enter your credit card security code.";
 }
}
//writeMsg("exp")
var re_exD = /^\[0-9]{1,2}[\/ ]?[0-9]{1,2}$/;
//writeMsg("expDate")
function checkEd(expDate){
 if (re_exD.test(expDate)) {
  document.getElementById("error").innerHTML = "";
 } else {
  document.getElementById("error").innerHTML = "Please enter your credit card expiration date.";
 }
}
//writeMsg("cc")
var re_ccn = /^[0-9]{4}[\- ]?[0-9]{4}[\- ]?[0-9]{4}[\- ]?[0-9]$/;
//writeMsg("ccNum")
function checkCcn(ccNumber){
 if (re_ccn.test(ccNumber)) {
  document.getElementById("error").innerHTML = "";
 } else {
  document.getElementById("error").innerHTML = "Please enter your credit card number.";
 }
}
//writeMsg("submit")
function validateThis(formObj) {
	var returnValue = true;
//writeMsg("checkError")	
    if (checkSc(security) == true && checkEd(expDate) == true && checkCcn(ccNumber) == true) 
	  {
		 formObj.submit();
	  }
	  
	  else 
	  {
		  document.getElementById("error").innerHTML = "There is something wrong with your 

credit card info.";
	  }
}
</script>
</head>

<body onload="document.getElementById('ccNumber').focus();document.getElementById('ccNumber').select(); 

err_msg.innerHTML ='';">
<div class = "container">
<div id="header"><img src="images/card.jpg" width="237" height="150" alt="creditcard" />

<h1>Credit Card Information</h1>
</div>

<h2>Thank you for your order!  Please provide us your credit card information below.</h2>
<br />

<form id="creditcard" name="creditcard" method="post" action="ccForm.php"  >
  <table width="880" cellpadding="8px">
 <div class="field">
  <br />
  <tr>
  <td>
    <div class = "field">
    <span id = "error" class = "help"></span>
    </div>
    <br />
    <div class = "field">
    <h3>Credit Card Number :</h3>
      <input type="text" name="ccNumber" id="ccNumber" size="19" />	 
    </div>
    
    <div class = "field">
    <h3>Expiration Date :</h3>  
      <input type="text" name="expDate" id="expDate" size="5" />
      </div>
    
    <div class = "field">
    <h3>Security Code :</h3>
      <input type="text" name="security" id="security" size="3" />
    </div>
      
    
    <br />
    <input type="button" value="Submit" onclick="return validateThis(this.form);" />
    
  </td>
  </tr>
  </table>
</form>
</div>
</body>
</html>

Open in new window

0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 37015853
If Eyal's suggestion does not work for you, try putting a simple alert statement just before then end of each javascript function to find out if the entire function is being excecuted or not. Eg:

function validateThis(formObj) {
alert('so far so good!'); //                   start with this one to make sure the function is getting reached
      var returnValue = true;
//writeMsg("checkError")      
    if (checkSc(security) == true && checkEd(expDate) == true && checkCcn(ccNumber) == true)
        {
             formObj.submit();
        }
        
        else
        {
              document.getElementById("error").innerHTML = "There is something wrong with your

credit card info.";
        }
// try an alert here to see if the code is being read all the way through
alert('This whole function IS being read');
}

Try the above function first then try the same "alerts" with the first javascript function. Here's what you are looking for.

1: If you get an alert "so far so good!" then your function is being reached so that is good.
2: Next step is you should get another alert once the code has all been executed saying "This whole function IS being read". If you get that alert then the is no problem in the format of your function so it must be something else. Try that first to eliminate typo's and code writing errors.

Try it in your first function as well. Elimination is the best method for finding problems. If you find the second alert does not work, then move the alert up by one line of code each time or one step (not in the middle of a loop or anything) until you get the alert. Then you will know which line of your code is causing a problem. Post that line back here so we can take a look.
0
 

Author Comment

by:sabregirl
ID: 37015917
Hello Eyal,
     Thank you for your comment.  Unfortunately, it doesn't show the error message, even if I type in some wrong info... :(
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:sabregirl
ID: 37015923
Hello elvin66,
Thank you for your comment.  Putting alert is something I actually didn't do...  I'll try and see how it goes!  I will post the result and questions later...
0
 
LVL 15

Expert Comment

by:Eyal
ID: 37015942
the problems:
1) you have activated the regular expression on the fields and not on the values.
2) you have put error that replaced the actual error

here is a fixed version of the code
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Credit Card information</title>
<link href="form.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
var re_sc = /^[0-9]{3}$/;
//writeMsg("security")
function checkSc(security){
 if (re_sc.test(security.value)) {
  document.getElementById("error").innerHTML = "";
 } else {
  document.getElementById("error").innerHTML = "Please enter your credit card security code.";
 }
}
var re_exD = /^\[0-9]{1,2}[\/ ]?[0-9]{1,2}$/;
function checkEd(expDate){
 if (re_exD.test(expDate.value)) {
  document.getElementById("error").innerHTML = "";
 } else {
  document.getElementById("error").innerHTML = "Please enter your credit card expiration date.";
 }
}
var re_ccn = /^[0-9]{4}[\- ]?[0-9]{4}[\- ]?[0-9]{4}[\- ]?[0-9]$/;
function checkCcn(ccNumber){
 if (re_ccn.test(ccNumber.value)) {
  document.getElementById("error").innerHTML = "";
 } else {
  document.getElementById("error").innerHTML = "Please enter your credit card number.";
 }
}
function validateThis(formObj) {
	var returnValue = true;
    if (checkSc(document.getElementById("security")) == true && checkEd(document.getElementById("expDate")) == true && checkCcn(document.getElementById("ccNumber")) == true) 
	  {
formObj.submit();
		 return returnValue;
	  }
}
</script>
</head>

<body onload="document.getElementById('ccNumber').focus();document.getElementById('ccNumber').select(); 

err_msg.innerHTML ='';">
<div class = "container">
<div id="header"><img src="images/card.jpg" width="237" height="150" alt="creditcard" />

<h1>Credit Card Information</h1>
</div>

<h2>Thank you for your order!  Please provide us your credit card information below.</h2>
<br />

<form id="creditcard" name="creditcard" method="post" action="ccForm.php"  >
  <table width="880" cellpadding="8px">
 <div class="field">
  <br />
  <tr>
  <td>
    <div class = "field">
    <span id = "error" class = "help"></span>
    </div>
    <br />
    <div class = "field">
    <h3>Credit Card Number :</h3>
      <input type="text" name="ccNumber" id="ccNumber" size="19" />	 
    </div>
    
    <div class = "field">
    <h3>Expiration Date :</h3>  
      <input type="text" name="expDate" id="expDate" size="5" />
      </div>
    
    <div class = "field">
    <h3>Security Code :</h3>
      <input type="text" name="security" id="security" size="3" />
    </div>
      
    
    <br />
    <input type="button" value="Submit" onclick="return validateThis(this.form);" />
    
  </td>
  </tr>
  </table>
</form>
</div>
</body>
</html>

Open in new window

0
 
LVL 15

Expert Comment

by:Eyal
ID: 37015952
a good practice will be to use firefox browser with firebug plugin
add the following statement to the javascript
debugger;

Open in new window

and watch the magic :)
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 37016099
Eyal - Just out of interest - Where do you put "debugger" in the javascript code and what exactly does it do in Firefox? Does it try to run the code and show any errors or where the errors are or what? I've never used it before but I do have firebug plugin.
0
 

Author Comment

by:sabregirl
ID: 37016175
Hello Eyal,
     Thank you for your comment.  When I tested your code, it did show a error message, but I'm not validating the input, i.e., I am writing a wrong regular expression... :(
0
 

Author Comment

by:sabregirl
ID: 37016211
Hello elvin66,
     I have set some alert, like you suggested, but everything except the one you mentioned in your comment, "So far so good!"... :(

// JavaScript Document
var re_sc = /^[0-9]{3}$/;

function checkSc(security){
      alert('Security check')
 if (re_sc.test(security)) {

  document.getElementById("error").innerHTML = "";
 } else {

  document.getElementById("error").innerHTML = "Please enter your credit card security code.";
 }
}

var re_exD = /^\[0-9]{1,2}[\/ ]?[0-9]{1,2}$/;

function checkEd(expDate){
      alert ('Expiration check')
 if (re_exD.test(expDate)) {
  document.getElementById("error").innerHTML = "";
 } else {
  document.getElementById("error").innerHTML = "Please enter your credit card expiration date.";
 }
}

var re_ccn = /^[0-9]{4}[\- ]?[0-9]{4}[\- ]?[0-9]{4}[\- ]?[0-9]$/;
           
function checkCcn(ccNumber){
      alert ('Card check')
 if (re_ccn.test(ccNumber)) {
  document.getElementById("error").innerHTML = "";
 } else {
  document.getElementById("error").innerHTML = "Please enter your credit card number.";
 }
}

function validateThis(formObj) {
      alert('so far so good!');
      var returnValue = true;
      
    if (checkSc(security) == true && checkEd(expDate) == true && checkCcn(ccNumber) == true)
        {
             formObj.submit();
             return returnValue;
        }
        
        else
        {
              document.getElementById("error").innerHTML = "There is something wrong with your credit card info.";
        }
        alert('This whole function IS being read');
}

So I guess that all the functions have some mistakes I made...  I am so discouraged keep studying JavaScript and PHP... :(

Also, when I checked error console on Firefox, it shows "Error  is not defined." which is probably the same issue that Eyal mentioned in his comment, but it also shows that the line number is 1, which doesn't make sense to me at all, because line 1 is nothing actual code related line...
0
 

Author Comment

by:sabregirl
ID: 37016216
Hello Eyal,
     I have Firebug plug-in, but I'm not sure how to use it the way you mentioned...
0
 
LVL 15

Expert Comment

by:Eyal
ID: 37016227
elvin66: debugger is equivalent to break point in firebug you also do it by hand without writing it to the javascript code. http://msdn.microsoft.com/en-us/library/0bwt76sk%28v=vs.94%29.aspx

regular expression is another issue
0
 
LVL 15

Expert Comment

by:Eyal
ID: 37016234
0
 
LVL 20

Accepted Solution

by:
Mark Brady earned 2000 total points
ID: 37020808
You should read what I said and do it. Place an alert inside your function like you have done then try to run it. Tell us if you get the alerts and which ones you get?

If you can understand this please read carefully.

Move the alert up one line at a time and keep running it to see if the alert works.

As soon as the alert stops popping up, you have found your problem. It will be the code on the line above the alert. Pretty simple logic but if you don't try it it will never work for you. It's your choice.
0
 

Author Comment

by:sabregirl
ID: 37091966
I had some personal issues that I had to solve first and I ended up left this for a while...
Anyway, I re-write my code and I was able to narrow down my problems, using "alert" method one by one.
.
This is my current code:

// JavaScript Document
function validateThis(myForm) {
      var returnValue = true;
      //validate security code
      var re_sc;
      re_sc = myForm["security"].value;      
      var secCheck;
      secCheck = /^d{3}$/;
      //check to see if the field is empty, then show error message
      if(myForm["security"].value == 0) {
            document.getElementById("err_msg").innerHTML = "Please enter the 3 digit security code on back on your card.";
            returnValue = false;
      }
      
      //check to see if the code is a 3-digit-number
      else if (!secCheck.test(re_sc)) {
            document.getElementById("err_msg").innerHTML = "Security code must be 3 digit number.";
            returnValue = false;            
      }

    var re_exD;
      re_exD= myForm["expDate"].value;
      var expCheck;
      expCheck = /^\d{2}\/(\d{2}|\d{4})$/;

    if (myForm["expDate"].value == 0) {
            
          document.getElementById("err_msg").innerHTML = "Please enter your credit card expiration date.";
            returnValue = false;
      }
      else if (!expCheck.test(re_exD)) {
            document.getElementById("err_msg").innerHTML = "Expiration date must be mm/yy or mm/yyyy format.";
            returnValue = false;
      }
      
    var re_ccn;
      re_ccn = myForm["ccNumber"].value;
      var ccnCheck;
      ccnCheck = /^\d{4}-\d{4}-\d{4}-\d{4}$/;
      
      if (myForm["ccNumber"].value == 0) {
            document.getElementById("err_msg").innerHTML = "Please enter your credit card number.";
            returnValue = false;            
      }
      else if (!ccnCheck.test(re_ccn)) {
          document.getElementById("err_msg").innerHTML = "Credit card number must be nnnn-nnnn-nnnn-nnnn format.";
            returnValue = false;
      }
                   return returnValue;
        }
        
And I believe this part of code has an issue, but I don't know what I'm doing wrong...

      //check to see if the code is a 3-digit-number
      else if (!secCheck.test(re_sc)) {
            document.getElementById("err_msg").innerHTML = "Security code must be 3 digit number.";
            returnValue = false;                   

Even if I put three digit number, I still see the error message.  I used the same logic to other two input fields and they validate properly.      

Thank you again for your help in advance...
0
 

Author Closing Comment

by:sabregirl
ID: 37092039
Nevermind...I didn't write a proper Regular Expression, first of all :(
Debugging is not easy, but it's something I need to do properly...
Thank you for all of your help.
0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 37092529
You're welcome. We are always happy to help you with your coding or logic methods when you need it.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses
Course of the Month13 days, 18 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question