¿Cómo insertar una alerta dentro de un input?

publicado por: Anonymous

Tengo dos input para capturar un rango de fechas específico:

_x000D_

_x000D_

Desde:_x000D_
<input type="text" class="datepicker" id="start_date" name="start_date" value="<?php echo $START_DATE ;?>" placeholder="Elegir Fecha Inicial" required>_x000D_
Hasta:_x000D_
<input type="text" class="datepicker" id="end_date" name="end_date" value="<?php echo $END_DATE ; ?>" placeholder="Elegir Fecha Final" readonly="readonly" >_x000D_
<input type="submit"id="btn_submit" value="Enviar"><br/>

_x000D_

_x000D_

_x000D_

… y una función de JavaScript para validar que si el campo de la fecha ‘desde’ es mayor que la fecha ‘hasta’, me muestre un alert:

$(function() {
  const textoIngresado = $("#start_date").val();
  const textoIngresado1 = $("#end_date").val();
  $("#btn_submit").on("click", function() {
    const textoIngresado = $("#start_date").val().split("-");
    const textoIngresado1 = $("#end_date").val().split("-");
    var fechaIngresada = new Date(
        textoIngresado[0], textoIngresado[1] - 1, textoIngresado[2]
    );
    var fechaLimite = new Date(
        textoIngresado1[0], textoIngresado1[1] - 1, textoIngresado1[2]
    );
    if (fechaIngresada > fechaLimite) {
        document.getElementById("start_date").setCustomValidity("Fecha Incorrecta");
      //alert("Fecha incorrecta"); 

    } 
  });
});

Lo que quiero no es mostrar un mensaje tipo alert, sino un mensaje como el que genera el atributo required en HTML al dejar un campo vacío.

Campo de entrada.

solución

Para cambiar el mensaje generado por el atributo required debes usar setCustomValidity() que recibe el texto que deseas que muestre. Debes tener en cuenta que esta función se usa por elementos del DOM y no directamente al elemento que obtienes por JQuery. Para hacerlo por JQuery tendrás que acceder al elemento de index=0 que es lo que te devolvera el DOM con el cual lo podrás hacer.

_x000D_

_x000D_

$(function() {_x000D_
  const textoIngresado = $("#start_date").val();_x000D_
  const textoIngresado1 = $("#end_date").val();_x000D_
  $("#btn_submit").on("click", function() {_x000D_
  debugger;_x000D_
    const textoIngresado = $("#start_date").val().split("-");_x000D_
    const textoIngresado1 = $("#end_date").val().split("-");_x000D_
    var fechaIngresada = new Date(_x000D_
      textoIngresado[0], textoIngresado[1] - 1, textoIngresado[2]_x000D_
    );_x000D_
    var fechaLimite = new Date(_x000D_
      textoIngresado1[0], textoIngresado1[1] - 1, textoIngresado1[2]_x000D_
    );_x000D_
    if (fechaIngresada > fechaLimite) {_x000D_
      document.getElementById("start_date").setCustomValidity("mensaje de prueba");_x000D_
      //mensaje de alerta_x000D_
    }_x000D_
  });_x000D_
});

_x000D_

document.getElementById("start_date").setCustomValidity("mensaje de prueba");_x000D_
//$("#start_date")[0].setCustomValidity("mensaje de prueba 2");

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>_x000D_
<form>_x000D_
  Desde: Desde:_x000D_
  <input type="text" class="datepicker" id="start_date" name="start_date" value="2018-11-11" placeholder="Elegir Fecha Inicial" required> Hasta:_x000D_
  <input type="text" class="datepicker" id="end_date" name="end_date" value="2018-10-10" placeholder="Elegir Fecha Final" readonly="readonly">_x000D_
  <input type="submit" id="btn_submit" value="Enviar"><br/>_x000D_
</form>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

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