2

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);
            }
        });
})

5 respuestas 5

4

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.

$(document).on("submit","#formulario",function(e){

e.preventDefault();

  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);
            }
        });

        return false;
})
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<form method="post" action="#" id="formulario">
 <div class="col-sm-12 mt"> 
  <section>
   <label for="motel">Elige el motel</label>
   <select class="form-control  sel" id="motel" required>
    <option value="" 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="" selected>Selecciona una opción...</option>
    <option value="101">habitacion 101</option>
    <option value="102">habitacion 102</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="" 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="submit" class="btn btn-primary btn-block" id="enviarForm">Enkámate </button>
</div>
</form>

14
  • Al parecer olvidé mencionar que hay un código en ajax adicional que puede estar presentando prolema. Commented el 20 nov. 2017 a las 21:08
  • @RaulMontes las preguntas debes saberlas redactar es importante que leas Cómo preguntar para que puedas recibir las respuestas que esperas, en este caso según lo que preguntaste la solución fue colocar el value del option predeterminado como vacío tal y como lo explica Santiago en su respuesta, saludos ! Commented el 20 nov. 2017 a las 21:16
  • Lamento haberlo pasado por alto, pero noté que el conflicto podría venir de ahí al ejecutar el código compartido y ver que si funcionaba ¿es posible hablar por otro medio y compartir un repositorio en github? Commented el 20 nov. 2017 a las 21:21
  • @RaulMontes Y aún con los ajustes de Santiago sigue sin funcionarte? Commented el 20 nov. 2017 a las 21:27
  • 1
    @RaulMontes ya edite mi respuesta con el ultimo requerimiento que hiciste. Commented el 20 nov. 2017 a las 21:58
1

Si vas a colocar un "select" como required, el "option" por defecto debe venir sin valor (value="") ejemplo:

<select class="form-control" id="habitacion" name="habitacion" required>
    <option value="" selected>Selecciona una opción...</option>
    <option value="1">Uno</option>
</select>
1

Con javascript una opcion seria asi ojala te sirva

function validar(){
 var elemento=document.getElementById("motel");
if(elemento.value==""){//validas el elemento
    alert("No has seleccionado un motel");//envias mensaje
Return false
}
//y asi para los demas
}

Se me olvidaba y en el form pones onsubmit="validar()" para llamar a la funcion así:

<form method="post" action="#" id="formulario"onsubmit="return validar()>
5
  • ¿En qué parte en concreto debo colocar el onsubmit="validar()"? Commented el 20 nov. 2017 a las 21:10
  • Aka un ejemplo <form onsubmit="validar()" >
    – Kevin
    Commented el 20 nov. 2017 a las 21:15
  • voy a probar, gracias. Commented el 20 nov. 2017 a las 21:21
  • @Raul edite mi respuesta se me habian pasado algunas cosas
    – Kevin
    Commented el 20 nov. 2017 a las 22:16
  • no fue posible hacer funcionar el código que me diste Commented el 22 nov. 2017 a las 13:25
0

La sintaxis correcta es solo:

<select class="form-control" id="habitacion" name="habitacion" required>
-1

Debes colocarlo de esta forma, te hace falta ="requiered":

<select class="form-control" id="habitacion" name="habitacion" required="required">
    <option value="0" selected>Selecciona una opción...</option>

Espero te funcione, si no, me avisas...

2
  • Pasar el valor required al atributo required no es obligatoriamente necesario, saludos! Commented el 20 nov. 2017 a las 20:58
  • 1
    De acuerdo lo tendré en cuenta de ahora en adelante. Gracias
    – Anderviver
    Commented el 20 nov. 2017 a las 21:00

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.