Solved

Javascript field validation on Radio button value I can't validate other fields

Posted on 2011-02-18
18
718 Views
Last Modified: 2012-05-11
The script below is good for checking the value of the radio button i want to do a function on but does not allow me to validate the rest of the fields, if they are empty. Only allows one field.

var cn = document.getElementsByName("bill");
      var aboveIsSelected = cn[0].checked;
      var newbillingIsSelected = cn[1].checked;
      var creditcardpaymentIsSelected = cn[2].checked;
                        
      var creditCardNameIsValid = validateCrediCardFields(document.getElementById("billingname"));
      var creditCardNameIsNotOK = !creditcardpaymentIsSelected || !creditCardNameIsValid;
     
      if( creditcardpaymentIsSelected && creditCardNameIsNotOK )
          {
           alert("Please enter credit card name")
          }

          return aboveIsSelected || newbillingIsSelected || !creditCardNameIsNotOK;
                                          function validateCrediCardFields(billingname)
           {
               // simple check here
                 return billingname.value;
           }
                                                
0
Comment
Question by:smares32371
  • 9
  • 6
  • 3
18 Comments
 
LVL 4

Expert Comment

by:andreizz
ID: 34930707
   return aboveIsSelected || newbillingIsSelected || !creditCardNameIsNotOK;

i think is the above statement if you need all of them to be filled in that you should replace || with &.
0
 

Author Comment

by:smares32371
ID: 34930766
I want two add more fields to third radio button function , two are radio button var  aboveIsSelected  and  newbillingIsSelected do nothing. The third one is a radio boutton value that has a function to check if the radio button has been selected and if so check a differnet filed to make sure its filled in. i want to check more fields on the third radio button not only one . example billingname, billaddress , billcity etc. becuse i only want to validate those fields when creditcardpaymentIsSelected  is selected.
0
 
LVL 4

Expert Comment

by:andreizz
ID: 34930816
So you have some radio buttons and if a specific radio button is selected you validate diffrent fields?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

Author Comment

by:smares32371
ID: 34930857
Yes only the third radio button  is suppose to do validation on empty fields. the script above does a function only on the third radio button but only allows to validate one field then it post the form. test the script. I tried so many differnet ways to include more fileds but no luck.
0
 

Author Comment

by:smares32371
ID: 34930908
do you understand what  i'm saying andreizz
0
 

Author Comment

by:smares32371
ID: 34930947
hello
0
 
LVL 4

Expert Comment

by:andreizz
ID: 34931871
i see that you have the part where if the third radio button is selected you tell it to validate, there just change your code to this:
http://www.w3schools.com/jS/js_form_validation.asp

It should validate all fields. If you still can't manage post also the complete html file and i'll make it for you.

Sorry for not answering, but i went to sleep.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34932697
It would help a LOT if you would show the form and how you are validating.



Here is a canonical way of validating

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26817823.html#a34881559

if you need to validate your radios, add this where it says "repeat"
var cn = theForm.bill;
  var aboveIsSelected = cn[0].checked;
  var newbillingIsSelected = cn[1].checked;
  var creditcardpaymentIsSelected = cn[2].checked;
 
  if( creditcardpaymentIsSelected) {
    var creditCardNameIsValid = validateCrediCardFields(theForm.billingname); // assuming NAME="billingname" too
    if (!creditCardNameIsValid) {
      alert("Please enter credit card name");
      theForm.billingname.focus();
      return false;
    }
  }
  if (!aboveIsSelected && !newbillingIsSelected && !creditcardpaymentIsSelected) {
    alert('Please select a billing method');
    return false;
  }
                                                
.
.
  return true;

Open in new window

0
 

Author Comment

by:smares32371
ID: 34944052
Code:
<html>
            <head>
                  <script>
                                          
                  
                  
                        function validateForm()
                              {
                                    var x=document.forms["paymentform"]["MailFirstName"].value
                                          if (x==null || x=="")
                                                  {
                                                        alert("First Name must be filled out from mailing address");
                                                        return false;
                                                  }
                                    var x=document.forms["paymentform"]["MailLastName"].value
                                          if (x==null || x=="")
                                                  {
                                                        alert("Last Name must be filled out from mailing address");
                                                        return false;
                                                  }
                                    var x=document.forms["paymentform"]["MailAddress1"].value
                                          if (x==null || x=="")
                                                  {
                                                        alert("Address must be filled out from mailing address");
                                                        return false;
                                                  }
                                    var x=document.forms["paymentform"]["MailCity"].value
                                          if (x==null || x=="")
                                                  {
                                                        alert("City must be filled out from mailing address");
                                                        return false;
                                                  }
                                    var x=document.forms["paymentform"]["MailZip"].value
                                          if (x==null || x=="")
                                                  {
                                                        alert("Zip Code must be filled out from mailing address");
                                                        return false;
                                                  }
                                    var x=document.forms["paymentform"]["MailTelArea"].value
                                          if (x==null || x=="")
                                                  {
                                                        alert("Telephone Area Code must be filled out from mailing address");
                                                        return false;
                                                  }
                                    var x=document.forms["paymentform"]["MailTel"].value
                                          if (x==null || x=="")
                                                  {
                                                        alert("Telephone must be filled out from mailing address");
                                                        return false;
                                                  }
                                    var x=document.forms["paymentform"]["BillOrdered"].value
                                          if (x==null || x=="")
                                                  {
                                                        alert("Order By must be filled out from mailing address");
                                                        return false;
                                                  }
                                                
                                                
                                                      
                                                      
                                                      
                                                            var cn = document.getElementsByName("bill");
                                                            var aboveIsSelected = cn[0].checked;
                                                            var newbillingIsSelected = cn[1].checked;
                                                            var creditcardpaymentIsSelected = cn[2].checked;
                                                            
                                                            var creditCardNameIsValid = validateCrediCardFields(document.getElementById("billingname"));
                                                            //if its not
                                                            var creditCardNameIsNotOK = !creditcardpaymentIsSelected || !creditCardNameIsValid;
                                                            
                                                            
                                                            
                                                            
                                                            
                                                            if( creditcardpaymentIsSelected && creditCardNameIsNotOK )
                                                            {
                                                                  alert("Please enter credit card name")
                                                                  
                                                            }
                                                            
                                                            
                                                            
                                                            
                                                            
                                                            return aboveIsSelected || newbillingIsSelected || !creditCardNameIsNotOK;       
                                                            function validateCrediCardFields(billingname)
                                                            {
                                                                  // simple check here
                                                                  return billingname.value;
                                                                  
                                                            }
                                                            
                                                            
                                                
                                                      
                                          
                              }
                  
                  </script>
                  
                  
                  
                  
                  
                  
                  </head>
      
      
            <body>

                  <form name="paymentform" action="" method="post" onsubmit="return validateForm()">
                                          
                                                                  <tr>
                                                                        <td align="right" class="subtxt">
                                                                               <!--- <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> ---> Name:
                                                                        </td>
                                                                        <td>
                                                                              <table cellpadding=0 cellspacing=0>
                                                                                    <tr><td class="subtxt"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT="">First Name</td>
                                                                                          <td class="subtxt">MI</td>
                                                                                          <td class="subtxt"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT="">Last Name</td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                          <td><input name="MailFirstName" size="15" maxlength="100" value="sal">&nbsp;</td>
                                                                                          <td><input name="MailMiddleName" size="1" maxlength="3" value="">&nbsp;</td>
                                                                                          <td valign="top"><input name="MailLastName" size="14" maxlength="100" value="mares"></td>
                                                                                    </tr>
                                                                              </table>
                                                                        </td>
                                                                  </tr>
                                                                  
                                                                  <!--- Firm/Company --->
                                                                  
                                                                  <tr>
                                                                         <td align="right" class="subtxt">Firm/Company:</td>
                                                                         <td><input name="MailFirm" size="42" maxlength="100" value=""></td>
                                                                  </tr>
                                                                  <!--- Address --->
                                                                  
                                                                  <tr>
                                                                        <td align="right" class="subtxt" valign="top">
                                                                              <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> Address:
                                                                        </td>
                                                                        <td><input name="MailAddress1" size="42" value="915 E. First St"><br>
                                                                               <input name="MailAddress2" size="42" value="">
                                                                        </td>
                                                                  </tr>
                                                                  <!--- City/State --->
                                                            
                                                                  <tr>
                                                                   <td align="right" class="subtxt"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> City:</td>
                                                                   <td>
                                                                              <input name="MailCity" size="25" value="Los Angeles">&nbsp;&nbsp;
                                                                              <span class="subtxt">State:</span>
                                                                              <!--- <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> --->
                                                                              <SELECT NAME="MailState"  id="MailState" style="font-size: 10px;">
                                                                                    <cfloop query="qGetState">
                                                                                          <cfoutput>
                                                                                          <OPTION VALUE="#trim(htmleditformat(qGetState.abbreviation))#" <cfif qGetState.abbreviation IS "CA">selected</cfif> >#trim(htmleditformat(qGetState.abbreviation))#</OPTION>
                                                                                          </cfoutput>
                                                                                    </cfloop>
                                                                              </SELECT>  
                                                                         </td>
                                                                  </tr>
                                                                  
                                                                  <!--- Zip --->
                                                                  
                                                                   <tr>
                                                                         <td align="right" class="subtxt"> <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> Zip:</td>
                                                                         <td><input name="MailZip" size="15" maxlength="11" value="90012"></td>
                                                                   </tr>
                                                                  
                                                                  <!--- Telephone --->
                                                                  
                                                                   <tr>
                                                                         <td align="right" class="subtxt"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> Telephone:</td>
                                                                         <td><input name="MailTelArea" size="4" maxlength="3" value="323"> <input name="MailTel" size="20" value="9970752">
                                                                        </td>
                                                                   </tr>
                                                                  <!--- Fax --->
                                                                  
                                                                   <tr>
                                                                         <td align="right" class="subtxt">Fax:</td>
                                                                         <td><input name="MailFaxArea" size="4" maxlength="3" value=""> <input name="MailFax" size="20" value="">
                                                                              </td>
                                                                   </tr>
                                                                  <!--- Ordered By --->
                                                                  
                                                                   <tr>
                                                                         <td align="right" class="subtxt"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> Ordered By:</td>
                                                                         <td><input class="textEntry1" name="BillOrdered" size="27" value="Sal Mares"></td>
                                                                   </tr>
                                                                        
                                                                                                                                          <tr>
                                                                              <td bgcolor="#EEEEEE" style="padding-left: 1; padding-top: 1; padding-bottom: 1" height="18">
                                                                                    <strong><font size="1" color="#333333">
                                                                                    &nbsp;<span class="subtxt">BILLING INFORMATION </span></font></strong>
                                                                              </td>
                                                                              <td bgcolor="#EEEEEE" valign=top align=right>
                                                                                    <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT="">
                                                                                    <font face="arial,helvetica" size=1 color="#666666">required field &nbsp;&nbsp;
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                        <!---------------------------------------------->
                                                                        <!---      Keep same BILLING INFORMATION     --->
                                                                        <!---------------------------------------------->
                                                                        
                                                                  
                                                                              <tr>
                                                                                     <td colspan="2" align="right" class="subtxt">
                                                                                          <input type="checkbox" name="changebilling" value="N">Keep same billing information
                                                                                     </td>
                                                                              </tr>
                                                                        
                                                                        
                                                                        <!---------------------------------------------->
                                                                        <!---      BILL me at the ABOVE address      --->
                                                                        <!---------------------------------------------->
                                                                         <tr>
                                                                              <td colspan="2" class="text">
                                                                                    <input name="bill" id="bill"  type="radio"  value="above">Bill me at the above address
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                        <!---------------------------------------------->
                                                                        <!---      BILL me at THIS address:          --->
                                                                        <!---------------------------------------------->
                                                                         <tr>
                                                                              <td colspan="2" class="text">
                                                                                    <input name="bill" id="bill" type="radio" value="newbilling" >Bill me at this address:
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                        
                                                                        <tr>
                                                                              <td align="right" class="subtxt"><!--- <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> ---> Name:</td>
                                                                              <td><input name="BillName" size="42" maxlength="100" value=""></td>
                                                                        </tr>
                                                                        <tr>
                                                                              <td align="right" class="subtxt">Firm/Company:</td>
                                                                              <td><input name="BillFirm" size="42" maxlength="100" value=""></td>
                                                                        </tr>
                                                                        <tr>
                                                                              <td align="right" class="subtxt" valign="top"><p style="margin-top: 4"><!--- <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> ---> Address:</p></td>
                                                                              <td><input name="BillAddress1" size="42" value=""><br>
                                                                                          <input name="BillAddress2" size="42">
                                                                              </td>
                                                                        </tr>
                                                                        <tr>
                                                                              <td align="right" class="subtxt"><!--- <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> ---> City:</td>
                                                                              <td><input name="BillCity" size="25" value="">&nbsp;&nbsp;
                                                                                    <span class="subtxt">State:</span>
                                                                                    <!--- <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> --->
                                                                                    <SELECT NAME="BillState"  id="BillState" style="font-size: 10px;">
                                                                                          <cfloop query="qGetState">
                                                                                                <cfoutput>
                                                                                                <OPTION VALUE="#trim(htmleditformat(qGetState.abbreviation))#" <cfif qGetState.abbreviation IS "CA">selected</cfif> >#trim(htmleditformat(qGetState.abbreviation))#</OPTION>
                                                                                                </cfoutput>
                                                                                          </cfloop>
                                                                                    </SELECT>  
                                                                              </td>
                                                                        </tr>
                                                                        <tr>
                                                                              <td align="right" class="subtxt"><!--- <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""> ---> Zip:</td>
                                                                              <td><input name="BillZip" size="15" maxlength="11" value=""></td>
                                                                        </tr>
                                                                  
                                                                        
                                                             
                                                                        

                                                                        <tr>
                                                                              <td>
                                                                                    &nbsp;
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                        
                                                                         <tr>
                                                                              <td class="text" colspan="2">
                                                                                    <input type="radio" name="bill" id="bill" value="creditcardpayment" checked >Pay with my Credit Card now
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                        <tr>
                                                                              <td style="background-color:#EEEEEE; padding-left: 1; padding-top: 1; padding-bottom: 1" height="18">
                                                                                    <strong><font size="1" color="#333333">
                                                                                    &nbsp;<span class="subtxt">PAY NOW WITH CREDIT CARD</span></font></strong>
                                                                              </td>
                                                                              <td style="background-color:#EEEEEE;" valign=top align=right>
                                                                                    <IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT="">
                                                                                    <font face="arial,helvetica" size=1 color="#666666">required field &nbsp;&nbsp;
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                        
                                                                        
                                                                        <tr>
                                                                              <td  style="background-color:#EEEEEE;" colspan="2"  class="subtxt"><font size="1" color="red">NOTE: For your security we do NOT save your credit card information after purchase is completed</font>
                                                                                                
                                                                              </td>
                                                                        </tr>
                                                                              
                                                                        <tr>
                                                                              <td>
                                                                                    &nbsp;
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                              <!--------------------------------->
                                                                              <!--- Pay Now With Credit Card  --->
                                                                              <!--------------------------------->
                                                                              
                                                                              
                                                                              
                                                                              
                                                                        <tr>
                                                                              <td align="right" class="subtxt"><font color="#669900"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""></font> Name on card:</td>
                                                                              <td>
                                                                                    <input type="text" class="textEntry1" name="billingname" id="billingname"  size="42"></td>
                                                                     </tr>
                                                                    
                                                                          <tr>
                                                                                <td align="right" class="subtxt"><font color="#669900"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""></font> Address Line1:</td>
                                                                              <td>
                                                                                    <input type="text" name="billingstreetaddress" id="billingstreetaddress" size="42" maxlength="255" />
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                        <tr>
                                                                              <td align="right" class="subtxt"><font color="#669900"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""></font> City State Zip:                                                                  </td>
                                                                              <td>
                                                                                    <input type="text" name="billingcity"  id="billingcity" size="18" maxlength="64" />&nbsp;<select name="billingstate" id="billingstate" size="1" >

                                                                        <cfoutput>
                                                                              <cfloop query="qGetState">
                                                                                  <option value="#abbreviation#" <cfif #abbreviation# is "CA">selected</cfif> >#trim(htmleditformat(abbreviation))#</option>
                                                                                </cfloop>
                                                                        </cfoutput>
                                                                              
                                                                              </select>&nbsp;<input type="text" name="billingzip5" id="billingzip5" size="10" maxlength="5" /><!---  - <input type="text" name="billingzip4" id="billingzip4" size="4" maxlength="4" /> --->
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                        <tr>
                                                                              <td align="right" class="subtxt"><font color="#669900"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""></font> Phone Number:</td>
                                                                              <td>
                                                                                    (<input type="text" name="billingphone1" id="billingphone1" size="3" maxlength="3" />)&nbsp;<input type="text" name="billingphone2" id="billingphone2" size="3" maxlength="3" />&nbsp;-&nbsp;<input type="text" name="billingphone3" id="billingphone3" size="4" maxlength="4" />            
                                                                              </td>
                                                                        </tr>
                                                      
                                                                              
                                                                              
                                                                              
                                                                              <tr>
                                                                                    <td align="right" class="subtxt"><font color="#669900"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""></font> Credit Card :</td>
                                                                              <td align="left" width="5%">
                                                                                    <select class="select1" name="creditcardtype">
                                                                                          <option selected value="">Select Card Type</option>
                                                                                          <option value="Visa">Visa</option>
                                                                                          <option value="Mastercard">Mastercard</option>
                                                                                          <option value="Discovery">Discovery</option>
                                                                                          <option value="AmericanExpress">American Express</option>
                                                                                    </select>&nbsp;<IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/creditcard.jpg" HEIGHT="22" ALIGN="CENTER"  >
                                                                              </td>
                                                                                    
                                                                        </tr>
                                                                        <tr>
                                                                              <td align="right" class="subtxt"><font color="#669900"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""></font> Card number:</td>
                                                                              <td><input class="textEntry1" name="creditcardnumber" id="creditcardnumber" size="22" autocomplete="off"></td>
                                                                        </tr>
                                                                        
                                                                        <tr>
                                                                              <td align="right" class="subtxt"><font color="#669900"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""></font> Expiration:</td>
                                                                              <td><select class="select2" name="expmonth">
                                                                                          <option selected value="">Month</option>

                                                                                          <option value="01">01</option>
                                                                                          <option value="02">02</option>
                                                                                          <option value="03">03</option>
                                                                                          <option value="04">04</option>
                                                                                          <option value="05">05</option>
                                                                                          <option value="06">06</option>
                                                                                          <option value="07">07</option>
                                                                                          <option value="08">08</option>
                                                                                          <option value="09">09</option>
                                                                                          <option value="10">10</option>
                                                                                          <option value="11">11</option>
                                                                                          <option value="12">12</option>
                                                                                    </select>
                                                
                                                                                    <!--- credit card year select list for next 10 years --->
                                                                                    
                                                                                    <cfset Y = 0>
                                                                                    <select class="select2" name="expyear" size="1">
                                                                                          <cfloop condition = "Y LESS THAN 11">
                                                                                                <cfset listYear = Year(now()) + Y>
                                                                                                <cfoutput>
                                                                                                <OPTION value="#listYear#">#listYear#</OPTION>
                                                                                                </cfoutput>
                                                                                                <cfset Y = Y + 1>
                                                                                          </cfloop>
                                                                                    </select>
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                         <tr>
                                                                              <td align="right" class="subtxt" valign="top"><font color="#669900"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""></font> Email Address for Receipt:</td>
                                                                              <td>
                                                                                    <input type="text" name="MailEmail" id="MailEmail"  size="40" maxlength="255"  /> <span class="smallFont">(email@website.com)</span></br></br>
                                                                              </td>
                                                                        </tr>
                                                                        
                                                                        
                                                                        
                                                                        
                                                                        <tr>
                                                                              <td align="right" align="center" height="35"><font color="#669900"><IMG SRC="<cfoutput>#request.localimageFolder#</cfoutput>/requiredText.gif" WIDTH="3" HEIGHT="6" BORDER="0" ALT=""></font></td>
                                                                              <td class="text"><i>required if paying with credit card</i></td>
                                                                        </tr>
                                                                        
                                                                              
                                                                        
                                                                        
                                                                        
                                                                        
                                                                        
                                                            <tr>
                                                                  <td align="right"></td>
                                                                  <td>
                                                                        <center>
                                                                        <br>
                                                                        <input type="submit" value="Confirm Payment Info" name="btnPreview" class="input">
                                                                        <input class="input" onclick="javascript:history.back();" type="button" value="Cancel">
                                                                        <br><br>
                                                                        </center>
                                                                  </td>
                                                            </tr>
                                                            
                                                      </table>
                                          
                                          </form>
                                          
            </body>
            </html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34944669
I put your code in the CODE field

Here is a suggested version I could not test because you posted CF instead of rendered HTML

You need to add this here

        <form name="paymentform" action="" method="post" onsubmit="return validateForm(this)">
 

<script>
   function validateForm(theForm) {
      var x=theForm["MailFirstName"].value
      if (x==null || x=="")
          {
      alert("First Name must be filled out from mailing address");
      return false;
          }
      var x=theForm["MailLastName"].value
      if (x==null || x=="")
          {
      alert("Last Name must be filled out from mailing address");
      return false;
          }
      var x=theForm["MailAddress1"].value
      if (x==null || x=="")
          {
      alert("Address must be filled out from mailing address");
      return false;
          }
      var x=theForm["MailCity"].value
      if (x==null || x=="")
          {
      alert("City must be filled out from mailing address");
      return false;
          }
      var x=theForm["MailZip"].value
      if (x==null || x=="")
          {
      alert("Zip Code must be filled out from mailing address");
      return false;
          }
      var x=theForm["MailTelArea"].value
      if (x==null || x=="")
          {
      alert("Telephone Area Code must be filled out from mailing address");
      return false;
          }
      var x=theForm["MailTel"].value
      if (x==null || x=="")
          {
      alert("Telephone must be filled out from mailing address");
      return false;
          }
      var x=theForm["BillOrdered"].value
      if (x==null || x=="")
          {
      alert("Order By must be filled out from mailing address");
      return false;
          }
        
  var cn = theForm.bill;
  var aboveIsSelected = cn[0].checked;
  var newbillingIsSelected = cn[1].checked;
  var creditcardpaymentIsSelected = cn[2].checked;
 
  if( creditcardpaymentIsSelected) {
    var creditCardNameIsValid = validateCrediCardFields(theForm.billingname); // assuming NAME="billingname" too
    if (!creditCardNameIsValid) {
      alert("Please enter credit card name");
      theForm.billingname.focus();
      return false;
    }
  }
  if (!aboveIsSelected && !newbillingIsSelected && !creditcardpaymentIsSelected) {
    alert('Please select a billing method');
    return false;
  }
  
  return true; // allow submit
}
function validateCrediCardFields(billingname) {
	// simple check here
    return billingname.value;
}
       
</script>

Open in new window

0
 

Author Comment

by:smares32371
ID: 34945791
here it is only html
<html>
		<head>
			<script>
							
			
			
				function validateForm()
					{
						var x=document.forms["paymentform"]["MailFirstName"].value
							if (x==null || x=="")
  								{
  									alert("First Name must be filled out from mailing address");
  									return false;
 					 			}
						var x=document.forms["paymentform"]["MailLastName"].value
							if (x==null || x=="")
  								{
  									alert("Last Name must be filled out from mailing address");
  									return false;
 					 			}
						var x=document.forms["paymentform"]["MailAddress1"].value
							if (x==null || x=="")
  								{
  									alert("Address must be filled out from mailing address");
  									return false;
 					 			}
						var x=document.forms["paymentform"]["MailCity"].value
							if (x==null || x=="")
  								{
  									alert("City must be filled out from mailing address");
  									return false;
 					 			}
						var x=document.forms["paymentform"]["MailZip"].value
							if (x==null || x=="")
  								{
  									alert("Zip Code must be filled out from mailing address");
  									return false;
 					 			}
						var x=document.forms["paymentform"]["MailTelArea"].value
							if (x==null || x=="")
  								{
  									alert("Telephone Area Code must be filled out from mailing address");
  									return false;
 					 			}
						var x=document.forms["paymentform"]["MailTel"].value
							if (x==null || x=="")
  								{
  									alert("Telephone must be filled out from mailing address");
  									return false;
 					 			}
						var x=document.forms["paymentform"]["BillOrdered"].value
							if (x==null || x=="")
  								{
  									alert("Order By must be filled out from mailing address");
  									return false;
 					 			}
								
								
									
									
									
										var cn = document.getElementsByName("bill");
										var aboveIsSelected = cn[0].checked;
										var newbillingIsSelected = cn[1].checked;
										var creditcardpaymentIsSelected = cn[2].checked;
										
										var creditCardNameIsValid = validateCrediCardFields(document.getElementById("billingname"));
										//if its not
										var creditCardNameIsNotOK = !creditcardpaymentIsSelected || !creditCardNameIsValid;
										
										
										
										
										
										if( creditcardpaymentIsSelected && creditCardNameIsNotOK ) 
										{
											alert("Please enter credit card name")
											
										}
										
										
										
										
										
										return aboveIsSelected || newbillingIsSelected || !creditCardNameIsNotOK; 	
										function validateCrediCardFields(billingname) 
										{
											// simple check here
											return billingname.value;
											
										}
										
										
								
									
							
					}
			
			</script>
			
			
			
			
			
			
			</head>
	
	
		<body>

			<form name="paymentform" action="" method="post" onsubmit="return validateForm()">
							
											<tr>
												<td align="right" class="subtxt">
													 Name:
												</td>
												<td>
													<table cellpadding=0 cellspacing=0>
														<tr><td class="subtxt">First Name</td>
															<td class="subtxt">MI</td>
															<td class="subtxt">Last Name</td>
														</tr>
														<tr>
															<td><input name="MailFirstName" size="15" maxlength="100" value="sal">&nbsp;</td>
															<td><input name="MailMiddleName" size="1" maxlength="3" value="">&nbsp;</td>
															<td valign="top"><input name="MailLastName" size="14" maxlength="100" value="mares"></td>
														</tr>
													</table>
												</td>
											</tr>
											
											
											
											<tr>
												 <td align="right" class="subtxt">Firm/Company:</td>
												 <td><input name="MailFirm" size="42" maxlength="100" value=""></td>
											</tr>
											
											
											<tr>
												<td align="right" class="subtxt" valign="top">
													 Address:
												</td>
												<td><input name="MailAddress1" size="42" value="915 E. First St"><br>
													 <input name="MailAddress2" size="42" value="">
												</td>
											</tr>
											
										
											<tr>
											 <td align="right" class="subtxt"> City:</td>
											 <td>
													<input name="MailCity" size="25" value="Los Angeles">&nbsp;&nbsp; 
													<span class="subtxt">State:</span>
													
													<select class="select1" name="creditcardtype">
															<option selected value="">Select Card Type</option>
															<option value="Visa">Visa</option>
															<option value="Mastercard">Mastercard</option>
															<option value="Discovery">Discovery</option>
															<option value="AmericanExpress">American Express</option>
														</select>													
													
													<SELECT NAME="MailState"  id="MailState" style="font-size: 10px;">
														<option value="CA">CA</option> 										
													</SELECT>   
												 </td>
											</tr>
											
											
											
											 <tr>
												 <td align="right" class="subtxt">  Zip:</td>
												 <td><input name="MailZip" size="15" maxlength="11" value="90012"></td>
											 </tr>
											 
											
											
											 <tr>
												 <td align="right" class="subtxt"> Telephone:</td>
												 <td><input name="MailTelArea" size="4" maxlength="3" value="323"> <input name="MailTel" size="20" value="9970752">
												</td>
											 </tr>
											
											
											
											 <tr>
												 <td align="right" class="subtxt">Fax:</td>
												 <td><input name="MailFaxArea" size="4" maxlength="3" value=""> <input name="MailFax" size="20" value="">
													</td>
											 </tr>
											
											
											 <tr>
												 <td align="right" class="subtxt"> Ordered By:</td>
												 <td><input class="textEntry1" name="BillOrdered" size="27" value="Sal Mares"></td>
											 </tr>
												
																							<tr>
													<td bgcolor="#EEEEEE" style="padding-left: 1; padding-top: 1; padding-bottom: 1" height="18">
														<strong><font size="1" color="#333333">
														&nbsp;<span class="subtxt">BILLING INFORMATION </span></font></strong>
													</td>
													<td bgcolor="#EEEEEE" valign=top align=right>
														
														<font face="arial,helvetica" size=1 color="#666666">required field &nbsp;&nbsp;
													</td>
												</tr>
												
												
												
											
													<tr>
														 <td colspan="2" align="right" class="subtxt">
															<input type="checkbox" name="changebilling" value="N">Keep same billing information
														 </td>
													</tr>
												
												
												
												 <tr>
													<td colspan="2" class="text">
														<input name="bill" id="bill"  type="radio"  value="above">Bill me at the above address
													</td>
												</tr> 
												
											
												 <tr>
													<td colspan="2" class="text">
														<input name="bill" id="bill" type="radio" value="newbilling" >Bill me at this address:
													</td>
												</tr>
												
												
												<tr>
													<td align="right" class="subtxt">Name:</td>
													<td><input name="BillName" size="42" maxlength="100" value=""></td>
												</tr>
												<tr>
													<td align="right" class="subtxt">Firm/Company:</td>
													<td><input name="BillFirm" size="42" maxlength="100" value=""></td>
												</tr>
												<tr>
													<td align="right" class="subtxt" valign="top"><p style="margin-top: 4"> Address:</td>
													<td><input name="BillAddress1" size="42" value=""><br>
															<input name="BillAddress2" size="42">
													</td>
												</tr>
												<tr>
													<td align="right" class="subtxt"> City:</td>
													<td><input name="BillCity" size="25" value="">&nbsp;&nbsp; 
														<span class="subtxt">State:</span>
														
														<SELECT NAME="BillState"  id="BillState" style="font-size: 10px;">
															<option value="CA">CA</option>
														</SELECT>   
													</td>
												</tr>
												<tr>
													<td align="right" class="subtxt"> Zip:</td>
													<td><input name="BillZip" size="15" maxlength="11" value=""></td>
												</tr>
											
												
 										
												

												<tr>
													<td>
														&nbsp;
													</td>
												</tr>
												
												
												 <tr>
													<td class="text" colspan="2">
														<input type="radio" name="bill" id="bill" value="creditcardpayment" checked >Pay with my Credit Card now
													</td>
												</tr>
												
												<tr>
													<td style="background-color:#EEEEEE; padding-left: 1; padding-top: 1; padding-bottom: 1" height="18">
														<strong><font size="1" color="#333333">
														&nbsp;<span class="subtxt">PAY NOW WITH CREDIT CARD</span></font></strong>
													</td>
													<td style="background-color:#EEEEEE;" valign=top align=right>
														
														<font face="arial,helvetica" size=1 color="#666666">required field &nbsp;&nbsp;
													</td>
												</tr>
												
												
												
												<tr>
													<td  style="background-color:#EEEEEE;" colspan="2"  class="subtxt"><font size="1" color="red">NOTE: For your security we do NOT save your credit card information after purchase is completed</font>
																
													</td>
												</tr>
													
												<tr>
													<td>
														&nbsp;
													</td>
												</tr>
												
												
													
													
													
													
												<tr>
													<td align="right" class="subtxt"><font color="#669900"></font> Name on card:</td>
													<td>
														<input type="text" class="textEntry1" name="billingname" id="billingname"  size="42"></td>
											   </tr>
											  
											  	<tr>
											  		<td align="right" class="subtxt"><font color="#669900"></font> Address Line1:</td>
													<td>
														<input type="text" name="billingstreetaddress" id="billingstreetaddress" size="42" maxlength="255" />
													</td>
												</tr>
												
												<tr>
													<td align="right" class="subtxt"><font color="#669900"></font> City State Zip:											</td>
													<td>
														<input type="text" name="billingcity"  id="billingcity" size="18" maxlength="64" />&nbsp;<select name="billingstate" id="billingstate" size="1" >

												
										    			<option value="CA">CA </option>
										  			
													
													</select>&nbsp;<input type="text" name="billingzip5" id="billingzip5" size="10" maxlength="5" />
													</td>
												</tr>
												
												<tr>
													<td align="right" class="subtxt"><font color="#669900"></font> Phone Number:</td>
													<td>
														(<input type="text" name="billingphone1" id="billingphone1" size="3" maxlength="3" />)&nbsp;<input type="text" name="billingphone2" id="billingphone2" size="3" maxlength="3" />&nbsp;-&nbsp;<input type="text" name="billingphone3" id="billingphone3" size="4" maxlength="4" />		
													</td>
												</tr>
									
													
													
													
													<tr>
														<td align="right" class="subtxt"><font color="#669900"></font> Credit Card :</td>
													<td align="left" width="5%">
														<select class="select1" name="creditcardtype">
															<option selected value="">Select Card Type</option>
															<option value="Visa">Visa</option>
															<option value="Mastercard">Mastercard</option>
															<option value="Discovery">Discovery</option>
															<option value="AmericanExpress">American Express</option>
														</select>
													</td>
														
												</tr>
												<tr>
													<td align="right" class="subtxt"><font color="#669900"></font> Card number:</td>
													<td><input class="textEntry1" name="creditcardnumber" id="creditcardnumber" size="22" autocomplete="off"></td>
												</tr>
												
												<tr>
													<td align="right" class="subtxt"><font color="#669900"></font> Expiration:</td>
													<td><select class="select2" name="expmonth">
															<option selected value="">Month</option>

															<option value="01">01</option>
															<option value="02">02</option>
															<option value="03">03</option>
															<option value="04">04</option>
															<option value="05">05</option>
															<option value="06">06</option>
															<option value="07">07</option>
															<option value="08">08</option>
															<option value="09">09</option>
															<option value="10">10</option>
															<option value="11">11</option>
															<option value="12">12</option>
														</select> 
								
														 
														
														
														<select class="select2" name="expyear" size="1">
															
																<OPTION value="2011">2011</OPTION>
																
														</select>
													</td>
												</tr> 
												
												 <tr>
													<td align="right" class="subtxt" valign="top"><font color="#669900"></font> Email Address for Receipt:</td>
													<td>
														<input type="text" name="MailEmail" id="MailEmail"  size="40" maxlength="255"  /> <span class="smallFont">(email@website.com)</span></br></br>
													</td>
												</tr> 
												
												
												
												
												<tr>
													<td align="right" align="center" height="35"><font color="#669900"></font></td>
													<td class="text"><i>required if paying with credit card</i></td>
												</tr> 
												
													
												
												
												
												
												
										<tr>
											<td align="right"></td>
											<td>
												<center>
												<br>
												<input type="submit" value="Confirm Payment Info" name="btnPreview" class="input">
												<input class="input" onclick="javascript:history.back();" type="button" value="Cancel">
												<br><br>
												</center>
											</td>
										</tr>
										
									</table>
							
							</form>
							
		</body>
		</html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34945875
Did you try my code? I can look tomorrow if there are typos or something
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34946183
tested my code with your html.
Seems to work as expected.
0
 

Author Comment

by:smares32371
ID: 34947059
I know that the javascript works but I want to validate more fields when the third radio button is selected like also billingstreetaddress

0
 

Author Comment

by:smares32371
ID: 34948320
Hello
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34948797
I was in bed. I'l look in about 2 hours.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 34949136
I normally charge for this. It is not answering questions but is custom scripting.

I have not tested the code below, let me know if there are issues.
<script>
function validateForm(theForm) {
  var cn = theForm.bill;
  var aboveIsSelected = cn[0].checked;
  var newbillingIsSelected = cn[1].checked;
  var creditcardpaymentIsSelected = cn[2].checked;

  if (aboveIsSelected) {
    if (!validateMailing(theForm)) return false;
  }
  else if (newbillingIsSelected) {
    if (!validateNewBilling(theForm)) return false;
  }
  else if( creditcardpaymentIsSelected) {
    if (!validateCreditCardFields(theForm)) return false;
  }
  else {
    alert('Please select a billing method');
    return false;
  }
  
  return true; // allow submit
}

function validateNewBilling(theForm) {
  var x=theForm["BillName"].value
  if (x==null || x=="") {
    alert("First Name must be filled out from mailing address");
    theForm["BillName"].focus();
    return false;
  }
  var x=theForm["BillFirm"].value
  if (x==null || x=="") {
    alert("Firm must be filled out from mailing address");
    theForm["BillFirm"].focus();
    return false;
  }
  var x=theForm["BillAddress1"].value
  if (x==null || x=="") {
    alert("Address must be filled out from mailing address");
    theForm["BillAddress1"].focus();
    return false;
  }
  var x=theForm["BillCity"].value
  if (x==null || x=="") {
    alert("City must be filled out from mailing address");
    theForm["BillCity"].focus();
    return false;
  }
  var x=theForm["BillState"].value
  if (x==null || x=="") {
    alert("State must be filled out from mailing address");
    theForm["MailFirstName"].focus();
    return false;
  }
  var x=theForm["BillZip"].value
  if (x==null || x=="") {
    alert("Zip must be filled out from mailing address");
    theForm["BillZip"].focus();
    return false;
  }
  return true;
}
function validateMailing(theForm) {
  var x=theForm["MailFirstName"].value
  if (x==null || x=="") {
    alert("First Name must be filled out from mailing address");
    theForm["MailFirstName"].focus();
    return false;
  }
  var x=theForm["MailLastName"].value
  if (x==null || x=="") {
    alert("Last Name must be filled out from mailing address");
    theForm["MailLastName"].focus();
    return false;
  }
  var x=theForm["MailAddress1"].value
  if (x==null || x=="") {
    alert("Address must be filled out from mailing address");
    theForm["MailAddress1"].focus();
    return false;
  }
  var x=theForm["MailCity"].value
  if (x==null || x=="") {
    alert("City must be filled out from mailing address");
    theForm["MailCity"].focus();
    return false;
  }
  var x=theForm["MailZip"].value
  if (x==null || x=="") {
    alert("Zip Code must be filled out from mailing address");
    theForm["MailZip"].focus();
    return false;
  }
  var x=theForm["MailTelArea"].value
  if (x==null || x=="") {
    alert("Telephone Area Code must be filled out from mailing address");
    theForm["MailTelArea"].focus();
    return false;
  }
  var x=theForm["MailTel"].value
  if (x==null || x=="") {
    alert("Telephone must be filled out from mailing address");
    theForm["MailTel"].focus();
    return false;
  }
  var x=theForm["BillOrdered"].value
  if (x==null || x=="") {
    alert("Order By must be filled out from mailing address");
    theForm["BillOrdered"].focus();
    return false;
  }
  return true
}
function validateCreditCardFields(theForm) {
  if (theForm.creditcardtype.selectedIndex<1) {
    alert("Please select a creditcard");
    theForm["creditcardtype"].focus();
    return false;
  }
  var x=theForm["creditcardnumber"].value
  if (x==null || x=="") {
    alert("Please select a creditcard");
    theForm["creditcardtype"].focus();
    return false;
  }
  return true;
}
       
</script>

Open in new window

0
 

Author Closing Comment

by:smares32371
ID: 34954290
what a  genius
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 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