¿Cómo puedo hacer que un formulario tenga campos requeridos cuando “required” no funciona?

publicado por: Anonymous

llevo un par de días intentando que un formulario que estoy haciendo para un proyecto de la U tenga campos requeridos pero la etiqueta el atributo “required” no funciona ¿podría haber un método alternativo?

Comparto el código del formulario

<form method="post">
<div class="col-sm-12 mt">
    <section>
        <label for="motel">Elige el motel</label>
        <select class="form-control  sel" id="motel" required="">
            <option value="0" selected>Selecciona una opción...</option>
            <option value="Ibiza">Ibiza</option>
            <option value="Carpe diem barrio abajo" >Carpe Diem Barrio Abajo</option>
            <option value="Carpe diem Chiquinquira" >Carpe Diem Chiquinquira</option>
            <option value="Cesar's Palace" >Cesar's Palace</option>
            <option value="El Faro" >El Faro</option>
            <option value="El Faraón" >El Faraón</option>
            <option value="Maracana" >Maracana</option>
        </select>
    </section>
</div>
<div class="col-sm-12 mt">
    <section>
        <label for="motel">Elige la Habitacion</label>
        <select class="form-control" id="habitacion" name="habitacion" required>
            <option value="0" selected>Selecciona una opción...</option>
        </select>
    </section>
</div>
<div class="col-sm-12 mt">
    <div class="input-field">
        <label for="date-start">Elige la fecha y la hora</label>
        <input type='text' id="FechayHora" class=' form-control' data-language='es' data-timepicker="true" placeholder="Seleccione una opción..." name="FechayHora" required="">
    </div>
</div>
<div class="col-sm-12 mt">
    <section>
        <label for="decoracion">¿Deseas decoración?</label>
        <select class="form-control sel" id="decoracion" name="decoracion" required>
            <option value="0" selected>Selecciona una opción...</option>
            <option value="Si" >Si</option>
            <option value="No">No</option>
        </select>
    </section>
</div>
<div class="col-sm-12 mt">
    <div class="input-field">
        <label for="mail">Correo Electrónico o Teléfono celular</label>
        <input type="text" class="form-control" id="mail" name="mail" placeholder="Escribe una opción..." required="" />
    </div>
</div>
<div class="col-md-12 mt">
    <div class="input-field">
        <h5 for="checkbox"><input type="checkbox" id="checkbox" name="checkbox" class="form-info" required="">
            Aceptas nuestros <a href="terminos-y-condiciones.html" target="_blank">Términos y Condiciones</a> y <a href="tratamiento-datos.html" target="_blank">Tratamiento de datos</a>
        </h5>
        <h5 class="form-info">* Solo podremos enviarte el código de reserva suministrando información veridica</h5>
    </div>
</div>
<div class="col-xs-12">
    <button type="button" class="btn btn-primary btn-block" id="enviarForm">Enkámate</button>
</div>

Además de ello tiene el siguiente código Ajax

$(document).on("click","#enviarForm",function(){
  var parametros = {
  "motel" : $("#motel").val(),
  "FechayHora" : $("#FechayHora").val(),
  "decoracion" : $("#decoracion").val(),
  "mail" : $("#mail").val(),
  "checkbox" : $("#checkbox").val(),
  "habitacion" : $("#habitacion").val()
  };


        $.ajax({
            url: "reserva.php",
            type: "POST",
            data: parametros,
            success: function(data){
                $("#formulario").html('');
                $("#formulario").html("<fieldset style='background-color: transparent !important;'><div id='success_page'><h2 style='color: #ffffff !important;'>¡Gracias por Utilizar Kama!</h2><p style='color: #ffffff !important;'>De 30 a 40 minutos nos estaremos contactando contigo. Espera la confirmación de tu reserva y enkámate.</p></div></fieldset>");

            },
            error: function (xmlHttpRequest, textStatus, errorThrown) {
                MensajeError(textStatus);
            }
        });
})

solución

Ejecuté tu código y ejecutando solo el required funciona, solo debes saber que en el valor por defecto del select, el value debe ser vacío, si no, tomará como que si tiene un valor ingresado.

Para que los atributos required se ejecuten el evento debe ser ejecutado por un submit y no por un click, es por eso que se cambia el botón de tipo button a tipo submit, ademas se le agrega un return false para que el formulario no se envie con metodo convencional sino por ajax.

_x000D_

_x000D_

$(document).on("submit","#formulario",function(e){_x000D_
_x000D_
e.preventDefault();_x000D_
_x000D_
  var parametros = {_x000D_
  "motel" : $("#motel").val(),_x000D_
  "FechayHora" : $("#FechayHora").val(),_x000D_
  "decoracion" : $("#decoracion").val(),_x000D_
  "mail" : $("#mail").val(),_x000D_
  "checkbox" : $("#checkbox").val(),_x000D_
  "habitacion" : $("#habitacion").val()_x000D_
  };_x000D_
_x000D_
_x000D_
        $.ajax({_x000D_
            url: "reserva.php",_x000D_
            type: "POST",_x000D_
            data: parametros,_x000D_
            success: function(data){_x000D_
                $("#formulario").html('');_x000D_
                $("#formulario").html("<fieldset style='background-color: transparent !important;'><div id='success_page'><h2 style='color: #ffffff !important;'>¡Gracias por Utilizar Kama!</h2><p style='color: #ffffff !important;'>De 30 a 40 minutos nos estaremos contactando contigo. Espera la confirmación de tu reserva y enkámate.</p></div></fieldset>");_x000D_
_x000D_
            },_x000D_
            error: function (xmlHttpRequest, textStatus, errorThrown) {_x000D_
                MensajeError(textStatus);_x000D_
            }_x000D_
        });_x000D_
_x000D_
        return false;_x000D_
})

_x000D_

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>_x000D_
_x000D_
<form method="post" action="#" id="formulario">_x000D_
 <div class="col-sm-12 mt"> _x000D_
  <section>_x000D_
   <label for="motel">Elige el motel</label>_x000D_
   <select class="form-control  sel" id="motel" required>_x000D_
    <option value="" selected>Selecciona una opción...</option>_x000D_
    <option value="Ibiza">Ibiza</option>_x000D_
    <option value="Carpe diem barrio abajo" >Carpe Diem Barrio Abajo</option>_x000D_
    <option value="Carpe diem Chiquinquira" >Carpe Diem Chiquinquira</option>_x000D_
    <option value="Cesar's Palace" >Cesar's Palace</option>_x000D_
    <option value="El Faro" >El Faro</option>_x000D_
    <option value="El Faraón" >El Faraón</option>_x000D_
    <option value="Maracana" >Maracana</option>_x000D_
   </select>_x000D_
  </section>_x000D_
 </div>_x000D_
 <div class="col-sm-12 mt">_x000D_
  <section>_x000D_
   <label for="motel">Elige la Habitacion</label>_x000D_
   <select class="form-control" id="habitacion" name="habitacion" required>_x000D_
    <option value="" selected>Selecciona una opción...</option>_x000D_
    <option value="101">habitacion 101</option>_x000D_
    <option value="102">habitacion 102</option>_x000D_
   </select>_x000D_
  </section>_x000D_
 </div>_x000D_
 <div class="col-sm-12 mt">_x000D_
  <div class="input-field">_x000D_
   <label for="date-start">Elige la fecha y la hora</label>_x000D_
   <input type='text' id="FechayHora" class=' form-control' data-language='es' data-timepicker="true" placeholder="Seleccione una opción..." name="FechayHora" required="">_x000D_
  </div>_x000D_
 </div>_x000D_
<div class="col-sm-12 mt">_x000D_
 <section>_x000D_
    <label for="decoracion">¿Deseas decoración?</label>_x000D_
    <select class="form-control sel" id="decoracion" name="decoracion" required>_x000D_
      <option value="" selected>Selecciona una opción...</option>_x000D_
      <option value="Si" >Si</option>_x000D_
      <option value="No">No</option>_x000D_
    </select>_x000D_
  </section>_x000D_
</div>_x000D_
    <div class="col-sm-12 mt">_x000D_
        <div class="input-field">_x000D_
            <label for="mail">Correo Electrónico o Teléfono celular</label>_x000D_
            <input type="text" class="form-control" id="mail" name="mail" placeholder="Escribe una opción..." required="" />_x000D_
        </div>_x000D_
    </div>_x000D_
    <div class="col-md-12 mt">_x000D_
        <div class="input-field">_x000D_
            <h5 for="checkbox"><input type="checkbox" id="checkbox" name="checkbox" class="form-info" required="">_x000D_
            Aceptas nuestros <a href="terminos-y-condiciones.html" target="_blank">Términos y Condiciones</a> y <a href="tratamiento-datos.html" target="_blank">Tratamiento de datos</a></h5>_x000D_
            <h5 class="form-info">* Solo podremos enviarte el código de reserva suministrando información veridica</h5>_x000D_
        </div>_x000D_
    </div>_x000D_
<div class="col-xs-12">_x000D_
    <button type="submit" class="btn btn-primary btn-block" id="enviarForm">Enkámate </button>_x000D_
</div>_x000D_
</form>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

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