Identify the empty input field

Asked

Viewed 571 times

-1

Good afternoon, as I do to leave the text (Reason), input and phrase below red when clicking the transmit button check if the field is empty and/or when typing something changes color to green. As I do in HTML5 and JS, if you have in Jqueryinserir a descrição da imagem aqui

javascript jquery html5
  • 1

    You will need to validate the input when submitting the form using JS, then style your HTML using CSS if the field value is invalid. It is a very comprehensive question, where exactly is your doubt? What have you tried so far?

  • 2

    Put in the code you already have.

1 answer

0


You can add a Listener in the input who is trying to perform this validation, but would like to make it clear that client validations are only part of the process, it is always good to validate the data in the backend.

But let’s go to the code:

$('#id-do-input').on('change', function() {
  var value = $(this).val()

  if (!value) {
    $(this).removeClass('text-success')
    $(this).addClass('text-error')
  } else {
    $(this).removeClass('text-error')
    $(this).addClass('text-success')
  }
})

And if you want to do this validation by pressing the send button, just add the same Listener above, but changing all occurrences of $(this) for $('#id-do-input').

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.