Javascript- sprawdzanie pól input, checkboxa i daty.

Question

Hej, robię egzamin z czerwca 2018r. i mam problem z js (nie przemawia do mnie ten język). Założenia są takie: jeśli pola input będą puste - formularz się nie wyśle, dodatkowo otrzymam powiadomienie, że mam wypełnić to pole (to zrobiłem). Druga sprawa: jeżeli wpisana data jest z przeszłości, również muszę otrzymać wiadomość "Wpisz poprawną datę". Trzecie: checkbox. Jak wyżej, jeśli checkbox nie jest zaznaczony, wyświetl "Zaakceptuj regulamin".

Jeśli któraś z tych rzeczy nie będzie wypełniona/zaznaczona, w divie pod inputem lub chekiem pojawi się stosowna informacja, a formularz nie zostanie przesłany. 

W js raczkuję, więc każdy poprawny kawałek skryptu lub po prostu pomysł bardzo mi pomoże.

https://pastebin.com/HigT8R06 - kod HTML

function Wypelnione(pole) {
    if(pole.value == "") {
        document.getElementById("i"+pole.id).innerHTML = "To pole jest wymagane";
        return false;
    } else {
        document.getElementById("i"+pole.id).innerHTML = "";
        return true;
    }
}

window.onload = function(){
    
    document.getElementById("contactform").onsubmit = function() {
        if(
            Wypelnione(this.data_rez)  &&
            Wypelnione(this.liczba_osob) &&
            Wypelnione(this.telefon)
        ){
            return true;
        } else {
            return false;
        }
    }
        
}

 

 

Comments

z czym masz problem konkretnie?

---

Nie wiem czy to możliwe, ale skrypt powinien pobrać dzisiejszą datę i porównać ją z datą wpisaną do inputa o id="data_rez". Jeśli data w input jest z przeszłości, a nie z dzisiaj lub np. za tydzień- w div o id "idata_rez" pojawi się tekst "Wpisz poprawną datę" lub cokolwiek innego i formularz nie zostanie przesłany.

---

żeby pobrać aktualną date wystarczy coś takiego

const date = new Date();

jeśli chcesz porównać dwie daty możesz zrobić tak:

function compareDates(inputDate, todayDate) {
    return inputDate >= todayDate
}

//zwróci true jesli inputDate jest z przyszlosci 
//zwroci false jesli jest z przeszłości

//jesli inputDate bedzie mialo ten sam dzien co todayDate moze zwrocic rozne rzeczy zaleznie od godzin...
//ale nie wiem czy to teraz dla Ciebie najwazniejsze

 

Answer 1

Witam

Postanowiłem przygotować dla Ciebie mały przykład, myśle że na jego podstawie dasz radę wprowadzić odpowiednie zmiany w Twoim kodzie. To czego w moim kodzie brakuje to wskazanie który intput jest zły, to zostawiam do rozkminy Tobie.

Linki do zagadnień jakich funkcjonalności JS'a używałem:

• const
• eventy
• preventDefault
• split
• obiekt date

Gdybyś czegoś nie wiedział to pisz śmiało 

Ps to że pojawia się "Bad Path/boomboom/v2/index.html" oznacza że formularz został wysłany 

Comments

Szanuję wasz wysiłek (Twój i kolegi wyżej) i dziękuję za pomoc. Wiem, poprosiłem o "pomysł". Myślę jednak, że nieco przeceniłem się w JS, mój poziom to nie dno (chyba nawet niżej). Postaram się rozwiązać problem w Twoim kodzie. Szkoda, by czas, który poświęciliście poszedł na marne .

---

Schemat działania jest prosty musisz jakoś obsłużyć wysłanie formularza, więc do tego używasz eventów, następnie sprawdzasz dane z inputuów(wartości inputów pobierasz dopiero po sprowokowaniu wysłania formularza - mam nadzieje, że rozumiesz dlaczego), przy sprawdzaniu daty musisz trochę pokombinować w kodzie(przez to że input nie ma typu date), ale i z tym idzie się uporać(jeżeli nie rozumiesz jak działa funkcja validDate to pisz śmiało). Zostało ci jeszcze pokazanie które pole jest złe, napisałeś do tego funkcje Wypelnione, możesz np w elsie pod preventDefault() pobrać za pomocą Document.querySelectorAll() wszystkie inputy, otrzymasz wtedy kolekcje elementów na której możesz użyć for Each() lub zwykłego fora (przykład działania), gdzie każdy element z tej kolekcji zostanie sprawdzony twoją funkcją sprawdzającą

---

Ok, powiedzmy, że mam 1/3 ogarnięte. Byłbyś w stanie pomóc mi z walidacją tych dwóch dat (systemowej i z pola input)? Cały problem polega na tym, że skrypt musi być w czystym js, nie mogę korzystać z bibliotek, taki wymóg :/ . Coś napisałem, brak błędów w konsoli, jednak po wpisaniu daty z przeszłości nie dostaję w divie icheckbox żadnej wiadomości o błędzie.

<script>
function CompareDate() {
const today = new Date();
var m = today.getMonth()+1;
var d = today.getDay();
var y = today.getFullYear();

var date = new Date(y,m,d);

mydate= document.getElementById("data_rez").value;
console.log(date);
console.log(mydate)


     if(date>=mydate)
{
    document.getElemenById("idata_rez") = "Wprowadź poprawną datę rezerwacji.");
}
    CompareDate(); 

};

</script>

 

---

Cały problem polega na tym, że skrypt musi być w czystym js, nie mogę korzystać z bibliotek, taki wymóg :/

Tak się składa że ten problem nas nie dotyczy, cały kod który podałem wyżej jako przykład jest napisany w czystym JS, tylko że ja uwzględniłem nowsze standardy(np zamiast var używam const). split(), querySelector(), querySelectorAll(), addEventListener - to wszystko jest zwykły JS, tylko że "nowszy". To już zostało wyjaśnione, przejdźmy do sedna problemu, czyli do działania twojej funkcji.

const today = new Date();
var m = today.getMonth()+1;
var d = today.getDay();
var y = today.getFullYear();
 
var date = new Date(y,m,d);

Ten kod jest trochę dziwny, spójrz tworzysz sobie "today", w tej zmiennej teraz siedzi dzisiejsza data, to co robisz w trzech linijkach niżej to wyciągnięcie z tej dzisiejszej daty miesiąca, dnia i roku, tylko po to aby linijkę niżej stworzyć datę  na podstawie tych danych, czyli tworzysz nową date na podstawie dzisiejszej daty, czyli mając dzisiejszą date na jej podstawie tworzysz dzisiejszą date, trochę to zakręcone;).

Kolejna sprawa tyczy się "mydate" gdzie jest trzymana informacja od użytkownika, problem z tym polem jest taki, że to pole jest typu text(rozumiem, że takie są wytyczne z góry). Czyli wartość tego pola to nie jest żadna data tylko zwykły tekst np"2018-04-19". Naszym zadaniem jest zrobić z tego stringa date. Wiemy, że dane przyjdą do nas w formacie rrrr-mm-dd, czyli rok, miesiąc i dzień będą rozdzielone "-", można użyć metody split("-") która zwróci nam tablice trzech elementów, pierwszym z nich będzie "rok", drugim "miesiąc", a trzecim "dzień", każdy z tych elementów pomimo tego że wygląda na liczbe jest typu string. Czysty JS udostępnia nam parseInt(), który zamienia takie stringi wyglądające na liczby na faktyczną liczbe, gdy mamy już rok, miesiąc i dzień jako liczbe to na ich podstawie tworzymy tą date którą podał użytkownik, następnie porównujemy daty i zwracamy true lub false w zależności od przypadku.

Przeanalizuj jeszcze raz ten mój kod, użyj console.log'ów to tego aby zobaczyć cie kiedy jest czym, i ostatnia rzecz, podaj cały kod HTML i JS na którym obecnie pracujesz

function validDate(date){
  //sprawdzam czy data nie jest pustym stringiem, jeżeli jest zwracam false
  if(date === ''){
     return false;
   }
  const dateArr = date.split('-');//Tworze tablice - link do wyjaśnienie działania metody split podałem w poście
  
  const inputDate = new Date();//Umieszcze tutaj date na podstawie danych z formularza
  const now = new Date();//Data obecna
  
  inputDate.setYear(parseInt(dateArr[0]));//Przypisuje rok - zwróć uwage parseInt
  inputDate.setMonth(parseInt(dateArr[1]));//Przypisuje miesiąc
  inputDate.setDate(parseInt(dateArr[2]));//Przypisuje dzień
  
  if(now > inputDate){//Jeżeli obecna data jest większa od tej podanej zwracam false
     return false;
   }else{
     return true;
   }
}

 

---

https://pastebin.com/QbLDG9rH <- HTML. Praktycznie cały js bazuje na Twoim kodzie, na potrzeby zadania zmieniłem id na te z formularza. Niżej skrypt z pliku empty.js (który chyba już znasz, wyszukuje puste pola input i wyświetla błąd). W konsoli niespodzianka: Uncaught TypeError: Cannot read property 'addEventListener' of null at index.html:11.

   function Wypelnione(pole) {
    if(pole.value == "") {
        document.getElementById("i"+pole.id).innerHTML = "To pole jest wymagane";
        return false;
    } else {
        document.getElementById("i"+pole.id).innerHTML = "";
        return true;
    }
}
window.onload = function(){
    
    document.getElementById("form").onsubmit = function() {
        if(
            Wypelnione(this.data_rez) && Wypelnione(this.liczba_osob) && Wypelnione(this.telefon)
        ){
            return true;
        } else {
            return false;
        }
    }
        
}

 

---

Dostajesz ten błąd dlatego, że umieszczasz skrypt gdzie odwołujesz się do tego formularza zanim jest on stworzony. Parsowanie HTML działa w taki sposób, że przeglądarka go sobie pobiera, i leci linijka po linijce, jeżeli napotyka na tag script to zatrzymuje ten swój bieg, i wykonuje logikę zawartą w tym skrypcie, gdy już skończy kontynuuje swoje działania. I teraz spójrz ty w dziewiątej linijce chcesz pobrać formularz który jest stworzony dopiero w linijce nr 66, wystarczy że wrzucisz ten kod do oddzielnego pliku .js i podłączysz go tak jak podłączyłeś empty.js tylko pamiętaj aby dodać te skrypty na dole strony(przed zamknięciem body) żeby mieć dostęp do elementów HTML. Ewentualne możesz zostawić wszystko tak jak jest i do tych dwóch tagów script dodać defer - np <script src="empty.js" defer></script> też powinno zadziałać;)

Tutaj wyjaśnienie czym jest defer

https://forum.pasja-informatyki.pl/283643/blokujacy-renderowanie-kod-js?show=283643#q283643

https://www.youtube.com/watch?v=5H3zW5cCaDU

---

Dzięki za filmik, wyjaśnił kilka kwestii. Twój skrypt wrzuciłem w inny plik, po podłączeniu wszystko śmiga :). Usunąłem z niego zmienne odpowiadające za sprawdzanie inputów "liczba_osob" oraz "telefon", je sprawdza poprzedni kod. Po wpisaniu daty z przeszłości lub odznaczeniu checkboxa (lub obu opcji naraz) pojawia się alert, w przypadku poprawnych danych wszystko pięknie działa. Na koniec chciałbym ostatni raz skorzystać z Twojej pomocy, konkretnie - czy zamiast alertu, w przypadku np. odznaczonego checkboxa (data jest w porządku) informacja o błędzie mogłaby pojawić się w paragrafie obok (id="icheckbox", błąd np. "To pole jest wymagane") lub odwrotnie, niepoprawna data (informacja w paragrafie obok o id="idata_rez"), a chkbox zaznaczony? Twoje porady praktycznie już rozwiązały wszystkie problemy, jednak alert "Coś jest źle", choć działa, nie daje informacji gdzie brakuje wymaganych danych. Spróbujesz coś zrobić w tym kierunku czy też nie- rozwiązałeś problem, z którym bym sobie nie poradził. Jesteś wielki 

---

Przykład który (mam nadzieje) Ci pomoże znajduję się tutaj. Tego kodu trochę jest więc radziłbym Ci utworzyć jakiś nowy folder w nim plik .html i .js skopiować kod HTML I JS z CodePen'a i na spokojnie go przeanalizować, poczytać komentarze które Ci podałem i spróbować dokończyć na podstawie informacji zawartych w komentarzach kod, a dokładniej tę jedną funkcje. Gdybyś czegoś nie rozumiał śmiało kontynuuj wątek;)

I tak na przyszłość jeżeli np przeglądasz nie swój kod i napotkasz w nim na jakąś metodę której nie znasz to warto zajrzeć tu i tu może akurat znajdziesz wyjasnienie jej działania