Check empty input


I am programming in php and mysql and I have a form with personal data and a button submit to save. Then I want to validate that the input of the root of the person is not empty, and therefore do not leave save.

I have this function js :

function validar(){
    if ($('#txtrut').text() == "") {
        alert('Ingrese rut');
        return false;

I execute it in the submit onclick event, but it always shows me the alert, this empty the input or not. How can I do it?

asked by daniel 11.07.2016 в 18:26

8 answers


To capture the value of an input, use .val ()


var campo = $('#id_del_input').val();

and then validate it,

if(campo === ''){
 alert("El campo esta vacío");
return false;
 //Las validaciones que necesitas hacer
answered by 11.07.2016 в 19:17

After seeing four answers, I see that they have not used a fairly common and useful property in these cases: length

function validar() {
  if ($('#txtrut').val().length == 0) {
    alert('Ingrese rut');
    return false;

This property simply gives us the length of the value that the input has, in case there is a space, the other answers would fail.

This could be the simplest answer, depending on the type of validation you want to do in the field as such.

answered by 11.07.2016 в 20:31

To get the value of input $('').val() is used and this solves your problem.

As an annex:

The $('#id').text() is used for elements such as divs , labels among others to get the text included in them.

I'll give you an example:

<script src=""></script>
<input value="texto prueba">
<p style="display:none;"><span>lol</span> Texto de un parráfo oculto</p>
<label id="pri"></label>
<br><label id="seg"></label>
<br><label id="ter"></label>
answered by 11.07.2016 в 18:38

Here I leave this, I hope I can serve you:

Example Plnkr

  var boton_rut;
  boton_rut = $('#rut_check');
  boton_rut.on('click', function(){
     var valor_input, valor_rut;
    valor_input = $('#rut_txt');
    valor_rut = valor_input.val();
    if(valor_rut === ''){
      alert('No tiene nada el input');
      alert("Si tiene valor el input");
<script src=""></script>

      Rut:<input type="text" id="rut_txt">
      <button id="rut_check">Verificar</button>
answered by 11.07.2016 в 19:12

You are using

answered by 11.07.2016 в 18:43

This is the easiest way to do it with JavaScript

<script>function inputVacio(){ var valor = document.getElementById('Idinput').value;  if(valor == '')alert('esta vacio') }</script>
answered by 20.07.2016 в 18:46

It occurs to me not to show the submit button until the input field contains some value entered by the user.

I would add a "placeholder" to notify the user that it is a field that needs to be completed.

And I would use the JQuery library.


The JQuery library must be loaded AFTER loading all styles on the page. That is, load all CSS libraries or styles BEFORE loading the necessary JQuery.js libraries.

<link rel="stylesheet" type="text/css" href="estilo.css">
/* Y LUEGO... */
<script src="/la_ruta_de_tu_dominio/jquery/jquery-3.1.1.min.js"></script>
       $("#id_input").change( function() {
          if ($('#id_input').val() === '') {
              alert("El campo esta vacío");
          } else {

Anyway, and before sending information to the MySQL database, it is necessary to check what was entered in the INPUT from PHP to avoid SQL injections. The validation from JS on the client side will never be 100% safe for that because it can be modified before.

answered by 26.01.2017 в 21:13

Use this in your HTML:

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

The attribute required specific that the input must be completed before the form can be submitted.

For compatibility with different browsers, see w3schools .

answered by 06.09.2016 в 01:40