Hello!
How to check these input?
Now it works only on the first thing to do, what would both be checked at any moment?

<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>
  • do not use duplicate id in one document, make them the same classes and go through getelementsbyclassname - G.Denis
  • but this is not the problem - Grundy

3 answers 3

 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>

    The error is that the current input value is passed to the function, but is not used. Instead, an attempt is made to get the value of the input with id = Date.

    Since the javascript assumes that id is unique on the page, the very first input is always obtained.

    Instead, you had to use the passed value, like this:

     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>

    • What since 29.02.2001 ? By the way, in my implementation works. - Qwertiy ♦
    • @Qwertiy, normalek is everything :) will be considered first in March :) well, and as you can see, I didn’t change the code, just now the parameter is used which is transmitted, and the checks are the same as they were - Grundy
    • and how the script understands that it is necessary to take data from this input? Due to onchange? - drtvader
    • @drtvader, you specify this in the attribute onchange="formatDate(this.value);" - in this case this is the current input. - Grundy
    • @Grundy thanks! Got it! - drtvader

    Do not write the name of the functions with a capital letter - it is so accepted to declare classes. Remember to write “var” when declaring variables. And most importantly, do not use the same id for the elements. They are identifiers, and they must be unique, js will simply find the first element that arrives and will process it. A collection of several elements you have to run through the cycles, that would process each.

     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>

    • What is the point of sorting parts of a date? - Grundy
    • Hmm, really, it makes no sense. I took the code of the vehicle and rewrote. There part of the date evolved in the reverse order, I did not looking, did the same. - Vasya Shmarovoz
    • there he brought the date to the required format. And when sorting, no one guaranteed that the months would be in the right place - Grundy