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