3

Esto es lo que tengo, quiero acceder al texto de los labels recorridos y cambiar su contenido.

No sé como hacer para que no los muestre en texto plano.

// funcion para colocarles a los label con su campo obligatorio
// el texto "Este campo es bligatorio" y el asterisco para identificarlo en el formulario
required_label = function () {
    // le ponemos al div.form-group la clase my-required si tiene un campo con el atributo required
    $("div.form-group:has([required])").addClass("my-required");
    var label = $("div.form-group.my-required label");
    // le colocamos el texto a los label dentro de estos
    label.attr("title", "Este campo es bligatorio");

    $.each(label, function (index, label) {
        console.log(label);
        // console.log(label.text());
    });
};
required_label();
<!DOCTYPE html>
<html>
<head>
	<title>ejemplo</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" required>
</div>

<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" required>
</div>

</body>
</html>

3
  • Con label.innerText, tal vez.
    – César
    el 8 ago. 2018 a las 16:23
  • Me arroga undefined, y la idea principal es cambiar su contenido el 8 ago. 2018 a las 16:26
  • Intenta con $(label).text().
    – César
    el 8 ago. 2018 a las 16:27

3 respuestas 3

3

El tema es que, al usar each, cada elemento que recibe la función es un objeto en JavaScript, para poder usar el método text() tendrías que convertirlo a jQuery nuevamente. La otra opción es mantener el objeto JavaScript y usar el atributo innerText:

$(document).ready(function() {
  var labels = $("div.form-group label");
  $.each(labels, function(index, label) {
      console.log($(label).text()); // con jQuery
      console.log(label.innerText); // sin jQuery
  });
})
<!DOCTYPE html>
<html>
  <head>
    <title>ejemplo</title>
  </head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <body>
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" class="form-control" id="email" required>
    </div>

    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" class="form-control" id="username" required>
    </div>

  </body>
</html>

1
  • 1
    Excelente, muchas gracias amigo! :D el 8 ago. 2018 a las 16:40
0

basta con hacer lo siguiente

 label.tex();
 label.innerText;
2
  • me sale esto: TypeError: label.text is not a function el 8 ago. 2018 a las 16:27
  • INTENTA CON label.innerText;
    – andy gibbs
    el 8 ago. 2018 a las 16:31
0

Para hacerlo sin jQuery:

// funcion para colocarles a los label con su campo obligatorio
// el texto "Este campo es obligatorio" y el asterisco para identificarlo en el formulario
required_label = function() {

  // busco todos los inputs obligatorios
  var required = document.querySelectorAll("[required]");

  [].forEach.call(required, function(input) {
    var form_group = input.parentNode,
      label = form_group.querySelector('label');

    // le ponemos título al label
    label.title = "Este campo es obligatorio";

    // añadimos la clase my-required
    form_group.classList.add('my-required');
    console.log(label.innerText);
    label.innerText = label.innerText + ' *';

  });

};
required_label();
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" required>
  </div>

  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" required>
  </div>

Supuse que querrías añadir el asterisco al texto del label, pero en tu código estás definiendo el atributo title en vez de modificar el contenido.

Se me ocurre que en realidad quieres que al enviar el formulario, si acaso algún campo obligatorio no se ha completado, se despliegue un "hint" señalando que faltó llenar ese campo. Si estás usando un plugin de validación como el de bootstrap, en realidad no tiene caso hacer este ejercicio sin jQuery, pero también podrías hacerlo sin usar Bootstrap:

// funcion para colocarles a los label con su campo obligatorio
// el texto "Este campo es obligatorio" y el asterisco para identificarlo en el formulario
function agrega_asterisco() {
  // busco todos los inputs obligatorios
  var required = document.querySelectorAll("[required]");
  [].forEach.call(required, function(input) {
    var form_group = input.parentNode,
      label = form_group.querySelector('.control-label'),
      help = form_group.querySelector('.help-block');

    // fijo un data-attribute
    help.innerText = "Este campo es obligatorio";
    label.innerText = label.innerText + ' *';
  });
}

function comprueba_required() {
  var required = document.querySelectorAll("[required]");
  [].forEach.call(required, function(input) {
    var form_group = input.parentNode,
      help = form_group.querySelector('.help-block');
    if (input.value.trim() === '') {
      // le agrego la clase `my-required` al form-group
      form_group.classList.add('has-error');
      help.classList.remove('invisible');
    } else {
      form_group.classList.remove('has-error');
      help.classList.add('invisible');
    }

  });

}

agrega_asterisco();

document.querySelector('#enviar').addEventListener('click', comprueba_required);
.form-group {
  float: left;
  clear: left;
  margin-bottom: 5px !important;
}

.form-group label {
  float: left;
  line-height: 34px;
  width: 100px;
}

.form-group input {
  float: left;
  line-height: 34px;
  width: 200px;
}

.help-block {
  font-size: 12px;
  margin-bottom: 2px !important;
}

#enviar {
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>
  <div class="form-group">
    <label class="control-label" for="email">Email</label>
    <input type="email" class="form-control" id="email" required>
    <span class="help-block invisible"></span>
  </div>

  <div class="form-group">
    <label class="control-label" for="username">Username</label>
    <input type="text" class="form-control" id="username" required>
    <span class="help-block invisible"></span>
  </div>
  <div class="form-group">
    <button class="btn" value="enviar" id="enviar">Enviar</button>
  </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.