Wiadomość required

Question

Witam,

Zrobiłem formularz kontaktowy i sprawdzanie jego poprawności. Użyłem funkcji required w inputach formularza. Chcę aby przy konkretnym błędzie była pokazywana informacja o błędzie za pomocą required ale z moim tekstem. Czy da się takie coś wykonać?

 

<form class="contact-form" action="contactform.php" method="POST" onsubmit="return validation();">
                    <input type="text" name="name" class="form-item-1 form-item" id="name" placeholder="Pełne imie i nazwisko*" minlength="4" maxlength="30" required >
                    <input type="email" name="mail" class="form-item-2 form-item" id="mail" placeholder="Twój e-mail*" minlength="5" maxlength="50" required>
                    <input type="text" name="subject" class="form-item-3 form-item" id="subject" placeholder="Tytuł" minlength="5" maxlength="30" required>
                    <textarea name="message" class="form-item-4 form-item" id="text" placeholder="Opis*" minlength="30" maxlength="250" required></textarea>
                    <button type="submit" class="form-item-5 form-button" name="submit">Wyślij</button>

function validation()
{
    var name = document.getElementById("name").value;
    var mail = document.getElementById("mail").value;
    var subject = document.getElementById("subject").value;
    var text = document.getElementById("text").value;
    var a = /^[A-Za-z ]+$/;
    var b = /^[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]+$/;

    if (name == "")
    {
        return false;
    }
    
    if (!name.match(a))
    {
        return false;
    }

    if (mail == "")
    {

        return false;
    }

    if (!mail.match(b))
    {

        return false;
    }

    if (subject == "")
    {

        return false;
    }

    if (!text == "")
    {

        return false;
    }


    return true;
}

 

Answer 1

Zapewne chodzi Ci o ustawienie setCustomValidity

Comments

Ale zmienna name to string, a nie obiekt DOM. Więc nie ma metody setCustomValidity.

var name = document.getElementById("name").value;

---

A jak zrobić żeby była taka metoda?

---

var nameInput = document.getElementById("name");

if (nameInput.value === '') {
  nameInput.setCustomValidity('My custom message...');
}

 

---

Nadal nie działa

---

Przełącz wywołanie funkcji validation z onsubmit formularza, na zdarzenie click przycisku submit. Najlepiej przez addEventListener.