Hola buenas tardes estoy intentando validar unos campos con setCustomValidity, las validaciones consisten en que si un input fecha esta vacío y el otro no o viceversa pintar los campos en color rojo y poner texto les anexo una imagen como ejemplo de lo que intento hacer. La validación ya la tengo, pero no logro pintar y mostrar el mensaje. Les comparto el formulario y código.
Resultado esperado
Formulario
$("#nc").click(function(){
var date_inicio = $("#date-inicio").find("input").val();
var date_fin = $("#date-fin").find("input").val();
if (date_inicio.length == 0 && date_fin.length == 0 || date_inicio.length > 0 && date_fin.length > 0) {
getAllTicketsAjax();
} else {
alert("bien");
date_inicio.setCustomValidity('The email address entered is already registerd.');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="col-12 form" id="registration">
<div class="form-row">
<div class="col-md-5">
<div class="form-group">
<label>Fecha Inicio:</label>
<div class="input-group date" id="date-inicio" data-target-input="nearest">
<input id="date-inicio" name="date-inicio" type="text" class="form-control datetimepicker-input" data-target="#date-inicio"/>
<div class="input-group-append" data-target="#date-inicio" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
<p id="p-date-inicio"></p>
</div>
</div>
<!-- /.form group -->
<div class="col-md-5">
<div class="form-group">
<label>Fecha Fin:</label>
<div class="input-group date" id="date-fin" data-target-input="nearest">
<input id="date-fin" name="date-fin" type="text" class="form-control datetimepicker-input" data-target="#date-fin"/>
<div class="input-group-append" data-target="#date-fin" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
<p id="p-date-fin"></p>
</div>
<!-- /.form group -->
</div>
<div class="col-md-2 align-self-center" style="padding-top: 1.5%">
<button type="button" id="nc" class="btn btn-block bg-gradient-info"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
Error
TypeError: date_inicio.setCustomValidity is not a function
En el else es donde intento pintar el input y mostrar el mensaje de error.
Espero que me puedan, apoyar por favor.
var date_inicio = $("#date-inicio").find("input").val();
y debería ser sobre el campovar date_inicio = $("#date-inicio").find("input");