Nested if else jumps out from the main if else in javascript

Question

Currently I am practicing on custom form validation using JavaScript. I have made a form which takes product detail input from the user and then through JavaScript I am doing the validation.

when a user selects "product type" physical then three input fields are activated. When the user clicks save button then the validation starts.

The validation works fine until it starts validating the product type and it's related fields.

First the program checks whether the "product type" is physical or downloadable, then if the product is physical then its starts validating product weight, product depth, and product height. It should have continue further with validating the other else if conditions but it just jumps out. I don't know why this is happening.

//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>

Default options in a select (ie: Select Category) should have no value or value="". When a value is not selected the .value of the element will be null. You're checking for "Select Category" but the value does not exist. — Chase, Oct 20 '17 at 10:23
And the "selected" and "hidden" values are not needed, unless that is part of some select box lib. And I'm also seeing that you have name props on the options, which is also not correct - they should not be there. The name prop goes on the select element. Your HTML needs a lot of love before you can debug your JS. — Chase, Oct 20 '17 at 10:26
Well, talking about the "select category" option. The values of that element will be added to it dynamically so that is why it is left blank. — Lalit Pal, Oct 20 '17 at 10:29
And yes I accept that I need to improve my HTML and I would really appreciate your help in "why the usage of name attribute in option element is incorrect?". — Lalit Pal, Oct 20 '17 at 10:31
The name prop belongs on the select element, as stated [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select). The name prop cannot be used on the option element, as stated [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option). A default option element with no value needs a prop of `value=“”` as stated [here](https://stackoverflow.com/a/30525521/5096653) which will cause the value in your if expression to eval to “”, not the default string of the option. — Chase, Oct 20 '17 at 11:42

score 1 · Accepted Answer · answered Oct 20 '17 at 10:22

1

Surely it's because you're using else if and you should be using just an if?

The Type has to be either Downloadable or Physical, so you will definitely go into one of these if statements. Therefore you won't hit the if statement in the else if immediately after that. Therefore I'd suggest you change the line:

else if(product_brand_value == ""){

to

if(product_brand_value == ""){

Give that a try and see how it goes. Otherwise if order isn't too important to you, you could move the 'Product Type' else if statements to the bottom of your validation checks.

Let me know if this solves anything!

answered Oct 20 '17 at 10:22

CodeMonkey123

1,046
13
22

Yes. It worked. Changing else if to if worked. But can you please tell me why it didn't work early? – Lalit Pal Oct 20 '17 at 10:26
Great @LalitPal ! So your product_type_value will either be "physical" or "downloadable", right? I think in your example it was "physical", therefore it went into that if statement. Because it went into that if statement it cannot go into the immediately following else if statement, as that is the nature of the else keyword (only check if the previous if was false). Hopefully that makes sense? Also for a bit of reading: https://docs.oracle.com/javase/tutorial/java/nutsandbolts/if.html – CodeMonkey123 Oct 20 '17 at 10:27
Yes, I understood. Thanks for your help. – Lalit Pal Oct 20 '17 at 10:37

score 1 · Answer 2 · answered Oct 20 '17 at 10:44

Rather than using else if condition just simply use "if" conditions to check all the controls.It would be easy.

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.");
 }
}

make the variable false every where if it is false and finally check it to show your alert message.

Thanks for the help, but the problem is already solved. Still I appreciate your and answer and yes we can apply this as well. — Lalit Pal, Oct 20 '17 at 10:55
If you feel the approach is correct...Please thumbs up such that it might helps others. — Praveen Kumar Rejeti, Oct 20 '17 at 11:14

Nested if else jumps out from the main if else in javascript

2 Answers2