-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