我有一个表单，其中包含仅在选中相应的单选按钮时才需要的字段。我要插入的网站有太多 jQuery 问题，所以我希望只使用 JavaScript 进行验证 - 我无法让 jQuery Validate 插件正常工作。我是 JavaScript 和 jQuery 的初学者。
列表元素中包含的字段根据单选按钮使用 jQuery 显示/隐藏。列表元素以内联“display: none;”开头。只有当带有 id 的列表项的内联样式是“显示：块”时，我才能运行验证的 JavaScript 方法？
我已经为此工作太久了，我快疯了。
这是我的 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;
}
}