-1
目前我正在练习使用JavaScript的自定义表单验证。我制作了一个表单，该表单从用户接收产品详细信息，然后通过JavaScript进行验证。嵌套，如果其他从主跳出如果其他在javascript
当用户选择“产品类型”物理然后三个输入字段被激活。当用户点击保存按钮时，验证开始。直到它开始验证产品类型和它的相关领域
验证工作正常。
首先该程序检查“产品类型”是否是物理或可下载的，那么，如果该产品是物理然后其启动验证产品的重量，产品深度和产品高度。它应该继续进一步验证其他人，如果条件，但它只是跳出来。我不知道为什么会发生这种情况。
//function to check input data and save it.
function save_data(){
\t 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;
\t
\t //To check if any value is blank.
\t if(product_name_value == ""){
\t \t alert("Kindly provide product name.");
\t \t product_name.focus();
\t \t product_name.style.borderColor = "#e54b4b";
\t }
\t else if(product_price_value == ""){
\t \t alert("Kindly provide product price.");
\t \t product_price.focus();
\t \t product_price.style.borderColor = "#e54b4b";
\t }
\t
\t else if(product_category_value == "Select Category"){
\t \t alert("Kindly select a product category.");
\t \t product_category_selector.focus();
\t \t product_category_selector.style.borderColor = "#e54b4b";
\t }
\t
\t else if(product_type_value == "Select Type"){
\t \t alert("Kindly select product type.");
\t \t product_type_selector.focus();
\t \t product_type_selector.style.borderColor = "#e54b4b";
\t }
\t
\t else if(product_type_value == "Downloadable"){
\t \t
\t \t if(product_link_value == ""){
\t \t \t alert("Kindly provide download link of the product.");
\t \t \t product_link.focus();
\t \t \t product_link.style.borderColor = "#e54b4b";
\t \t }
\t }
\t
\t else if(product_type_value == "Physical"){
\t \t
\t \t if(product_weight_value == ""){
\t \t \t alert("Kindly provide product weight.");
\t \t \t product_weight.focus();
\t \t \t product_weight.style.borderColor = "#e54b4b";
\t \t }
\t \t else if(product_height_value == ""){
\t \t \t alert("Kindly provide product height.");
\t \t \t product_height.focus();
\t \t \t product_height.style.borderColor = "#e54b4b";
\t \t }
\t \t
\t \t else if(product_depth_value == ""){
\t \t \t alert("Kindly provide product depth");
\t \t \t product_depth.focus();
\t \t \t product_depth.style.borderColor = "#e54b4b";
\t \t }
\t \t else{
\t \t \t
\t \t }
\t }
\t
\t else if(product_brand_value == ""){
\t \t alert("Kindly provide product brand.");
\t \t product_brand.focus();
\t \t product_brand.style.borderColor = "#e54b4b";
\t }
\t
\t else if(product_tags_value == ""){
\t \t alert("Kindly provide product tags.");
\t \t product_tags.focus();
\t \t product_tags.style.borderColor = "#e54b4b";
\t }
\t
\t else if(product_description_value == "" || product_description_value.length < 150){
\t \t alert("The product cannot be left blank and cannot be less than 150 characters.");
\t \t product_description.focus();
\t \t product_description.style.borderColor = "#e54b4b";
\t }
\t
\t else{
\t \t alert("Product Details save successfully.");
\t }
}<div id="primary-details" class="details-blocks">
\t \t \t \t \t \t \t
<table>
\t <tbody>
\t \t <tr>
\t \t \t <td class="product-details">Product Name* : </td>
\t \t \t <td class="product-detail-input"><input type="text" name="product-name" id="product-name-field"></td>
\t \t </tr>
\t \t <tr>
\t \t <td class="product-details">Product Price* : </td>
\t \t \t <td class="product-detail-input"><input type="number" name="product-price" id="product-price-field"></td>
\t \t </tr>
\t \t <tr>
\t \t \t <td class="product-details">Product Category* : </td>
\t \t \t <td class="product-detail-input">
\t \t \t \t <select id="product-category">
\t \t \t \t \t <option selected hidden>Select Category</option>
\t \t \t \t </select>
\t \t \t </td>
\t \t </tr>
\t \t <tr>
\t \t \t <td class="product-details">Product Type* : </td>
\t \t \t <td class="product-detail-input">
\t \t \t <select id="product-type">
\t \t \t \t <option selected hidden>Select Type</option>
\t \t \t \t \t <option name = "product type" value="Physical">Physical</option>
\t \t \t \t \t <option name = "product type" value="Downloadable">Downloadable</option>
\t \t \t \t </select>
\t \t \t \t </td>
\t \t </tr>
\t \t <tr id="product-weight">
\t \t \t <td class="product-details">Product Weight* : </td>
\t \t \t <td class="product-detail-input"><input type="text" name="product-weight" id="product-weight-field"></td>
\t \t </tr>
\t \t <tr id="product-height">
\t \t \t <td class="product-details">Product Height* : </td>
\t \t \t <td class="product-detail-input"><input type="text" name="product-height" id="product-height-field"></td>
\t \t </tr>
\t \t <tr id="product-depth">
\t \t <td class="product-details">Product Depth* : </td>
\t \t \t <td class="product-detail-input"><input type="text" name="product-depth" id="product-depth-field"></td>
\t \t </tr>
\t \t <tr>
\t \t <td class="product-details">Product Brand* : </td>
\t \t <td class="product-detail-input"><input type="text" name="product-brand" id="product-brand-field"></td>
\t \t </tr>
\t \t <tr id="product-download">
\t \t \t <td class="product-details">Product Download Link* : </td>
\t \t \t <td class="product-detail-input"><input type="text" name="product-download-link" id="product-brand-field"></td>
\t \t </tr>
\t \t <tr>
\t \t <td class="product-details">Product Tags* : </td>
\t \t \t <td class="product-detail-input"><input type="text" name="product-tags" id="product-tags-field"></td>
\t \t </tr>
\t </tbody>
\t \t </table>
\t \t \t \t \t \t \t
\t </div>
<!-- primary detail section -->
<!-- description block -->
<div id="description-block">
\t <p>Product Description*:</p>
\t <textarea id="description-textfield"></textarea>
</div>
<!-- description block -->
<button id="save-button" class="control-buttons">Save</button>
'product_height'定义在哪里？ –
选择（即：选择类别）中的默认选项应该没有值或值=“”。如果未选择某个值，则元素的.value将为空。您正在检查“选择类别”，但该值不存在。 – Chase
并且不需要“选定”和“隐藏”值，除非这是某些选择框的一部分。而且我也看到你有选项的名称道具，这也是不正确的 - 他们不应该在那里。名字道具继续选择元素。在你调试JS之前，你的HTML需要很多爱。 – Chase