0

Привет!
Как проверить эти инпуты?
Сейчас работает только на первое,что надо сделать, что бы проверялись оба и в любой момент?

<script>
    function formatDate(){
        str = document.getElementById('Date').value;
        var err=[]

        function TstDate(){
            str2=str.split(".");
            if(str2.length!=3){return false;}
            str2=str2[2] +'-'+ str2[1]+'-'+ str2[0];
            if(new Date(str2)=='Invalid Date'){return false;}
            return str;
        }
        var S=TstDate()
        if(S){err.splice(0,1);
           document.getElementById("output").innerHTML = " ";
        } else {
            document.getElementById("output").innerHTML = "Введите правильно дату";
        };
    }
</script>
<div class="input-inner">
    <form>
        <input type="text" id="Date" placeholder="00.00.0000" class="firstDate" name="firstDate" onchange="formatDate(this.value);">
        <input type="text" id="Date" placeholder="00.00.0000" class="secondDate" name="secondDate" onchange="formatDate(this.value);">
    </form>
    <span id="output"></span>
</div>
2
  • нельзя использовать в одном document повторяющиеся id, сделайте им одинаковые классы и проходите getelementsbyclassname
    – G.Denis
    30 ноя 2016 в 19:58
  • но здесь проблема не в этом
    – Grundy
    30 ноя 2016 в 20:27

3 ответа 3

1

document.querySelector('form').addEventListener('input', function (e) {
  var inp = e.target;
  
  if (inp.classList.contains('date')) {
    var lbl = document.querySelector('label[for="' + inp.id + '"]');
    lbl.style.display = isValidDate(inp.value) ? 'none' : 'block';
  }
});

function isValidDate(dd_MM_yyyy) {
  if (!dd_MM_yyyy.match(/^\d+\.\d+\.\d+$/)) {
    return false;
  }
  
  var parts = dd_MM_yyyy.split(".").map(function (x) { return +x });
  
  if (parts.length !== 3 || parts[2] < 1000) {
    return false;
  }
  
  --parts[1]; // Month is 0-based
  var date = new Date(parts[2], parts[1], parts[0]);
  return date.getDate() === parts[0] && date.getMonth() === parts[1] && date.getFullYear() === parts[2];
}
label {
  display: none;
  color: red;
}
<form>
  <input type="text" id="firstDate" name="firstDate" placeholder="00.00.0000" class="date">
  <input type="text" id="secondDate" name="secondDate" placeholder="00.00.0000" class="date">
</form>

<label for="firstDate">First date is invalid</label>
<label for="secondDate">Second date is invalid</label>

1

Ошибка заключается в том, что в функцию передается текущее значение инпута, но не используется. Вместо этого идет попытка получить значение инпута с id=Date.

Так как яваскрипт предполагает что id уникально на странице, всегда получается самый первый инпут.

Вместо этого, надо было использовать переданное значение, например так:

function formatDate(str) {

  function TstDate() {
    str2 = str.split(".");
    if (str2.length != 3) {
      return false;
    }
    str2 = str2[2] + '-' + str2[1] + '-' + str2[0];
    if (new Date(str2) == 'Invalid Date') {
      return false;
    }
    return str;
  }
  if (TstDate()) {
    document.getElementById("output").innerHTML = " ";
  } else {
    document.getElementById("output").innerHTML = "Введите правильно дату";
  };
}
<div class="input-inner">
  <form>
    <input type="text" placeholder="00.00.0000" class="firstDate" name="firstDate" onchange="formatDate(this.value);">
    <input type="text" placeholder="00.00.0000" class="secondDate" name="secondDate" onchange="formatDate(this.value);">
  </form>
  <span id="output"></span>
</div>

5
  • Что с 29.02.2001? Кстати, в моей реализаци работает.
    – Qwertiy
    30 ноя 2016 в 20:45
  • @Qwertiy, нормалек все:) посчитает первым марта:) ну и как можешь заметить код я не менял, просто теперь параметр используется который передается, а проверки те же что и были
    – Grundy
    30 ноя 2016 в 21:10
  • а как скрипт понимает, что надо именно с этого инпута брать данные? За счет onchange?
    – drtvader
    1 дек 2016 в 4:28
  • @drtvader, ты это указываешь в атрибуте onchange="formatDate(this.value);" - в этом случае this это текущий инпут.
    – Grundy
    1 дек 2016 в 6:34
  • @Grundy спасибо! Понял!
    – drtvader
    1 дек 2016 в 6:36
1

Не пишите название функций с заглавной буквы — так принято объявлять классы. Не забывайте писать «var» при объявлении переменных. А главное, не используйте одинаковые id у элементов. Они на то и идентификаторы, что обязаны быть уникальными, js просто найдёт первый попавшийся элемент и будет его обрабатывать. А коллекции из нескольких элементов вам придётся прогонять через циклы, что бы обработать каждый.

function formatDate() {
  var forms = document.getElementsByClassName('date-form');
  var err = [];

  function testDate(forms) {
    var formsNum = forms.length;
    var ret = 0;

    Array.prototype.slice.call(forms).forEach(function(elem) {
      if (elem.value.split('-').length == 3 && new Date(elem.value) != 'Invalid Date')
        ret++;
    });

    return formsNum == ret;
  }

  document.getElementById('output').innerHTML = testDate(forms) ? '' : 'Введите правильно дату';

  if (testDate(forms)) {
    err.splice(0, 1);

    // Ну и весь остальной код ...
  }
}
<div class="input-inner">
  <form onchange="formatDate()">
    <input type="date" class="date-form" name="firstDate">
    <input type="date" class="date-form" name="secondDate">
  </form>
  <span id="output"></span>
</div>

3
  • в чем смысл сортировки частей даты?
    – Grundy
    30 ноя 2016 в 21:11
  • Хм, действительно, смысла нет. Я взял код ТС и переписал. Там части даты складывались в обратном порядке, я не глядя сделал тоже самое. 1 дек 2016 в 8:25
  • там он приводил дату к требуемому формату. А при сортировке никто не гарантировал, что месяцы окажутся на нужном месте
    – Grundy
    1 дек 2016 в 8:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.