0

buen dia. me gustaria que me ayudaran con la validacion de un formulario, estoy aprendiendo de programacion ahora y estoy estancado en la validacion de este formulario lo tengo creado de esta manera.

modal para insertar.

<div class="modal fade" id="myModalj" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
  <br />
  <div class="x_panel">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Añadir Jugador</h4>
</div>
<div class="form-group">
    <div class="alert alert-danger text-center" style="display:none;" id="error">
        <strong>Adventencia: </strong>Debe completar todos los campos
    </div>
    <div class="alert alert-success text-center" style="display:none;" id="exito">
        <strong>Felicidades: </strong>Su registro ha sido guardado
    </div>
</div>
  <div class="modal-body">

<form data-parsley-validate class="form-horizontal form-label-left input_mask" method="post" id="forminsertar" name="forminsertar" role="form">

<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required"  type="text" class="form-control has-feedback-left"  name="jNombre" id="jNombre" placeholder="Nombre">
<span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jApellido" id="jApellido" placeholder="Apellido">
<span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12 xdisplay_inputx form-group has-feedback">
<input required="required" type="date" class="form-control has-feedback-left" name="jFecha" id="jFecha" placeholder="Fecha Nacimiento" aria-describedby="inputSuccess2Status4">
<span class="fa fa-calendar-o form-control-feedback left" aria-hidden="true"></span>
<span id="inputSuccess2Status4" class="sr-only">(success)</span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">

<input required="required" type="text" class="form-control" name="jCedula" id="jCedula" data-inputmask="'mask' : '999-9999999-9'" placeholder="Cedula">
<span class="fa fa-credit-card form-control-feedback right" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control has-feedback-left" name="jCiudad"  id="jCiudad" placeholder="Ciudad">
<span class="fa fa-building-o form-control-feedback left" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jDireccion" id="jDireccion" placeholder="Direccion">
<span class="fa fa-home form-control-feedback right" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control has-feedback-left" name="jEstatura" id="jEstatura" data-inputmask="'mask' : '99'" placeholder="Estatura">
<span class="fa fa-unsorted form-control-feedback left" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jTelefono" id="jTelefono" data-inputmask="'mask' : '(999) 999-9999'" placeholder="Telefono">
<span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12">
<select id="jrefEquipo" name="jrefEquipo" class="form-control has-feedback-left" required>
<option value="" selected>Sin Equipo</option>
<?php do { ?>
<option value="<?php echo $row_DatosEquipo["idEquipo"]?>" ><?php echo $row_DatosEquipo["eNombre"]?></option>
<?php
} while ($row_DatosEquipo = mysqli_fetch_assoc($DatosEquipo));
?>
</select>
<span class="fa fa-users form-control-feedback left" aria-hidden="true"></span>
</div>


<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">

<input required="required" type="text" class="form-control" name="jNumero" id="jNumero" data-inputmask="'mask' : '999'" placeholder="Numero Chaqueta">
<span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12">
<select id="jrefPosicion" name="jrefPosicion" class="form-control has-feedback-left" required>
   <option value="" selected>Sin Posicion</option>
   <?php do { ?>
   <option  value="<?php echo $row_DatosPosicion["idPosicion"]?>" ><?php echo $row_DatosPosicion["pPosicion"]?></option>
   <?php
} while ($row_DatosPosicion = mysqli_fetch_assoc($DatosPosicion));
?>
</select>
<span class="fa fa-sort-numeric-asc form-control-feedback left" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12 form-group ">
<input  required="required" type="text" class="form-control" name="jImagen" id="jImagen" placeholder="Imagen">
<span class="fa fa-image form-control-feedback right" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control has-feedback-left" name="jEmail" id="jEmail" placeholder="Email">
<span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
</div>

<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input required="required" type="text" class="form-control" name="jContraseña" id="jContraseña" placeholder="Contraseña">
<span class="fa fa-lock form-control-feedback right" aria-hidden="true"></span>
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary">enviar</button>
                </span>
</div>

      <div class="form-group">

      </div>
      <div class="ln_solid"></div>
      <div class="form-group">
        <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
          <button type="button" class="btn btn-primary" data-dismiss="modal">Cancelar</button>
          <button class="btn btn-primary" type="reset">Limpiar</button>
          <button id="aceptar_jugador" type="button" class="btn btn-success">Guardar</button>
        </div>
      </div>

    </form>
  </div>


</div>
</div>
</div>

y este es el insert

<?php

    $jNombre = $_POST['jNombre'];
    $jApellido = $_POST['jApellido'];
    $jFecha = $_POST['jFecha'];
    $jCedula = $_POST['jCedula'];
    $jDireccion = $_POST['jDireccion'];
    $jCiudad = $_POST['jCiudad'];
    $jTelefono = $_POST['jTelefono'];
    $jEstatura =$_POST['jEstatura'];
    $jNumero = $_POST['jNumero'];
    $jrefEquipo = $_POST['jrefEquipo'];
    $jrefPosicion = $_POST['jrefPosicion'];
    $jEmail = $_POST['jEmail'];
    $jContraseña = md5($_POST["jContraseña"]);

    $jregistro=date('Y-m-d');




    $sql="INSERT into tbljugadores (jNombre, jApellido, jFecha,  jCedula, jDireccion, jCiudad, jTelefono, jEstatura, jNumero, jrefEquipo, jrefPosicion, jEmail, jContraseña, jregistro)
            values ('$jNombre','$jApellido','$jFecha','$jCedula','$jDireccion','$jCiudad','$jTelefono','$jEstatura','$jNumero','$jrefEquipo','$jrefPosicion','$jEmail','$jContraseña','$jregistro')";
    echo mysqli_query($con,$sql);
 ?>

este es el js

$("#jugador-add").click(function () {
            $("#myModalj").modal();

             $("#aceptar_jugador").unbind('click');
                    $("#aceptar_jugador").click(function () {


                        var jNombre = document.getElementById("jNombre").value;
                    var jApellido = document.getElementById("jApellido").value;
                    var jFecha = document.getElementById("jFecha").value;
                        var jCedula = document.getElementById("jCedula").value;
                        var jDireccion = document.getElementById("jDireccion").value;
                      var jCiudad = document.getElementById("jCiudad").value;
                        var jTelefono = document.getElementById("jTelefono").value;
                        var jEstatura = document.getElementById("jEstatura").value;
                        var jNumero = document.getElementById("jNumero").value;
                        var jrefEquipo = document.getElementById("jrefEquipo").value;
                        var jrefPosicion = document.getElementById("jrefPosicion").value;
                        var jEmail = document.getElementById("jEmail").value;
                        var jContraseña = document.getElementById("jContraseña").value;

                        if ( jNombre == "" || jApellido == "" || jFecha == "" || jCedula =="" || jDireccion =="" || jCiudad =="" || jTelefono =="" || jEstatura =="" || jNumero =="" || jEmail =="" || jContraseña =="") {
                        alert("Error: Todos los campos son obligatorios.");

                      } else {
                           $("#myModalj").modal('toggle');

                        var params = {jNombre, jApellido, jFecha, jCedula, jDireccion, jCiudad, jTelefono, jEstatura, jNumero, jrefEquipo, jrefPosicion, jEmail, jContraseña}

             $.ajax({
                    type: 'POST',
                    url: 'jugador-insert.php',
                    data: params,
                    async:true,

                        success: function(respuesta) {

                            alert("Informacion: Jugador creado correctamente!");
                            location.reload();
                                 }

                });
                }
                });
            });

el me funciona perfecto pero quiero agregar la validacion de bootstrap que cubre el input de rojo y no se como hacer el codigo para que funcione cuando le de a enviar. ya que solo tengo la validacion del navegagor.

1 respuesta 1

0

puedes utilizar esta librería de jQuery Validation para hacer la validación de los datos:

https://jqueryvalidation.org/

Úsalo de esta manera, reemplaza el javascript que tienes actualmente

function success(element) {
    $(element).removeClass('form-control-danger');
    $(element).addClass('form-control-success')
    $(element).closest('.form-group').removeClass('has-danger');
    $(element).closest('.form-group').addClass('has-success');
}

function danger(element) {
    $(element).removeClass('form-control-success');
    $(element).addClass('form-control-danger');
    $(element).closest('.form-group').removeClass('has-success');
    $(element).closest('.form-group').addClass('has-danger');
}

$("#jugador-add").click(function() {
    $("#myModalj").modal();

    $.validator.setDefaults({
        errorElement: "span",
        errorClass: "form-control-feedback",
        highlight: function(element) {
            danger(element)
        },
        unhighlight: function(element) {
            success(element);
        },
        errorPlacement: function (error, element) {
            if (element.parent('.custom-control').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
            error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

    $('#forminsertar').validate({
        rules: {
            'jNombre': {
                required:true
            }
        },
        messages: {
            'jNombre': {
                required: "Ingrese el nombre"
            }
        },
        submitHandler: function(form) {
            $.ajax({
                url: $(form).attr('action'),
                type: $(form).attr('method'),
                dataType: 'json',
                data: form.serialize(),
                beforeSend: function(){
                   //Aqui puedes agregar el loading o algo por el estilo
                },
                success: function(data){
                    alert("Informacion: Jugador creado correctamente!");
                    $('#myModalj').modal('hide');
                    location.reload();
                }
            });
        }
    });
});

Y Reemplaza el código HTML que tienes actualmente por este...

<div class="modal fade" id="myModalj" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <br />
            <div class="x_panel">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Añadir Jugador</h4>
            </div>
            <div class="form-group">
                <div class="alert alert-danger text-center" style="display:none;" id="error">
                    <strong>Adventencia: </strong>Debe completar todos los campos
                </div>
                <div class="alert alert-success text-center" style="display:none;" id="exito">
                    <strong>Felicidades: </strong>Su registro ha sido guardado
                </div>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form-label-left" action="jugador-insert.php" method="post" id="forminsertar" name="forminsertar" role="form">
                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input required="required" type="text" class="form-control has-feedback-left" name="jNombre" id="jNombre" placeholder="Nombre">
                        <span class="fa fa-user form-control-feedback left" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input required="required" type="text" class="form-control" name="jApellido" id="jApellido" placeholder="Apellido">
                        <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 xdisplay_inputx form-group has-feedback">
                        <input required="required" type="date" class="form-control has-feedback-left" name="jFecha" id="jFecha" placeholder="Fecha Nacimiento" aria-describedby="inputSuccess2Status4">
                        <span class="fa fa-calendar-o form-control-feedback left" aria-hidden="true"></span>
                        <span id="inputSuccess2Status4" class="sr-only">(success)</span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">

                        <input required="required" type="text" class="form-control" name="jCedula" id="jCedula" data-inputmask="'mask' : '999-9999999-9'" placeholder="Cedula">
                        <span class="fa fa-credit-card form-control-feedback right" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input required="required" type="text" class="form-control has-feedback-left" name="jCiudad" id="jCiudad" placeholder="Ciudad">
                        <span class="fa fa-building-o form-control-feedback left" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input required="required" type="text" class="form-control" name="jDireccion" id="jDireccion" placeholder="Direccion">
                        <span class="fa fa-home form-control-feedback right" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input required="required" type="text" class="form-control has-feedback-left" name="jEstatura" id="jEstatura" data-inputmask="'mask' : '99'" placeholder="Estatura">
                        <span class="fa fa-unsorted form-control-feedback left" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input required="required" type="text" class="form-control" name="jTelefono" id="jTelefono" data-inputmask="'mask' : '(999) 999-9999'" placeholder="Telefono">
                        <span class="fa fa-phone form-control-feedback right" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <select id="jrefEquipo" name="jrefEquipo" class="form-control has-feedback-left" required>
                            <option value="" selected>Sin Equipo</option>
                            <?php do { ?>
                            <option value="<?php echo $row_DatosEquipo[" idEquipo "]?>">
                                <?php echo $row_DatosEquipo["eNombre"]?>
                            </option>
                            <?php
                            } while ($row_DatosEquipo = mysqli_fetch_assoc($DatosEquipo));
                            ?>
                        </select>
                        <span class="fa fa-users form-control-feedback left" aria-hidden="true"></span>
                    </div>


                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">

                        <input required="required" type="text" class="form-control" name="jNumero" id="jNumero" data-inputmask="'mask' : '999'" placeholder="Numero Chaqueta">
                        <span class="fa fa-user form-control-feedback right" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12">
                        <select id="jrefPosicion" name="jrefPosicion" class="form-control has-feedback-left" required>
                            <option value="" selected>Sin Posicion</option>
                            <?php do { ?>
                            <option value="<?php echo $row_DatosPosicion[" idPosicion "]?>">
                                <?php echo $row_DatosPosicion["pPosicion"]?>
                            </option>
                            <?php
                            } while ($row_DatosPosicion = mysqli_fetch_assoc($DatosPosicion));
                            ?>
                        </select>
                        <span class="fa fa-sort-numeric-asc form-control-feedback left" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group ">
                        <input required="required" type="text" class="form-control" name="jImagen" id="jImagen" placeholder="Imagen">
                        <span class="fa fa-image form-control-feedback right" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input required="required" type="text" class="form-control has-feedback-left" name="jEmail" id="jEmail" placeholder="Email">
                        <span class="fa fa-envelope form-control-feedback left" aria-hidden="true"></span>
                    </div>

                    <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
                        <input required="required" type="text" class="form-control" name="jContraseña" id="jContraseña" placeholder="Contraseña">
                        <span class="fa fa-lock form-control-feedback right" aria-hidden="true"></span>
                    </div>

                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-primary">enviar</button>
                        </span>
                    </div>

                    <div class="form-group">

                    </div>
                    <div class="ln_solid"></div>
                    <div class="form-group">
                        <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">Cancelar</button>
                            <button class="btn btn-primary" type="reset">Limpiar</button>
                            <button id="aceptar_jugador" type="button" class="btn btn-success">Guardar</button>
                        </div>
                    </div>

                </form>
            </div>


        </div>
    </div>
</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.