只有在指定樣式存在的情況下才使用JavaScript驗證字段 - 沒有jQuery驗證

Question

我有一個窗體，只有在相應的單選按鈕被選中時才需要。我插入這個網站有太多的jQuery問題，所以我希望只用JavaScript做驗證 - 我無法讓jQuery Validate插件正常工作。我是一名JavaScript和jQuery初學者。

根據單選按鈕，列表元素中包含使用jQuery顯示/隱藏的字段。列表元素以內聯「display：none;」開頭。有沒有JavaScript的方法，我可以運行驗證只有當ID爲列表項的內聯樣式是「display：block」？

我一直在這方面工作太久，而且會變得瘋狂。

這裏是我的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> 

這裏是jQuery的我使用：

  $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(); 
          } 
         }); 

      }); 

，這裏是我的驗證腳本的基本結構至今：

  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; 
       } 


      } 

Answer 1

你可以這樣用

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

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

一個例子fiddle