Hola buenas tardes estoy intentando validad un formulario con jqueryvalidation pero me marca error “SyntaxError: missing : after property id”. Si únicamente dejo el Alert que esta dentro del IF si muestra el Alert, pero cuando pongo el código de la librería jqueryvalidation es cuando me marca error. Únicamente como ejemplo intento mostrar mensaje de validación en un campo, pero no queda.
Les comparto mi código Javascript y el formulario.
Formulario
<form class="col-12" id="registration" name="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>
</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>
</div>
<!-- /.form group -->
</div>
<div class="col-md-2 align-self-center" style="padding-top: 1.5%">
<button type="button" class="btn btn-block bg-gradient-info" onclick="getAllTicketsAjax()"><i class="fas fa-search"></i></button>
</div>
</div>
</form>
Validación
function getAllTicketsAjax() {
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) {
alert("si valida");
$("#registration").validate({
rules: {
date-inicio: "required"
},
messages: {
date-inicio: "Please specify your name"
}
});
} else {
//si todo esta bien ejecutaría otra función
}
}
Espero que me puedan apoyar a verificar mi error por favor.
date-inicio
no es un nombre de variable o propiedad válida en Javascript. Debes ponerlo entre comillas:"date-inicio"
(cuando es una propiedad o atributo de un objeto), ya que el motor de Javascript lo interpreta como una operación aritmética:date - inicio
. Haz la prueba y comenta el resultado. Saludos