• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

formularz, Javascript, textarea

VPS Starter Arubacloud
+1 głos
340 wizyt
pytanie zadane 19 stycznia 2022 w JavaScript przez ferdynand Obywatel (1,250 p.)

Witam, 

Stworzyłem sobie formularz z dwoma inputami i jednym textarea, podczas sparwadzania inputow wszystyko fajnie chodzi,ale problem jest wtedy kiedy chce wyslac forularz. Mimo tego ze textarea nie jest pusty to funkcja i tak nie zmienia mi obramowki na zielony i text <small> pod spodem nie znika. Kiedy natomiast daje nasluchiwanie na textarea przy sparwdzaniu inputow, odrazu po wypelnieniu textarea jakas dowolną literką formularz mi sie zamyka. Nie do konca juz wiem co mogkbym zrobic, aby nasluchiwanie na textarea dzialalo tak jak dziala na inputy. Mam nadzieje, że zrozumiecie mój problem. Dodaje kod, aby kazdy mniej wiecej zrozumial o co chodzi, jeżeli nie zbyt jasno sie wyrazilem to przepraszam. :) z góry dziękuję za odpowiedzi, Pozdrawiam :)

 <div class="form-parent">
    <form action="/" method="get">
        <div class="form-control">
            <label for="name">Name</label>
            <input id="name" name="name" type="text">
            <small></small>
        </div>
       <div class="form-control">
        <label for="email">Email</label>
        <input id="email" type="email">
        <small></small>
       </div>
       <div class="form-control">
        <label for="message">Message</label>
        <textarea id="message" cols="10" rows="10"></textarea>
        <small></small>
       </div>  
        <button id="submit" type="submit">Submit</button>
    </form>
</div>
.form-parent {
   background-color: lightblue;
   color: white;
}
textarea {
    resize: none;
    padding: 5px;
}
form {
   display: block;
   margin-top: 20px;
   padding: 20px 20px 0;
}
input, label, textarea {
    width: 100%;
    font-family: Roboto, sans-serif;
}
.form-control label {
    display: inline-block;
    margin-bottom: 5px;
    color: black;
}
.form-control input {
    display: block;
    padding: 5px;
}
.form-control {
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 20px;
}
#submit {
    padding: 10px 30px;
    margin:10px 0 20px;
    background-color: lightblue;
    color: black;
    border: solid white 1px;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
}
small {
    font-family: Roboto, sans-serif;
    margin-top: 5px;
    visibility: hidden;
    color: rgb(182, 19, 19);
    position: absolute;
    bottom: 0;
    left: 0;
}
/* input check */
.form-control.success input { 
    border: 2px solid green;
}
.form-control.error input {
    border: 2px solid rgb(182, 19, 19);
}
.form-control.error textarea {
    border: 2px solid rgb(182, 19, 19);
}
/* textarea check */
.form-control.success textarea {
    border: 2px solid green;
}
.form-control.error small {
    visibility: visible;
}
/* zamykanie formularza */ 
form.close {
    visibility: hidden;
}
// Formularz 

const form = document.querySelector('form');
const yourName = document.getElementById('name');
const email = document.getElementById('email');
const msg = document.getElementById('message');

form.addEventListener('submit', (e) => {
    e.preventDefault();
    checkInputs();
})

yourName.addEventListener('input', () => {
    checkInputs();
})
email.addEventListener('input', () => {
    checkInputs();
})

function checkInputs() {
  const yourNameValue = yourName.value.trim(); 
  const emailValue = email.value.trim();
  const msgValue = msg.value.trim();

    
  if(yourNameValue === '') {
    setErrorFor(yourName, 'Name is required')
  }
  else {
    setSuccesFor(yourName);
  }
  if(emailValue === "") {
      setErrorFor(email, 'Email is required')
  }
  else if(!isEmail(emailValue)) {
      setErrorFor(email, 'Email is not valid')
  }
  else {
      setSuccesFor(email)
  }
  if (msgValue === "") {
      setTextError(msg, 'Message is required')
  }
  else {
      setTextSuccess(msg)
  }
  
  // zamykanie formularza 
  
  if (yourNameValue && emailValue && msgValue) {
     form.classList.add('close');
  }

}
function setTextError(textarea, message) { // funkcja odpowiedzialna za textarea
    const formControl = textarea.parentElement;
    const small = formControl.querySelector('small');
                                                        
    small.innerText = message;
    formControl.className = 'form-control error';
}
function setTextSuccess(textarea) {
    const formControl = textarea.parentElement;

    formControl.className = 'form-control success';
}

function setErrorFor(input, message) {
    const formControl = input.parentElement; 
    const small = formControl.querySelector('small')

    // add error message inside small
    small.innerText = message;
    // add error class
    formControl.className = 'form-control error';
}
function setSuccesFor(input) {
    const formControl = input.parentElement;
    formControl.className = 'form-control success';
}

function isEmail(email) {
    return /^\S+@\S+\.\S+$/.test(email);
}

 

2 odpowiedzi

+1 głos
odpowiedź 20 stycznia 2022 przez pablop76 VIP (123,060 p.)

Musisz dać nasłuchiwanie na textarea, ale nie możesz odpalać od razu zamykania formularza w tej funkcji (checkInputs). Przenieś zamykanie do osobnej funkcji  i odpal ją tylko w funkcji nasłuchiwania form. Będzie tylko problem z zasięgiem zmiennych

  const yourNameValue = yourName.value.trim(); 
  const emailValue = email.value.trim();
  const msgValue = msg.value.trim();

 więc musisz je wynieść na wyższy poziom.

komentarz 20 stycznia 2022 przez kamil Danielski Użytkownik (540 p.)

Bawiłem się Twoim  kodem i udało mi się zrobić zielone podkreślenie textarea gdy dałem na niego nasłuch.

email.addEventListener('input', () => {
    checkInputs();
})
email.addEventListener('textarea', () => {
    checkInputs();
})

da się też zrobić to w inny sposób. Są liczne różnice pomiędzy input i textarea np. do textarea nie działa funkcja trim(); usunięcie jej z twojego kodu również daje mi zielone podkreślenie przy border. 

Całe piękno programowania. Różne drogi, jeden rezultat :D

 

komentarz 21 stycznia 2022 przez VBService Ekspert (251,210 p.)
edycja 21 stycznia 2022 przez VBService

@kamil Danielski,

Bawiłem się Twoim  kodem i udało mi się zrobić zielone podkreślenie textarea gdy dałem na niego nasłuch.

kod

email.addEventListener('textarea', () => {
    checkInputs();
})

nie ustawia "nasłuchu" na textarea pomimo, że konsola nie "rzuca" błędu na ten zapis

  1. Nie ma takiego zdarzenia o takiej nazwie jak "textarea"
  2. W kontekście tego kodu email wskazuje na element input
    <input id="email" type="email">
    const email = document.getElementById('email');
    


    sprawdź
     

    <input id="email" type="email">
    <br /><br />
    <textarea id="message" cols="10" rows="10"></textarea>
    const email = document.getElementById('email');
    email.addEventListener('input', () => {
        email.style.backgroundColor = 'green';
    });
    email.addEventListener('textarea', () => {
        email.style.backgroundColor = 'yellow';
    });

     

 

Są liczne różnice pomiędzy input i textarea np. do textarea nie działa funkcja trim(); 

trim() nie będzie działać z textarea, bo jest metodą "wbudowanego" obiektu String js-ie, w kontekście tego kodu odwołuje się do wartości, którą zwraca value,

const msgValue = msg.value.trim();

a value zwraca zawartość elementu html (w tym przypadku textarea) w postaci String-a, stąd użycie trim jest jak najbardziej poprawne.

komentarz 23 stycznia 2022 przez ferdynand Obywatel (1,250 p.)

@pablop76, sory za tak póżny odzew, ale covid mnie rozłożył.

Podoba mi sie takie rozwiązanie, ale nie chodzi. Siedze juz pare godzin przy tym i naprawde, gdyby nie to, ze lubie to robic, komputera by juz nie było :p 

form.addEventListener('submit', (e) => {
    e.preventDefault();
    checkInputs();
    closeTheForm(); 
})

yourName.addEventListener('input', () => {
    checkInputs();
})
email.addEventListener('input', () => {
    checkInputs();
})
msg.addEventListener('input', () => {
   checkInputs();
})

function closeTheForm() {
    if (yourNameValue && emailValue && msgValue) {
   form.classList.add('close');
}
}

 

+1 głos
odpowiedź 22 stycznia 2022 przez VBService Ekspert (251,210 p.)
edycja 22 stycznia 2022 przez VBService

Może zapisz to tak, jak jest w drugim przykładzie z Element: focus event

 

czyli np.

function blur(e) {
  if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
    const formControl = e.target.parentElement;
    const small = formControl.querySelector('small');

    if (!e.target.value.trim()) {
      e.target.classList.remove('success');
      e.target.classList.add('error');
      small.textContent = e.target.name + ' is required';
    } else {
      if (e.target.name === 'email' && !isEmail(e.target.value)) {
        e.target.classList.remove('success');
        e.target.classList.add('error');
        small.textContent = 'Email is not valid';
      } else {
        e.target.classList.remove('error');
        e.target.classList.add('success');
        small.textContent = '';        
      }
    }
  }
}

 

całość

<div class="form-parent">
  <form action="/" method="get">
    <div class="form-control">
      <label for="name">Name</label>
      <input id="name" name="name" type="text">
      <small></small>
    </div>
    <div class="form-control">
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
      <small></small>
    </div>
    <div class="form-control">
      <label for="message">Message</label>
      <textarea id="message" name="message" cols="10" rows="10"></textarea>
      <small></small>
    </div>  
    <button id="submit" type="submit">Submit</button>
  </form>
</div>
.form-parent {
  background-color: lightblue;
}
.form-parent form {
  display: block;
  margin-top: 20px;
  padding: 20px 20px 0;
}
.form-parent input, label, textarea {
  width: 100%;
  font-family: Roboto, sans-serif;
}
.form-parent textarea {
  resize: none;
  padding: 5px;
}
.form-control {
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.form-control label {
  display: block;
  margin-bottom: 5px;
  color: black;
}
.form-control input {
  display: block;
  padding: 5px;
}
.form-parent form #submit {
  padding: 10px 30px;
  margin: 10px 0 20px 0;
  background-color: lightblue;
  color: black;
  border: 1px solid white;
  font-family: Roboto, sans-serif;
  font-size: 1rem;
}
.form-control small {
  display: block;
  height: 1em;
  font: 300 0.8em/1 Roboto, sans-serif;
  margin-top: 5px;
  color: rgb(182, 19, 19);
  text-transform: lowercase;
}
.form-control small:first-letter {
  text-transform: uppercase;  
}
.form-control .success { 
  border: 2px solid green;
  background-color: rgba(0, 255, 0, 0.1);
}
.form-control .error {
  border: 2px solid rgb(182, 19, 19);
  background-color: rgba(255, 0, 0, 0.1);
}
/* zamykanie formularza */
.form-parent .close {
  visibility: hidden;
}
const form = document.querySelector('form');
form.addEventListener('blur', blur, true);
form.addEventListener('submit', submit, true);

function submit(e) {  
  const name    = form.querySelector('#name').value.trim(),
        email   = form.querySelector('#email').value.trim(),
        message = form.querySelector('#message').value.trim();
  
  if ((name && email && message) && isEmail(email)) {
    form.classList.add('close');
  } else {
    e.preventDefault();
  }   
}

function blur(e) {
  if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA') {
    const formControl = e.target.parentElement;
    const small = formControl.querySelector('small');

    if (!e.target.value.trim()) {
      e.target.classList.remove('success');
      e.target.classList.add('error');
      small.textContent = e.target.name + ' is required';
    } else {
      if (e.target.name === 'email' && !isEmail(e.target.value)) {
        e.target.classList.remove('success');
        e.target.classList.add('error');
        small.textContent = 'Email is not valid';
      } else {
        e.target.classList.remove('error');
        e.target.classList.add('success');
        small.textContent = '';        
      }
    }
  }
}

function isEmail(email) {
  return /^\S+@\S+\.\S+$/.test(email);
}

 

Podobne pytania

0 głosów
2 odpowiedzi 473 wizyt
pytanie zadane 2 maja 2022 w JavaScript przez Czang Kai Shrek Obywatel (1,990 p.)
0 głosów
1 odpowiedź 2,295 wizyt
pytanie zadane 22 października 2017 w JavaScript przez Wojciech Tuszkiewicz Użytkownik (500 p.)
0 głosów
2 odpowiedzi 1,474 wizyt
pytanie zadane 6 października 2017 w JavaScript przez adrian588 Początkujący (470 p.)

92,453 zapytań

141,262 odpowiedzi

319,086 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...