目前我正在使用JavaScript练习自定义表单验证。我创建了一个表单，从用户那里获取产品详细信息输入，然后通过JavaScript我正在进行验证。
当用户选择＆＃34;产品类型＆＃34;物理然后激活三个输入字段。当用户单击“保存”按钮时，验证将开始。
验证工作正常，直到它开始验证产品类型及其相关字段。
首先程序检查＆＃34;产品类型＆＃34;是物理的还是可下载的，那么如果产品是物理的，那么它开始验证产品重量，产品深度和产品高度。它应该继续进一步验证其他条件，但它只是跳出来。我不知道为什么会这样。
//function to check input data and save it.
function save_data(){
var product_name_value = product_name.value;
var product_price_value = product_price.value;
var product_category_value = product_category_selector.value;
var product_type_value = product_type_selector.value;
var product_height = document.getElementById('product-height-field');
var product_weight = document.getElementById('product-weight-field');
var product_depth = document.getElementById('product-depth-field');
var product_weight_value = product_weight.value;
var product_height_value = product_height.value;
var product_depth_value = product_depth.value;;
var product_link_value = product_link.value;
var product_brand_value = product_brand.value;
var product_tags_value = product_tags.value;
var product_description_value = product_description.value;
//To check if any value is blank.
if(product_name_value == ""){
alert("Kindly provide product name.");
product_name.focus();
product_name.style.borderColor = "#e54b4b";
}
else if(product_price_value == ""){
alert("Kindly provide product price.");
product_price.focus();
product_price.style.borderColor = "#e54b4b";
}
else if(product_category_value == "Select Category"){
alert("Kindly select a product category.");
product_category_selector.focus();
product_category_selector.style.borderColor = "#e54b4b";
}
else if(product_type_value == "Select Type"){
alert("Kindly select product type.");
product_type_selector.focus();
product_type_selector.style.borderColor = "#e54b4b";
}
else if(product_type_value == "Downloadable"){
if(product_link_value == ""){
alert("Kindly provide download link of the product.");
product_link.focus();
product_link.style.borderColor = "#e54b4b";
}
}
else if(product_type_value == "Physical"){
if(product_weight_value == ""){
alert("Kindly provide product weight.");
product_weight.focus();
product_weight.style.borderColor = "#e54b4b";
}
else if(product_height_value == ""){
alert("Kindly provide product height.");
product_height.focus();
product_height.style.borderColor = "#e54b4b";
}
else if(product_depth_value == ""){
alert("Kindly provide product depth");
product_depth.focus();
product_depth.style.borderColor = "#e54b4b";
}
else{
}
}
else if(product_brand_value == ""){
alert("Kindly provide product brand.");
product_brand.focus();
product_brand.style.borderColor = "#e54b4b";
}
else if(product_tags_value == ""){
alert("Kindly provide product tags.");
product_tags.focus();
product_tags.style.borderColor = "#e54b4b";
}
else if(product_description_value == "" || product_description_value.length < 150){
alert("The product cannot be left blank and cannot be less than 150 characters.");
product_description.focus();
product_description.style.borderColor = "#e54b4b";
}
else{
alert("Product Details save successfully.");
}
}<div id="primary-details" class="details-blocks">
<table>
<tbody>
<tr>
<td class="product-details">Product Name* : </td>
<td class="product-detail-input"><input type="text" name="product-name" id="product-name-field"></td>
</tr>
<tr>
<td class="product-details">Product Price* : </td>
<td class="product-detail-input"><input type="number" name="product-price" id="product-price-field"></td>
</tr>
<tr>
<td class="product-details">Product Category* : </td>
<td class="product-detail-input">
<select id="product-category">
<option selected hidden>Select Category</option>
</select>
</td>
</tr>
<tr>
<td class="product-details">Product Type* : </td>
<td class="product-detail-input">
<select id="product-type">
<option selected hidden>Select Type</option>
<option name = "product type" value="Physical">Physical</option>
<option name = "product type" value="Downloadable">Downloadable</option>
</select>
</td>
</tr>
<tr id="product-weight">
<td class="product-details">Product Weight* : </td>
<td class="product-detail-input"><input type="text" name="product-weight" id="product-weight-field"></td>
</tr>
<tr id="product-height">
<td class="product-details">Product Height* : </td>
<td class="product-detail-input"><input type="text" name="product-height" id="product-height-field"></td>
</tr>
<tr id="product-depth">
<td class="product-details">Product Depth* : </td>
<td class="product-detail-input"><input type="text" name="product-depth" id="product-depth-field"></td>
</tr>
<tr>
<td class="product-details">Product Brand* : </td>
<td class="product-detail-input"><input type="text" name="product-brand" id="product-brand-field"></td>
</tr>
<tr id="product-download">
<td class="product-details">Product Download Link* : </td>
<td class="product-detail-input"><input type="text" name="product-download-link" id="product-brand-field"></td>
</tr>
<tr>
<td class="product-details">Product Tags* : </td>
<td class="product-detail-input"><input type="text" name="product-tags" id="product-tags-field"></td>
</tr>
</tbody>
</table>
</div>
<!-- primary detail section -->
<!-- description block -->
<div id="description-block">
<p>Product Description*:</p>
<textarea id="description-textfield"></textarea>
</div>
<!-- description block -->
<button id="save-button" class="control-buttons">Save</button>
答案 0 :(得分：1)
肯定是因为你正在使用else if并且你应该只使用if？
Type必须是Downloadable或Physical，所以你肯定会进入其中一个if语句。因此，您之后不会立即点击if中的else if语句。因此，我建议您更改一行：
else if(product_brand_value == ""){
到
if(product_brand_value == ""){
尝试一下，看看它是怎么回事。否则，如果订单对您来说太重要，您可以移动“产品类型”＆＃39;否则if语句到验证底部。
让我知道这是否能解决任何问题！
答案 1 :(得分：1)
如果条件只是简单地使用＆＃34;而不是使用else，那么＆＃34;检查所有控件的条件。这很容易。
use a boolean variable to check validity status bool isValid=true;
bool isValid=true;
//To check if any value is blank.
if(product_name_value == ""){
alert("Kindly provide product name.");
product_name.focus();
product_name.style.borderColor = "#e54b4b";
isValid=false;
}
if(product_price_value == ""){
alert("Kindly provide product price.");
product_price.focus();
product_price.style.borderColor = "#e54b4b";
isValid=false;
}
if(product_category_value == "Select Category"){
alert("Kindly select a product category.");
product_category_selector.focus();
product_category_selector.style.borderColor = "#e54b4b";
isValid=false;
}
if(product_type_value == "Select Type"){
alert("Kindly select product type.");
product_type_selector.focus();
product_type_selector.style.borderColor = "#e54b4b";
isValid=false;
}
if(product_type_value == "Downloadable"){
if(product_link_value == ""){
alert("Kindly provide download link of the product.");
product_link.focus();
product_link.style.borderColor = "#e54b4b";
isValid=false;
}
}
else if(product_type_value == "Physical"){
if(product_weight_value == ""){
alert("Kindly provide product weight.");
product_weight.focus();
product_weight.style.borderColor = "#e54b4b";
isValid=false;
}
if(product_height_value == ""){
alert("Kindly provide product height.");
product_height.focus();
product_height.style.borderColor = "#e54b4b";
isValid=false;
}
if(product_depth_value == ""){
alert("Kindly provide product depth");
product_depth.focus();
product_depth.style.borderColor = "#e54b4b";
isValid=false;
}
}
if(product_brand_value == ""){
alert("Kindly provide product brand.");
product_brand.focus();
product_brand.style.borderColor = "#e54b4b";
isValid=false;
}
if(product_tags_value == ""){
alert("Kindly provide product tags.");
product_tags.focus();
product_tags.style.borderColor = "#e54b4b";
isValid=false;
}
if(product_description_value == "" || product_description_value.length < 150){
alert("The product cannot be left blank and cannot be less than 150 characters.");
product_description.focus();
product_description.style.borderColor = "#e54b4b";
isValid=false;
}
//else{
// alert("Product Details save successfully.");
//}
if(isValid==true)
{alert("Product Details save successfully.");
}
}
如果变量为false，则将变量设为false，最后检查它以显示警报消息。