1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

No validar campos vacíos dentro de una tabla

Tema en 'Javascript' comenzado por rex, 20 de Julio de 2017.

Tags:
  1. rex

    rex Miembro

    Se incorporó:
    19 de Julio de 2017
    Mensajes:
    30
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Hola, nuevamente pido su ayuda ya que soy nuevo en esto de programar en Javascript, y me gustaría que me ayudaran con otro problema del mismo programa que genera, elimina y agrega filas dentro de una tabla, pero lo que quiero hacer es que cuando el usuario no ingreso uno o ningún dato dentro de la tabla me de un alert que diga: "no ha ingresado nombre de la columna por favor ingreselo" y que también no agregue la fila con el campo vació, lo único que si hace mi programa es que no agregue una fila de mas cuando tiene uno ya abierto, espero que me entiendan, aun así les muestro mi código y espero que puedan ayudarme:

    Código (Text):
    <!Doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <link rel="stylesheet" href="css/bootstrap.css">

    <style>
        #content{
            position: absolute;
            min-height: 50%;
            width: 80%;
            top: 20%;
            left: 5%;
        }

        .selected{
            cursor: pointer;
        }
        .selected:hover{
            background-color: #EBF5FB;

        }
        .seleccionada{
            background-color: #0585C0;

        }

    </style>
    <script>
    $(document).ready(function() {

        $('#bt_add').click(function() {
              var check = [];
              $("#tabla").find('.selected').find('td').each(function(){
                if($.trim($(this).text()) === "")
                  check.push($(this).attr('id'));
              });
              if(check.length === 0)
                agregar();
              else
                alert('Registre los Datos de la Fila ');;
          });
          $('#bt_del').click(function() {
            eliminar();
          });

          $('#bt_delall').click(function() {
            eliminarTodasFilas();

          });

        });
        var cont = 0;
        var id_fila_selected = [];

        function agregar() {
          cont++;
          var fila =

            '<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td>&nbsp;</td>' +

            '<td><input type="text" id="nombre"></td>' +

            '<td><input type="text" id="area"></td>' +

            '<td><input type="text" id="puesto"></td>' +

            '<td><input type="text" id="email" onkeyup="addToTable(event)"></td></tr>';

          $('#tabla').append(fila);
          reordenar();
        }

        function addToTable(e) {
          if (e.keyCode === 13) {
            e.preventDefault();
            const row = e.target.parentNode.parentNode;
            const inputs = row.querySelectorAll('input');
            const values = [].map.call(inputs, input => input.value);
            const tds = row.querySelectorAll('td');
            [].forEach.call(tds, (td, i) => {
              if (i === 0) { td.textContent = i + 1; }
              else { td.innerHTML = values[i - 1]; }
            });
            reordenar()
          }
        }

        function seleccionar(id_fila) {
          if ($('#' + id_fila).hasClass('seleccionada')) {
            $('#' + id_fila).removeClass('seleccionada');
            // borrar también el id del array de filas seleccionadas
            var existe_el_id = id_fila_selected.indexOf(id_fila);
            id_fila_selected.splice(existe_el_id, 1);
          } else {
            $('#' + id_fila).addClass('seleccionada');
            // agregar id sólo si se hizo click
            id_fila_selected.push(id_fila);
          }

        }

        function eliminar() {

          for (var i = 0; i < id_fila_selected.length; i++) {
            $('#' + id_fila_selected[i]).remove();
          }
          reordenar();
        }

        function reordenar() {
          var num = 1;
          $('#tabla tbody tr').each(function() {
            $(this).find('td').eq(0).text(num);
            num++;
          });
        }

        function eliminarTodasFilas() {
          $('#tabla tr.selected').each(function() {
            $(this).remove();
          });
        }

        $(function () {      
              $("table").on("dblclick", "td",function () {                
                  var OriginalContent = $(this).text();
                  $(this).addClass("cellEditing");
                  $(this).html("<input type='text' value='" + OriginalContent + "' />");
                  $(this).children().first().focus();
                  $(this).children().first().keypress(function (e) {
                      if (e.which == 13) {
                          var newContent = $(this).val();
                          $(this).parent().text(newContent);
                          $(this).parent().removeClass("cellEditing");
                          }
                      });
                  $(this).children().first().blur(function(){
                      $(this).parent().text(OriginalContent);
                      $(this).parent().removeClass("cellEditing");
                      });
                  });
              });
        </script>

    </head>
    <body>

    <div id="content">
      <label> Tabla de Ejemplo </label>
      <br>
      <div align="center" style="width:416px;" >
                <button id="bt_add" class="btn btn-primary">Agregar</button>
                <button id="bt_del" class="btn btn-primary">Eliminar</button>
                <button id="bt_delall" class="btn btn-primary">Eliminar todo</button>
                 </div>
                <table id="tabla" style= "position:absolute;top:150px;left:75px" class="table table-bordered">

                <thead>

        <thead>
          <tr>
            <td>Nº</td>
            <td>NOMBRE</td>
            <td>AREA</td>
            <td>PUESTO</td>
            <td>EMAIL</td>
          </tr>
        </thead>
      </table>
    </div>

    </body>
    </html>
     
  2. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Para que puedas manipular javascript y puedas validar los inputs... te recomiendo que aprendas JavaScript native con FALCONMASTER



    En el capítulo 22 te menciona como validar un campo input



    Otro link de ejemplo
     
    A rex y AngelKrak les gusta esto.
  3. rex

    rex Miembro

    Se incorporó:
    19 de Julio de 2017
    Mensajes:
    30
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Claro, le voy a estudiarle, muchas gracias
     
  4. rex

    rex Miembro

    Se incorporó:
    19 de Julio de 2017
    Mensajes:
    30
    Me gusta recibidos:
    3
    Puntos de trofeos:
    8
    Ya lo pude arreglar, le puse en la parte del *addToTable* lo siguiente:

    Código (Text):
     if (e.keyCode === 13) {
            e.preventDefault();
            if($("#nombre").val() == ""){
                    alert("Ingrese el nombre del usuario");
                  return false;
                }else if($("#area").val() == ""){
                       alert("Ingrese el nombre de la area");
                      return false;
                }else if($("#puesto").val() == ""){
                       alert("Ingrese el nombre del puesto");
                      return false;
                }else if($("#email").val() == ""){
                       alert("Ingrese su correo electronico");
                      return false;
                }
     
  5. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    657
    Me gusta recibidos:
    498
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Oh que bien ... :rolleyes::rolleyes: ..!! Espero te ayude y aprender a manipular el JavaScript
     

Comparte esta página