Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

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

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?

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

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

about 4 years ago · Juan Pablo Isaza Denunciar

0

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');
  }
});
about 4 years ago · Juan Pablo Isaza Denunciar

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda