Проверьте поле даты в фокусе с помощью jquery-validation - PullRequest
Новая
       17

Проверьте поле даты в фокусе с помощью jquery-validation

0 голосов
/ 29 июня 2018

Поле ввода даты недопустимо, При первом выборе даты.
Отображается обязательное сообщение об ошибке, поскольку в поле есть пустое значение ( check log log ). Но поле будет действительным при втором изменении.

Примечания. Причина в том, что поле ввода даты теряет фокус при выборе даты (событие щелчка). Но дата заполняется только позже, изменяется, когда происходит событие click. Но валидатор проверит поле на событии фокуса.

Я проверяю форму с помощью Jquery Validation , используя bootstrap-datepicker для Widget.

^^ для Better UX Выполнить фрагмент кода на полной странице;) или же jsfiddle

от @Sparky / @Vignesh ans: Да, это обходной путь для этого, мы можем использовать обработчик событий change / hide / changeDate (атрибут модуля). Он срабатывает после установки входных значений. Но проблема в том, что каждый раз, когда мы выбираем год-> месяц-> дату, каждый щелчок в средстве выбора убирает фокус с события ввода и запускает фокусировку и показывает сообщение об ошибке до выбора даты.

Оно не плоское, как поле выбора. в поле выбора не происходит событие фокусировки, пока не будет выбрана опция из виджета поля. Например, как мы можем перемещаться по годам / месяцам / датам, не видя сообщения об ошибке?.

jQuery: & HTML 

    $(function() {
      $("#editEventForm").validate({
        rules: {
          full_name: {
            required: true,
          },
          event_date: {
            required: true,
          },
        },
        messages: {
          full_name: "Please enter your full name!",
          event_date: "Please enter valid date!",
        },
        highlight: function(element, errorClass) {
          var e = $(element);
          e.closest('.has-feedback').removeClass('has-success').addClass('has-error');
        },
        unhighlight: function(element, errorClass) {
          var e = $(element);
          e.closest('.has-feedback').removeClass('has-error').addClass('has-success');
        },
        onfocusout: function(element) {
          console.log("element value --> ", $(element).val());
          return $(element).valid();
        },
      });
      $('#eventDate').datepicker({
        autoclose: true,
      }).on('change', function() {
        $(this).valid(); // triggers a validation test
        // $(this) refers to $('#eventDate')
      });

    });
.has-error :focus {
  border-color: #f84545 !important;
}
.error {
  color: #f84545;
}
<link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>



<form id="editEventForm">
  <div class="form-group">
    <div class="has-feedback">
      <label for="eventDate">Full Name * </label>
      <input class="form-control" id="fullName" name="full_name" type="text">
    </div>
    <div class="has-feedback">
      <label for="eventDate">Event Date * </label>
      <input class="form-control" id="eventDate" name="event_date" placeholder="MM/DD/YYYY" type="text">
    </div>
  </div>
  <input type="submit" value="ClickMe">
</form>

Ответы [ 4 ]

0 голосов
/ 06 июля 2018

Упрощение обходного пути @Vignesh.

Мы можем пропустить проверку поля onfocusout, и мы делаем проверку для hide событие 

// here we can skip the validation
onfocusout: function(element) {
  var elementId = element.getAttribute('id');
  if (elementId === "eventDate") {
    // datepicker widget - don't do validation on focusout event
    return false;
  }
  return $(element).valid();
},


// here we can do the validation
$('#eventDate').datepicker({
  autoclose: true,
}).on('hide', function() {
  // datepicker - on hide do the field validation
  $('#eventDate').valid();
});

Jsfiddle

0 голосов
/ 02 июля 2018

Вопрос не может быть закрыт как дубликат из-за щедрости.

Плагин jQuery Validate автоматически запускает проверочный тест при выделении фокуса и заполнении полей ввода обычной формы и плохо работает со средством выбора даты.

Вам придется программно запускать проверку всякий раз, когда вы выбираете дату: 

$('#eventDate').datepicker({
    autoclose: true,
    // endDate: '+45d', // show current date - next 45 days
}).on('change', function() {
    $(this).valid();  // triggers a validation test
    // $(this) refers to $('#eventDate')
});
0 голосов
/ 02 июля 2018

TL; DR : событие щелчка перемещает фокус на элемент, по которому щелкнули. Следовательно, при щелчке по дате в средстве выбора удаляется фокус с ввода и запускается событие focusout. Перед настройкой входного значения сборщик выполняет различные операции. Следовательно, значение остается пустым на focusout. Следовательно, предупреждение остается в интерфейсе пользователя.

Объяснение : При щелчке / фокусировке поля date открывается datepicker. Настоящая проблема возникает при нажатии на date в datepicker. Как только вы нажмете на нее, вы увидите, что поле даты теряет фокус (мигающая каретка исчезает) немедленно. Сборщик закрывается сразу же, как мы настроили autoclose:true. Ниже приведена функция скрытия, написанная внутри средства выбора даты. 

hide: function() {
        return this.isInline || !this.picker.is(":visible") ? this : (this.focusDate = null,
        this.picker.hide().detach(),
        this._detachSecondaryEvents(),
        this.setViewMode(this.o.startView),
        this.o.forceParse && this.inputField.val() && this.setValue(),
        this._trigger("hide"),
        this)
  1. Заставляет сборщика прятаться.
  2. detach() позволяет удалить соответствующие элементы, не затрагивая детали элемента, в случае повторной установки элементов.
  3. Удаляет вложенные вторичные события из средства выбора даты.
  4. Устанавливает видовой режим на настроенный (поскольку он не настроен в нашей задаче, он устанавливается на режим по умолчанию).
  5. Анализирует выбранное значение и устанавливает проанализированный результат в поле ввода.
  6. Запускает пользовательский обратный вызов (если есть), настроенный в опциях

Таким образом, перед установкой значения на входе происходит событие onfocusout. И поскольку в это время значение отсутствует, отображается ошибка.

Чтобы этого не происходило, добавьте обработчик событий hide в средство выбора (как показано ниже) и выполните ту же проверку оттуда. Этот пользовательский обработчик событий запускается после установки входных значений (как описано выше). 

$(function() {
  $("#editEventForm").validate({
    rules: {
      full_name: {
        required: true,
      },
      event_date: {
        required: true,
      },
    },
    messages: {
      full_name: "Please enter your full name!",
      event_date: "Please enter valid date!",
    },
    onfocusout: function(element) {
        $(element).valid();
    },
  });
  $('#eventDate').datepicker({
    autoclose: true,
    orientation: "bottom right"
  }).on("hide",function(){
      $("#editEventForm").data("validator").settings.ignore="";
      $(this).valid();
  }).on("focus",function(){
      $("#editEventForm").data("validator").settings.ignore="#eventDate, :hidden";
  });
});
<link id="bs-css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<link id="bsdp-css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>



<form id="editEventForm">
  <div class="form-group">
    <div>
      <label for="eventDate">Full Name * </label>
      <input class="form-control" id="fullName" name="full_name" type="text">
    </div>
    <div>
      <label for="eventDate">Event Date * </label>
      <input class="form-control" id="eventDate" name="event_date" placeholder="MM/DD/YYYY" type="text">
    </div>
  </div>
  <input type="submit" value="ClickMe">
</form>

Редактировать : Как уже было сказано, мы не можем предотвратить запуск события focusout. Но требование может быть достигнуто с помощью обходного пути.

В фокусе, ignore проверка и на hide, удалить игнорируемую проверку и подтвердить.

Для ясности проигнорируйте проверку для указанного элемента с помощью 

$("#editEventForm").data("validator").settings.ignore="#eventDate, :hidden";`

(:hidden - значение по умолчанию, поэтому не опускайте его). Во время проверки плагин внутренне использует селектор jQuery not для игнорирования элементов. При скрытии средства выбора даты (либо путем выбора даты / клика), удалите элемент из конфигурации и примените проверку.

0 голосов
/ 29 июня 2018

Вы можете установить дату при первой загрузке в окне выбора даты. 

$('#eventDate').datepicker({
                autoclose: true 
            }).datepicker("setDate", 'now');
...