只有在指定样式存在的情况下才使用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