Validate field with JavaScript only if specified style is present - no jQuery Validate

I have a form with fields that are only required if the corresponding radio button is checked. The site I'm plugging this into has too many issues with jQuery so I am hoping to do the validation with only JavaScript - I can't get the jQuery Validate plugin to work correctly. I am a beginner with JavaScript and jQuery.

There are fields contained within list elements that use jQuery show/hide depending on the radio button. The list elements start with an inline, "display: none;". Is there a way with JavaScript that I can run the validation only if the inline style of the list item with an id is "display: block"?

I have been working on this for way too long and am going nuts.

Here is my HTML:

        <form name="pancettaForm" method="post" action="http://lizlantz.com/lcform.php" id="pancettaForm" onsubmit="return validateForm()">
                <input type="hidden" value="Pancetta Order Update" name="subject"> 
                <input type="hidden" value="cookware/partners_10151_-1_20002" name="redirect">
                <ul>
                    <li>
                    <label for="updateShip">I'd like to:</label> 
                        <input id="ship-address" name="updateShip" type="radio" value="update-ship-address" class="required"/> Have pancetta shipped to a different address than my skillet<br />
                        <input id="ship-date" name="updateShip" type="radio" value="update-ship-date" class="required" /> Have pancetta shipped sooner than June 14, 2013 <br />
                        <input id="ship-both" name="updateShip" type="radio" value="update-both"  class="required"/> Make changes to both the shipping address and shipping date
                    </li>
                    <li>                
                    <label for="order-number"><em>*</em>Order Number (available in order confirmation email):</label> 
                        <input type="text" name="order-number" class="required">
                    </li>             
                    <li>                
                    <label for="full-name"><em>*</em>Recipient Full Name:</label> 
                        <input type="text" name="full-name" class="required">
                    </li>   
                    <li id="address" style="display: none;">
                        <label for="address">
                            <em>*</em>Address
                        </label> 
                        <input type="text" name="address">
                        <label for="address2">
                            Address Line 2
                        </label> 
                        <input type="text" name="address2">
                    </li>
                    <li id="address2" style="display: none;">
                        <label for="city">
                            <em>*</em>City
                        </label> 
                        <input type="text" name="city">
                        <label for="state">
                            <em>*</em>State
                        </label> 
                        <select name="state">
                            <option>- Select State -</option>                            
                            <option value="AL">Alabama</option>
                            <option value="AK">Alaska</option>
                        </select>
                        <label for="zip">
                            <em>*</em>Zip Code
                        </label> 
                        <input type="text" name="zip">
                    </li>
                    <li id="new-ship-date" style="display: none;">
                        <label for="New Ship Date"><em>*</em>New Ship Date (Saturday-Tuesday delivery not available):</label>                 
                        <select name="newShip" id="newShip">
                            <option>- Select -</option>
                            <option value="Wednesday, May 22">Wednesday, May 22</option>
                            <option value="Thursday, May 23">Thursday, May 23</option>
                        </select>                            
                    </li>                       
                    <li>
                        <label for="phone">
                            <em>*</em>Phone (for delivery questions)
                        </label> 
                        <input type="text" name="phone" class="required">
                    </li>               
                </ul>
                       <input type="submit" id="button" name="submit"  value="Update Pancetta">

              </form>

Here is the jQuery I am using:

            $j(document).ready(function() {
                $j('#pancettaForm').change(function () {
                           $j('#address,#address2,#new-ship-date').hide();
                           if ($j('#ship-address').prop('checked')) {
                              $j('#address, #address2').show();
                           }
                           else if ($j('#ship-date').prop('checked')) {
                              $j('#new-ship-date').show();
                           }
                           else if ($j('#ship-both').prop('checked')) {
                              $j('#address, #address2, #new-ship-date').show();
                           }
                        });

            });

and here is the general structure of my validation script so far:

            function validateForm()
            {
                var x=document.forms["pancettaForm"]["order-number"].value;
                if (x==null || x=="")
                  {
                  alert("Please provide your order number.");
                  return false;
                  }
                var x=document.forms["pancettaForm"]["full-name"].value;
                if (x==null || x=="")
                  {
                  alert("Please provide your full name.");
                  return false;
                  }

                var x=document.forms["pancettaForm"]["Address1"].value;
                if (x==null || x=="")
                  {
                  alert("Please provide your address.");
                  return false;
                  }
                var x=document.forms["pancettaForm"]["city"].value;
                if (x==null || x=="")
                  {
                  alert("Please provide your city.");
                  return false;
                  }

               if( document.pancettaForm.state.value == "- Select State -" )
               {
                 alert( "Please provide your state." );
                 return false;
               }
                var x=document.forms["pancettaForm"]["zip"].value;
                if (x==null || x=="")
                  {
                  alert("Please provide your zip code.");
                  return false;
                  }  


                var x=document.forms["pancettaForm"]["Zip_Code"].value;
                if (x==null || x=="")
                  {
                  alert("Please provide your zip code.");
                  return false;
                  } 

                  if( document.pancettaForm.newShip.value == "- Select Date -" )
               {
                 alert( "Please select the size of the product you would like to register.  " );
                 return false;
               }


            }

Answers


You can use like this

var display= document.getElementById('someID').style.display;

if(display=='block')
 {
   //do validation here.
 }

An example fiddle


Need Your Help

Operator == cannot be applied to java.lang.String char

java android netbeans

I do not get any errors in NetBeans Java Application, but I do get the mentioned error when applying the code into a Android Java Project. I tried if (alpha[i].equals(c)) { but then I would get no

catching errors from Postgresql to PHP

php sql postgresql error-handling

I want to catch and show the error(in a way that i choose) of a query on the web page using php . So instead of the code below

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.