0

tengo este formulario que necesito validar con ajax para que en el momento que escriba muestre el error sin tener que actualizar la pagina para que finalmente valide y pueda darle al botón y valla a una url con los datos.

después que se apretar el botón esta envía al archivo de compra con los datos del formulario en POST y funciona, pero me falta validar este formulario para solo deje enviar una ves que los datos sean escrito correctamente y redirija al archivo de compra con los datos.

Formulario.php

<section class="container_form">
  <div class="form">
    <h2>Rellena el formulario para participar</h2>
    <form action="<?php echo 'compra' ?>" method="post">
      <div class="form-group">
        <label for="nombres">Nombres</label>
        <input type="text" class="form-control" name="nombres" id="" placeholder="Nombres">
      </div>
      <div class="form-group">
        <label for="apellidos">Apellidos</label>
        <input type="text" class="form-control" name="apellidos" id="" placeholder="Apellidos">
      </div>
      <div class="form-group">
        <label for="rut">Rut</label>
        <input type="text" class="form-control" name="rut" id="" placeholder="11111111-1">
      </div>
      <div class="form-group">
        <label for="celular">Celular</label>
        <input type="text" class="form-control" name="celular" id="" placeholder="985114418">
      </div>
      <div class="form-group">
        <label for="correo">Correo electrónico</label>
        <input type="email" class="form-control" name="email" id="" placeholder="[email protected]">
      </div>
      <div class="form-group">
        <label for="recorreo">Repetir Correo electrónico</label>
        <input type="email" class="form-control" name="reemail" id="" placeholder="[email protected]">
      </div>
      <div class="form-group custom-control custom-checkbox">
        <input class="custom-control-input" type="checkbox" name="terminos" value="ok" id="customCheck" required>
        <label class="custom-control-label" for="customCheck"><a href="">Acepto los términos y condiciones de las bases del concurso.</a> </label>
      </div>

      <button type="submit" name="submit_compra" class="btn btn-primary btn-block btn-success btn-lg">PAGA AQUÍ</button>
    </form>
  </div>
</section>

compra.php

<?php 


//if (isset($_POST['submit_compra'])){
//    print_r($_POST);
//}else{
//    header('Location: '.$url.'formulario');
//}

//if(!$_POST){
//    header('Location: '.$url.'formulario');
    
//}

?>

<section class="container_form">
  <div class="form">
    <h2>Selecciona la cantidad de ticket a comprar</h2>
    <form action="">
      <div class="form-group">
        <label for="Número de ticket">Número de ticket</label>
        <select name="cantidad" class="form-control" id="">
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
          <option value="">3</option>
        </select>
      </div>
      <div class="form-group">
        <label for="nombres">Valor a pagar</label>
        <input type="text" class="form-control" name="total" id="" placeholder="$15.000" disabled>
      </div>

      <button type="submit" class="btn btn-primary btn-block btn-success btn-lg">Pagar ticket</button>
    </form>
  </div>
</section>

2
  • Agrega por favor lo que hayas intentado al momento
    – user128299
    Commented el 11 mar. 2021 a las 21:22
  • 1
    esta pregunta es muy amplia y esta basada en opiniones, existen múltiples forma de validar un formulario tanto con php como con javascript incluso el mismo html tiene la propiedad required para validar que el campo contenga un valor al ser enviado al backend.... te sugiero seas mas especifico e indiques que código de validación esta intentando hacer funcionar y que error especifico tienes.
    – user46896
    Commented el 11 mar. 2021 a las 21:41

2 respuestas 2

0

Lo que puedes hacer es agregar un id a tu formulario, para que lo valides antes de enviar la informacion por ejemplo:

<form id="formulario">
...
</form>

Suponiendo que usas Jquery (Pues parecen formularios en bootstrap)

$('#formulario').submit(function() {
    // agregar validacion
    return true; // return false para canselar el envio
});

2
  • El que use Bootstrap no es indicio de que obligatoriamente deba usar JQuery para el objetivo que busca :)
    – user128299
    Commented el 11 mar. 2021 a las 21:47
  • Es por qué jquery es dependencia por lo general de bootstrap
    – DavElsanto
    Commented el 11 mar. 2021 a las 22:13
0

Una de las maneras sencillas es la validación con jquery como te mencionan previamente pero componente por componente del formulario. En tu script debes validar cada elemento del formulario que podría ser de la siguiente manera:

<script>if($("#Observaciones").val() == ""){
    swal("El campo Observaciones no puede estar vacío.","Haga clic en OK para Cerrar","error");
    $("#Observaciones").focus();       // Esta función coloca el foco de escritura del usuario en el campo Nombre directamente.
    return false;
}</script> 

para ello el componente a validar tendría que tener un id y un name, aunque habrá quien diga que podría no ser necesario que tenga los dos elementos, yo prefiero ponerlos.

<td>
                <div class="form-group green-border-focus">
                <textarea id="Observaciones" name="Observaciones" rows="5" cols="80" placeholder="Introduzca sus observaciones" style=" font-size:10px;" ></textarea>
                </div>
            </td>

de esta manera cada que se pulsa el botón enviar, si no existe algún valor como en el ejemplo de este textarea, te envía el mensaje de alerta utilizando swetalert.

También puede añadir la etiqueta de HTML5 required que de manera "transparente desde el mismo navegador si tiene compatibilidad te alerta que no has colocado o escrito nada en ese componente.

<textarea id="Observaciones" name="Observaciones" rows="5" cols="80" placeholder="Introduzca sus observaciones" style=" font-size:10px;" required="" ></textarea>

Y también puedes validar con PHP para evitar que se brinquen las trancas.

Saludos

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.