0

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.

5
  • 1
    Esto: 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 Commented el 29 jun. 2020 a las 19:33
  • Tienes toda la razón, pero no se esta pintando el mensaje debajo de mi campo input fecha o como lo tendría que hacer para que se pinte el mensaje en mi input?
    – Javier fr
    Commented el 29 jun. 2020 a las 19:38
  • Relacionado: Validación de formulario con JS Commented el 29 jun. 2020 a las 19:40
  • Según la documentación esta bien, me guie con los ejemplos que vienen aqui jqueryvalidation.org/validate
    – Javier fr
    Commented el 29 jun. 2020 a las 19:46
  • pero no se muestra el mensaje
    – Javier fr
    Commented el 29 jun. 2020 a las 19:46

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.