Walidacja JS nie działa. DZIWNY PROBLEM.

Question

Witam, posiadam taki kod w formularzu:

<form action="zarejestruj.php" method="post" onsubmit="validateForm2()">

Oraz taki w js:

	function validateForm2() {
        if ($('#rej_login').val().length < 3 || $('#rej_login').val().length > 20 || $('#rej_haslo').val().length < 8 || $('#rej_haslo').val().length > 30 || $('#rej_haslo').val() != $('#rej_haslodwa').val() || $('#rej_email').val().length < 1 || !re.test($('#rej_email').val()) || $('#rej_email').val().length > 50) {
            return false;
        }
        else {
            return true;
        }
    }

Walidacja zachowuje się tak jak by jej nie było. Po kliknięciu submit mimo niespełnienia warunków pliki sa wysyłane do zarejestruj.php. Nie mam pojęcia dlaczego to nie działa i proszę o pomoc.
Pozdrawiam.

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener + https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
albo dodać return false do [onsubmit] (co jest rozwiązaniem prostszym, ale i gorszym)

Comments

	function validateForm2() {
        if (!($('#rej_login').val().length < 3 || $('#rej_login').val().length > 20 || $('#rej_haslo').val().length < 8 || $('#rej_haslo').val().length > 30 || $('#rej_haslo').val() != $('#rej_haslodwa').val() || $('#rej_email').val().length < 1 || !re.test($('#rej_email').val()) || $('#rej_email').val().length > 50))
        {
        	document.getElementById("rejestracja").action = zarejestruj.php;
            document.getElementById("rejestracja").submit();
        }
        else
        {
        	event.preventDefault();
        }
    }

Niestety strona nadal blokuje przesłanie do zarejestruj.php ale też nadal odświeża stronę. Czym różniło by się zamienienie odpalenia funkcji w html w onsubmit od dodania event listenera on click na przysick submit.

---

No bo event się z powietrza nie weźmie. Poczytaj o addEventListener, bo jest to o wiele lepszy sposób niż zabawy z przestarzałymi atrybutami na HTML.

---

Dzięki za pomoc, rozwiązałem to w taki sposób i działa:
 

	var ok2 = document.getElementById("ok2");
	ok2.addEventListener("click", function validateForm2() {
        if (!($('#rej_login').val().length < 3 || $('#rej_login').val().length > 20 || $('#rej_haslo').val().length < 8 || $('#rej_haslo').val().length > 30 || $('#rej_haslo').val() != $('#rej_haslodwa').val() || $('#rej_email').val().length < 1 || !re.test($('#rej_email').val()) || $('#rej_email').val().length > 50))
        {
        	document.getElementById("rejestracja").setAttribute("action","zarejestruj.php");
            document.getElementById("rejestracja").submit();
        }
        else
        {
        	event.preventDefault();
        }
    }
	, false);

Gdzie przycisk submit ma id="ok2" a  z htmla zostały usunięte atrybuty onsubmit i action :)

---

Poprawniej byłoby się podpiąć pod zdarzenie submit samego formularza.

---

Niestety podpinanie się do submit formularza zawsze  skutkowało oświeżeniem strony. Gdy wszystkim zajmuje się javascript to działą tak jak podałem.

---

No bo dalej niepoprawnie próbujesz się dostać do event…

document.getElementById('rejestracja')..addEventListener("submit", function validateForm2(event) {
        if (!($('#rej_login').val().length < 3 || $('#rej_login').val().length > 20 || $('#rej_haslo').val().length < 8 || $('#rej_haslo').val().length > 30 || $('#rej_haslo').val() != $('#rej_haslodwa').val() || $('#rej_email').val().length < 1 || !re.test($('#rej_email').val()) || $('#rej_email').val().length > 50))
        {
        	document.getElementById("rejestracja").setAttribute("action","zarejestruj.php");
        }
        else
        {
        	event.preventDefault();
        }
    }
	, false);

 

Answer 2

Zmieniłem teraz kod na coś takiego:

<form id="rejestracja" action="" method="post" onsubmit="validateForm2()" autocomplete="off">

oraz:
 

	function validateForm2() {
        if (!($('#rej_login').val().length < 3 || $('#rej_login').val().length > 20 || $('#rej_haslo').val().length < 8 || $('#rej_haslo').val().length > 30 || $('#rej_haslo').val() != $('#rej_haslodwa').val() || $('#rej_email').val().length < 1 || !re.test($('#rej_email').val()) || $('#rej_email').val().length > 50))
        {
        	document.getElementById("rejestracja").action = zarejestruj.php;
            document.getElementById("rejestracja").submit();
        }
    }

Teraz teoretycznie działa, lecz jest jedna rzecz która mnie denerwuje. Strona się odświeża gdy warunki walidacji nie są spełnione. Chciałbym aby się nie odświeżała. Czy da się to jakoś zrobić?