How to check if textbox is empty and display a popup message

Question

I am writing some code for a website to alert a user if any parameter in the textbox submission were left blank, and for some reason, it is not working. I've tried everything and I'm not sure if I am taking the right approach. Here is my javascript code:

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(),
            }
        $('#submit').click(function(assetInfo){
        if($(assetInfo).val() == ''){
            alert('Input can not be left blank');
            }
        });

And here is my HTML:

<button type="button" class="btn btn-primary" id='submit'>SUBMIT</button>

Any tips?

Answer 1

Try checking the specific values on the assetInfo object rather than the object itself.

$('#submit').click(function(assetInfo){
  if (assetInfo.asset_tag_no == '' || assetInfo.manufacturer == '' || assetInfo.descriptions == '' || assetInfo.costs == '' || assetInfo.po_no == '' || assetInfo.department_division_head == '') {
    alert('Input can not be left blank');
  }
});

Alternatively, you could simply add the required attribute to the input elements and then the browser can natively alert the user when the input is missing.

<input type="text" name="asset_tag_no" required/>

Answer 2

When you use JQuery to get an element via $('.foo') , for example, it returns a hot object which is linked to the DOM. However, when you call el.val() on a JQuery element, you get a primitive so it is no longer linked with the DOM's value for that element. Therefore, you should adjust your assetInfo constant to just include the elements. Then, get the primitive values of the elements when you need it in the event listener. Here are your constants:

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

Now, you can get an array of the elements via calling Object.values on assetInfo . After that, we can use the Array.prototype.every method to check if the value of each element is not empty. You should also remove the parameter from the callback function because you can just access it via its name.

$('#submit').click(function() {
  const allValid = Object.values(assetInfo).every((el) => el.val() != "");

  if (!allValid) {
    alert('Input can not be left blank');
  }
});

Answer 3

If you are talking about textboxes, here is the solution:

So in HTML, you can call Javascript Functions during events using parameters. The function you can use is called 'onblur', which is fired when an object in the window loses focus. So you would type:

<input type="text" onblur="myFunction(this)" />
<p id="errorMessage" />

And then we actually need the function for obvious reasons. Now we would go:

const errorMessage = document.getElementById('errorMessage')
function myFunction(field) {
   if (field === "") {
      errorMessage.innerText = "One or more fields were not entered.";
   }
}

Hope this helped.