Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

190
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda