Solved

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

Posted on 2011-02-18
18
711 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
 

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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now