asked on

whats wrong with this code?

Hello,
I have some javascript to validate an HTML form. It doesnt work gives me errors in FireFox like frm.name.value has no properties. Can someone please correct this script for me so I can see and learn what I am doing wrong. Here is the code I have:

<script type="text/javascript">
function validateForm(frm)
{
//validate the submitted form
alert('Validate.');
if (frm.freemag.selected == false)
{
      alert('You must choose your free magazine.');
      return false;
}
else if(frm.name.value.length == 0)
{
      alert('You must enter your name.');
      return false;
}
else if (frm.address.value.length == 0)
{
      alert('You must enter your address.');
      return false;
}
else if (frm.city.value.length == 0)
{
      alert('You must enter your city.');
      return false;
}
else if (frm.state.value.length == 0)
{
      alert('You must enter your state.');
      return false;
}
else if (frm.zip.value.length == 0)
{
      alert('You must enter your zip.');
      return false;
}
else if (frm.paytype.selected == false)
{
      alert('You must select your payment / card type.');
      return false;
}
else if (isMod10(frm.ccnum.value) == false)
{
      alert('Your card number is invalid.');
      return false;
}
else if ((frm.ccexpmonth.selected == false) || (frm.ccexpyear.selected == false))
{
      alert('Please complete your credit card expiration.');
      return false;
}
else
      return true;
}

function isMod10(num) {
num = num.replace(/ |-/g, ""); // strip any spaces and dashes
if(num.search(/\D/) > -1) return false; // check for non-digit characters in number
if(parseInt(num) == 0) return false; // check if number consists of only zeroes
var len = num.length; // assign number of digits
if (len < 13) return false; // check if number is at least 13 digits
var testNum = parseInt(num.charAt(len-1)); // initialize testNum with the check digit
var tempNum;
for (var i = len-2; i > 0; i=i-2) { // begin mod 10 algorithm, starting with the next-to-last character
tempNum = parseInt(num.charAt(i))*2;
if (tempNum > 9) tempNum -= 9;
testNum += tempNum;
testNum += parseInt(num.charAt(i-1));
}
if (i == 0) {
tempNum = parseInt(num.charAt(i))*2;
if (tempNum > 9) tempNum -= 9
testNum += tempNum;
}
return testNum % 10 == 0;
}
</script>

<form action="manager.cfm?where=processpayment" method=post onsubmit="return validateForm(this);">
<table>
<tr>
<TD COLSPAN=2 ROWSPAN=3 background=white align=center valign=top><table border=0 cellpadding=0 cellspacing=0>
            <tr>
            <td align=right style="font-family: arial; font-size: 15;">Name:</td><td colspan=3><input type=name size=20 maxlength=25></td>
            </tr>
            <tr>
            <td align=right style="font-family: arial; font-size: 15;">Address:</td><td colspan=3><input type=address size=25 maxlength=25></td>
            </tr>
            <tr>
            <td align=right style="font-family: arial; font-size: 15;">City:</td><td colspan=3><input type=city size=15 maxlength=15></td>
            </tr>
            <tr>
            <td align=right style="font-family: arial; font-size: 15;">State:</td><td style="font-family: arial; font-size: 16;"><input type=state size=2 maxlength=2></td><td style="font-family: arial; font-size: 15;" align=right>Zip:</td><td><input type=zip size=5 maxlength=5></td>
            </tr>
            <tr>
            <td align=right style="font-family: arial; font-size: 15;">Email:</td><td colspan=3><input type=email size=25></td>
            </tr>
            <tr>
            <td align=right colspan=4 style="font-family: arial; font-size: 15;"><hr size=1></td>
            </tr>
            <tr>
            <td align=right style="font-family: arial; font-size: 15;">Card Type:</td><td colspan=3><select name=paytype><option>Choose Payment Type</option><option value="pp">Paypal</option><option value="MC">Mastercard</option><option value="VI">Visa</option><option value="AM">American Express</option><option value="DS">Discover</option></select></td>
            </tr>
            <tr>
            <td align=right style="font-family: arial; font-size: 15;">CC#:</td><td colspan=3><input type=ccnum size=16 maxlength=16></td>
            </tr>
            <tr>
            <td align=right style="font-family: arial; font-size: 15;">Expiration:</td><td colspan=3><input type=ccexpmonth size=2 maxlength=2>/<input type=ccexpyear size=4 maxlength=4></td>
            </tr>
            </table>
            </TD>
</tr>
</table>

Worth 500 points.

Thanks,
Rick

Roonaan

frm.name like frm.submit are kind of semi-reserver.

You can of course use frm.elements['name'], but you'd rather rename the field as frm.name is most often used to get the name property in <form name="myformname">

-r-

ASKER CERTIFIED SOLUTION

bpmurray

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

richardsimnett

ASKER

bpmurray,
Ok this thing seems to work except for one part... it does not properly verify that the freemag select box has an item selected. Can you fix this and I will award you the points.

THanks,
Rick

gops1

There is no freemag in your code

richardsimnett

ASKER

gops1,
freemag is outlined in the javascript posted in my original question. It is a multiple select box, but you are right it was overlooked in the html post.

Rick

bpmurray

Actually freemag isn't anywhere here: that's why I put that code for its validation - I just didn't know what it was. The following should work, but if you post the HTML for it, I can verify that.

var obj = getElement("freemag");
if (obj != null && obj.options.selectedIndex == 0) {
alert('You must choose your free magazine.');
return false;
}

richardsimnett

ASKER

bpmurray,
Here is the code for the select box... its pretty basic:

      <select name="freemag" multiple style="height: 200px; width: 290px;">


                        <option value="40032">Alternative Press</option>

                        <option value="43010">Amazin Magazine</option>

                        <option value="2572">American Cheerleader</option>

                        <option value="2172">American Legacy</option>

                        <option value="192">American Photo</option>

                        <option value="40977">Arthritis Today</option>

            </select>

Thanks,
Rick

bpmurray

OK, here are the changes you need:

1. The JavaScript to validate the freemag field - check that the selected item number is not -1:
var obj = getElement("freemag");
if (obj != null && obj.options.selectedindex < 0) {

2. The HTML for the freemag - include an id= attribute:
<select name="freemag" id="freemag" multiple style="height: 200px; width: 290px;">

richardsimnett

ASKER

bpmurray,
Ok I finally got this working. Your code had incorrect logic operators in the IF statements. The &&'s should be ||'s and the comparisons needed to be adjusting accordingly. It all works perfectly now.

Thanks for the help.

Rick

richardsimnett

ASKER

Here is the code that I am now using for reference, If you would like to see the code in action please visit http://www.magazinerewardcenter.com and click on one of the magazine offers, the subsequent landing page has the form and javascript up and running.

Thanks,
Rick

// Return the object from the page
function getElement(elName) {
if (document.getElementById) {
return document.getElementById(elName);
} else {
return eval("document.all." + elName);
}
}

function validateForm(frm)
{
//validate the submitted form
var obj = getElement("freemag");
if (obj == null || obj.options.selectedIndex < 0) {
alert('You must choose your free magazine.');
return false;
}

obj = getElement("yourname");
if ((obj == null) || (obj.value.split(" ").length <= 1) || (obj.value.length <= 0)) {
alert('You must enter your name.');
return false;
}

obj = getElement("address");
if (obj == null || obj.value.split(" ").length < 2 || obj.value.length <= 0) {
alert('You must enter your address.');
return false;
}

obj = getElement("city");
if (obj == null || obj.value.length <= 0) {
alert('You must enter your city.');
return false;
}

obj = getElement("state");
if (obj == null || obj.options.selectedIndex <= 0) {
alert('You must enter your state.');
return false;
}

obj = getElement("zip");
if (obj == null || obj.value.length < 5) {
alert('You must enter your zip.');
return false;
}

obj = getElement("email");
if (obj == null || obj.value.length <= 0 || isValidEmail(obj.value) == false)
{
           alert('You must enter a valid email address');
           return false;
}

      obj = getElement("paytype");
     if (obj == null || obj.options.selectedIndex <= 0) {
alert('You must select your payment / card type.');
return false;
     }

obj = getElement("ccnum");
if (obj == null || obj.value.length <= 0 || isMod10(obj.value) == false) {
alert('Your card number is invalid.');
return false;
}

obj = getElement("ccexpmonth");
if (obj == null || obj.options.selectedIndex <= 0) {
alert('Please complete your credit card expiration month.');
return false;
}

obj = getElement("ccexpyear");
if (obj == null || obj.options.selectedIndex <= 0) {
alert('Please complete your credit card expiration year.');
return false;
}

return true;
}