JQuery Bootstrap ошибка проверки датпикера не отображается

Question

Я бил головой об этой ошибке за несколько дней (на &), теперь и сейчас нужно еще пару глаз, чтобы рассказать мне, где я ошибаюсь. Я думаю, что это что-то простое, но не может его увидеть.

Проблема, с которой я столкнулась, - это сообщение проверки не отображается в поле выбора даты.

Нижеприведенный код РАБОТАЕТ, потому что валидация отображается в поле под полем datepicker. Проблема в том, что это поле должно быть скрыто, и если я скрою его, сообщение об ошибке не будет отображаться.

Если я изменю проверку jQuery для работы в поле datepicker, сообщение об ошибке не будет отображаться.

Я думал, обнаруженный код на этой странице поможет поэтому я включил этот файл и добавил dpDate: true как страница показывает, но до сих пор нет радости .:

http://keith-wood.name/uidatepickervalidation.html

Я надеюсь, что это не имеет смысла, и кто-то может мне помочь.

Вот мой HTML/JQuery

Это работает для startDate3 но если переименован в поле Datepicker startDate2:

$("#editEventForm").validate ({ 
 
rules: { 
 
\t artwork: { filesize: 2097152 }, 
 
\t name: { 
 
\t \t required: true, 
 
\t \t minlength: 2, 
 
\t \t maxlength: 50 
 
\t }, 
 
\t desc: { 
 
\t \t required: true, 
 
\t \t minlength: 2, 
 
\t \t maxlength: 3000 
 
\t }, 
 
\t venue2: { 
 
\t \t required: true 
 
\t }, 
 
\t startDate3: { 
 
\t \t required: true, 
 
\t \t dpDate: true 
 
\t }, 
 
\t endDate3: { 
 
\t \t required: true 
 
\t }, 
 
\t showFrom3: { 
 
\t \t required: true, 
 
\t \t greaterThan: "#startDate3" 
 
\t }, 
 
\t cutOffDate3: { 
 
\t \t required: true 
 
\t }, 
 
\t totalSubCat: { 
 
\t \t minStrict: 0, 
 
\t \t maxStrict: 4 
 
\t } 
 
}, 
 
messages: { 
 
\t name: "Please enter your name longer than 2 and less than 50 characters", 
 
\t desc: "Please enter a description longer than 2 and less than 3000 characters", 
 
\t venue2: "Please choose a venue", 
 
\t startDate3: "Please enter a start date/time", 
 
\t endDate3: "Please enter an end date/time", 
 
\t showFrom3: "Please enter a show from date", 
 
\t cutOffDate3: "Please enter a cut off date", 
 
\t totalSubCat: "Please choose between 1 and 3 categories" 
 
} 
 
})

<div class="form-group"> 
 
<i class="fa fa-question" id="startDate"></i> 
 
<label for="startDate2">Start</label> 
 
<div class="input-group date form_datetime" data-date="<?= date('Y-m-d') ?>T19:00:00Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="startDate3"> 
 
\t <input class="form-control" name="startDate2" id="startDate2" required size="16" type="text" readonly> 
 
\t <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> 
 
\t <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> 
 
</div> 
 
<input type="" id="startDate3" name="startDate3" /><br/> 
 
</div>

Answer 1

Вы пропустили некоторые библиотеки, не только JQuery:

$(function() { 
 
    $("#editEventForm").validate (
 
    { 
 
     rules: { 
 
     artwork: { filesize: 2097152 }, 
 
     name: { 
 
      required: true, 
 
      minlength: 2, 
 
      maxlength: 50 
 
     }, 
 
     desc: { 
 
      required: true, 
 
      minlength: 2, 
 
      maxlength: 3000 
 
     }, 
 
     venue2: { 
 
      required: true 
 
     }, 
 
     validDefaultDatepicker: { 
 
      required: true, 
 
      dpDate: true 
 
     }, 
 
     startDate3: { 
 
      required: true, 
 
      dpDate: true 
 
     }, 
 
     endDate3: { 
 
      required: true 
 
     }, 
 
     showFrom3: { 
 
      required: true, 
 
      greaterThan: "#startDate3" 
 
     }, 
 
     cutOffDate3: { 
 
      required: true 
 
     }, 
 
     totalSubCat: { 
 
      minStrict: 0, 
 
      maxStrict: 4 
 
     } 
 
     }, 
 
     messages: { 
 
     name: "Please enter your name longer than 2 and less than 50 characters", 
 
     desc: "Please enter a description longer than 2 and less than 3000 characters", 
 
     venue2: "Please choose a venue", 
 
     startDate3: "Please enter a start date/time", 
 
     endDate3: "Please enter an end date/time", 
 
     showFrom3: "Please enter a show from date", 
 
     cutOffDate3: "Please enter a cut off date", 
 
     totalSubCat: "Please choose between 1 and 3 categories" 
 
     } 
 
    } 
 
); 
 
    $('#startDate2').datepicker(); 
 
    $('#startDate3').datepicker(); 
 
});

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="http://code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script> 
 

 

 
<form id="editEventForm"> 
 
    <div class="form-group"> 
 
     <i class="fa fa-question" id="startDate"></i> 
 
     <label for="startDate2">Start</label> 
 
     <div class="input-group date form_datetime" data-date="<?= date('Y-m-d') ?>T19:00:00Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="startDate3"> 
 
      <input class="form-control" name="startDate2" id="startDate2" required size="16" type="text" > 
 
      <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span> 
 
      <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span> 
 
     </div> 
 
     <input type="" id="startDate3" name="startDate3" /><br/> 
 
    </div> 
 
    <input type="submit" value="ClickMe"> 
 
</form>

Answer 2

Почему бы не добавить к вашему элементу ввода следующие атрибуты, которые позволяют добавлять собственные сообщения для проверки. Вы можете разместить любое сообщение, которое вам нравится, между «».

data-rule-required="true" data_val_date = "Please enter a valid date"