Validar datos y mostrar alertas bootstrap

publicado por: Anonymous

He hecho un formulario bootstrap en un modal, que cuando le doy a un botón submit “guardar”, se me guardan los valores de los campos en la base de datos. Hasta aqui todo bien.

Me gustaría que antes de enviarse los valores, los campos se validaran, para mirara si un campo esta vacio o hay algo que no quiera como poner, como una edad en negativo.

Tengo comprendido que toda la gente utiliza jquery pero para mi es un lio del copón, pero si hay que hacerlo de esa forma, adelante.
Pues nada, os pregunto como algo que se validen los campos y que salgan esas alertas arriba del modal tan bonitas de bootstrap.

Aqui os dejo mi formulario

        <div class="modal" id="nuevoUsu" tabindex="-1" role="dialog" aria-labellebdy="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4>Nuevo Contacto</h4>                       
                </div>
                <div class="modal-body">
                   <form action="insertar.php" method="GET">                    
                        <div class="form-group">
                            <label for="nombre">Nombre:</label>
                            <input class="form-control" id="nombre" name="nombre" type="text" placeholder="Nombre"></input>
                        </div>
                        <div class="form-group">
                            <label for="edad">Edad:</label>
                            <input class="form-control" id="edad" name="edad" type="text" placeholder="Edad"></input>
                        </div>
                        <div class="form-group">
                            <label for="direccion">Direccion:</label>
                            <input class="form-control" id="direccion" name="direccion" type="text" placeholder="Direccion"></input>
                        </div>

                        <input type="submit" class="btn btn-success" value="Salvar">
                   </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div> 

Perdón si ofendo a alguien por mi poca capacidad de programar, pero a mi edad ya es complicado aprender.

solución

Primero para validar que solo se ingresen números puedes hacer lo siguiente con javascript , se usa directamente en el input de edad así

_x000D_

_x000D_

 function solonumeros(e)_x000D_
                    {_x000D_
         var key = window.event ? e.which : e.keyCode;_x000D_
                        if(key < 48 || key > 57)_x000D_
                            e.preventDefault();_x000D_
                    }

_x000D_

<label>Edad</label>_x000D_
<input id="edad" type="text" onkeypress="solonumeros(event);">

_x000D_

_x000D_

_x000D_

Ese código no permite que ingrese caracteres y letras demás. Entonces para validar depués solo tienes que preguntar si lo ingresado es menor a 0 de esta forma, ademas de validar los demás campos:

_x000D_

_x000D_

function validaCampos(){_x000D_
_x000D_
var nombre = $("#nombre").val();_x000D_
var edad = $("#edad").val();_x000D_
var direccion = $("#direccion").val();_x000D_
//validamos campos_x000D_
if($.trim(nombre) == ""){_x000D_
toastr.error("No ha ingresado Nombre","Aviso!");_x000D_
    return false;_x000D_
}_x000D_
                   if($.trim(edad) == ""){_x000D_
toastr.error("No ha ingresado Edad","Aviso!");_x000D_
    return false;_x000D_
}_x000D_
_x000D_
            if(edad < 0){_x000D_
toastr.error("Mínimo permitido 0","Aviso!");_x000D_
    return false;_x000D_
}_x000D_
if($.trim(direccion) == ""){_x000D_
toastr.error("No ha ingresado Dirección","Aviso!");_x000D_
    return false;_x000D_
}_x000D_
_x000D_
}

_x000D_

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>_x000D_
<link href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" >_x000D_
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>_x000D_
<script>_x000D_
_x000D_
//importamos configuraciones de toastr_x000D_
toastr.options = {_x000D_
  "closeButton": false,_x000D_
  "debug": false,_x000D_
  "newestOnTop": false,_x000D_
  "progressBar": false,_x000D_
  "positionClass": "toast-top-right",_x000D_
  "preventDuplicates": false,_x000D_
  "onclick": null,_x000D_
  "showDuration": "300",_x000D_
  "hideDuration": "1000",_x000D_
  "timeOut": "5000",_x000D_
  "extendedTimeOut": "1000",_x000D_
  "showEasing": "swing",_x000D_
  "hideEasing": "linear",_x000D_
  "showMethod": "fadeIn",_x000D_
  "hideMethod": "fadeOut"_x000D_
}_x000D_
_x000D_
_x000D_
</script>_x000D_
<form action="insertar.php" method="GET" onsubmit="return validaCampos();">                    _x000D_
                        <div class="form-group">_x000D_
                            <label for="nombre">Nombre:</label>_x000D_
                            <input class="form-control" id="nombre" name="nombre" type="text" placeholder="Nombre"></input>_x000D_
                        </div>_x000D_
                        <div class="form-group">_x000D_
                            <label for="edad">Edad:</label>_x000D_
                            <input class="form-control" id="edad" name="edad" type="text" placeholder="Edad"></input>_x000D_
                        </div>_x000D_
                        <div class="form-group">_x000D_
                            <label for="direccion">Direccion:</label>_x000D_
                            <input class="form-control" id="direccion" name="direccion" type="text" placeholder="Direccion"></input>_x000D_
                        </div>_x000D_
_x000D_
                        <input type="submit" class="btn btn-success" value="Salvar">_x000D_
                   </form>

_x000D_

_x000D_

_x000D_

Con este código podrás validar antes de enviar , explico entonces de que trata la validación anterior
cuando digo $.trim(nombre) en esta linea $.trim quita todas los espacios dentro del campo entonces aunque presionen la tecla espaciador y envíen, va a validar que este en blanco el input. Entonces cuando retorno false hago que el formulario no se envie hasta que la todo este correcto. Por ultimo hice usar los mensajes que entrega la libreria de toastr que es para mostrar mensajes de validaciones de forma mas gráfica. Ojala te sirva Saludos.

NOTA: $.trim() es de jquery, así que necesitas esa librería para poder
usarlo.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *