Check for Empty Inputs and Enforce Users to Fill out Fields

Question

I have a question about JQuery and While statements. I am pretty new to coding and one of my tasks is to check if there are any empty inputs when a user tries to submit a value, and return an alert. I first started by using if statements, and saw that only the first if statement would be read when I clicked on the submission button. I tried to implement a while loop to continuously loop through all of the statements until all sections were filled out, but I am not sure if I am going about this the right way.

I am not sure what to put in the while loop because I know it should be true, but true to some value. Any help would be appreciated!

let assetInfo = {
            asset_tag_no: $(`#asset_tag_no${i}`).val(),
            manufacturer: $(`#manufacturer_serial_no${i}`).val(),
            descriptions: $(`#description${i}`).val(),
            costs: $(`#cost${i}`).val(),
            po_no: $(`#p.o._no${i}`).val(),
            department_division_head: $(`#department_division_head${i}`).val(),
        }

        // Check for Empty Inputs and Enforce Users to Fill out Fields
        
        
        $('#submit').click(function(){
            while (assetInfo = true) {

                if (assetInfo.asset_tag_no == '') continue;{
                    alert('Asset Tag Number can not be left blank');
                    
                }
                if (manufacturer == '') continue; {  
                    alert('Manufacturer Serial Number can not be left blank');
                    
                }
                if (descriptions == '') continue;{  
                    alert('The Description can not be left blank');
                }
                if (costs == '') continue;{  
                    alert('The Cost can not be left blank');
                }  
                if (po_no == '') continue;{  
                    alert('The P.O Number/ Document Number can not be left blank');
                }   
                if (department_division_head == '') continue;{  
                    alert('The Remarks can not be left blank');
                }
                else{
                    alert('Submission Accepted');
                    break;
                    }
            
            }
            return assetInfo;   
            });

user_14346235 · Answer

Try this technique man,

let assetInfo = {
            asset_tag_no: {
        label: "Asset Tag",
            value: $(`#asset_tag_no${i}`).val()
            },
  manufacturer: {
        label: "Manufacturer",
            value: $(`#manufacturer_serial_no${i}`).val()
            },
           
        }

        // Check for Empty Inputs and Enforce Users to Fill out Fields
        
        let keys = Object.keys(assetInfo);
        
        for(let i = 0 ; i < keys.length ; i++){
            if(assetInfo[keys[i]].value === "")
          {
                alert(assetInfo[keys[i]].label+' can not be left blank');
          }
                          
        }

user_17708926 · Answer

You can remove the while loop and just do it with a for loop. First of all you should loop over the assetInfo object and check if all the values match your needs. Throw alerts when needed.

for (const info in assetInfo) {
  if (assetInfo[info] == "") {
    alert(`${info} shouldn't be blank!`);
  }
}

Check for Empty Inputs and Enforce Users to Fill out Fields

2 Answers