Another JavaScript validation problem...

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

sabregirlAsked:
Who is Participating?
 
Mark BradyPrincipal Data EngineerCommented:
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
 
EyalCommented:
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
 
Mark BradyPrincipal Data EngineerCommented:
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
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
sabregirlAuthor Commented:
Hello Eyal,
     Thank you for your comment.  Unfortunately, it doesn't show the error message, even if I type in some wrong info... :(
0
 
sabregirlAuthor Commented:
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
 
EyalCommented:
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
 
EyalCommented:
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
 
Mark BradyPrincipal Data EngineerCommented:
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
 
sabregirlAuthor Commented:
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
 
sabregirlAuthor Commented:
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
 
sabregirlAuthor Commented:
Hello Eyal,
     I have Firebug plug-in, but I'm not sure how to use it the way you mentioned...
0
 
EyalCommented:
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
 
sabregirlAuthor Commented:
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
 
sabregirlAuthor Commented:
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
 
Mark BradyPrincipal Data EngineerCommented:
You're welcome. We are always happy to help you with your coding or logic methods when you need it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.