Formularz w javascript walidowanie błąd

0

Jestem tu nowy więc przede wszystkim witam wszystkich :).
Mam pewien problem, otóż obecnie przejrzałem kurs z javascript i chciałem zrobić formularz, który waliduje wprowadzane dane ale niestety gdzieś wdarł mi się błąd i przeglądam i nie mogę dojść gdzie. Czy moglibyście mi pomóc ?
Błąd jest taki że nie wypisuje w divie blad informacji o brakującym parametrze ("Wprowadz imie" itd.). I jeszcze chciałem się zapytać jak zrobić żeby gdy wszystkie 3 parametry nie są wprowadzone wyskakiwały w tym divie blad wszystkie 3 komunikaty, jak 2 pola nieuzupelnione poprwanie to 2 kmunikaty itd.

function waliduj() 
{
    var button = document.getElementById("zamowienie").onsubmit = function()
    {
        if(walidujInput("imie","blad") && walidujInput("nazwisko","blad") && walidujInput("email","blad"))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

function walidujInput(par, blad)
{
    var walidacja = /[a-z]/i;
    if (par == email)
    {
        walidacja = /[@]/;
    }
    var zmienna = document.getElementById(par);
    
    if(walidacja.test(zmienna.value) == true)
        {
            document.getElementById(blad).innerHTML = "";
            return true;
        }
     else
        {
            sprawdzWprowadzenie(par, blad);
            return false;
        }
}

function sprawdzWprowadzenie(par, blad)
{
    if(par == imie)
    {
        document.getElementById(blad).innerHTML = "Wprowadz imie";
    }
    if(par == nazwisko)
    {
        document.getElementById(blad).innerHTML = "Wprowadz nazwisko";
    }
    if(par == email)
    {
        document.getElementById(blad).innerHTML = "Wprowadz email";
    }
} 
window.onload = function()
{
    waliduj();
}

Oczywiście wszystkie wasze uwagi są mile widziane.

Swoją drogą widzę że kolega rafal222 przegląda ten sam kurs :).

Rozwiazałem już problem z wyświetlaniem oznaczałem wartości typu string jako zmienne ( nie wpisywałem w ""). Niedopatrzenie ale właśnie dalej nie wiem jak mam zrobić żeby wypisywało mi w divie blad wszystkie komunikaty nie tylko jeden.

1

Zobacz jak przebiega proces wykonania.
Submitujesz formularz i sterowanie wchodzi do if'a. Wykonują się tamte trzy funkcje, tylko że za każdym razem nadpisujesz innerHTML. innerHTML to zmienna obiektu blad. Jeżeli chcesz, żeby wyświetlone były 3 komunikaty musisz appendować do niej kolejną dreść, a nie ją zastępować :D Tzn. zrobić blabla innerHTML += "Komunikat".

Tutaj w najgorszym wypadku walidujInput("email","blad") zwraca true i zastępuje poprzednie błędy pustym stringiem w tym miejscu:

    if(walidacja.test(zmienna.value) == true)
        {
            document.getElementById(blad).innerHTML = "";
            return true;
        }

0

czyli coś takiego ?

function sprawdzWprowadzenie(par, blad)
{
    if(par == "imie")
    {
        document.getElementById(blad).innerHTML += "Wprowadz imie";
    }
    if(par == "nazwisko")
    {
        document.getElementById(blad).innerHTML += "Wprowadz nazwisko";
    }
    if(par == "email")
    {
        document.getElementById(blad).innerHTML += "Wprowadz email";
    }
}

bo i tak nie działa i jeśli nie wpiszę koljeny raz inputa "imie" i kliknę submit to dostane znowu ten sam komunikat obok niego i tak cały czas a pozostałe komunikaty działają ciągle tak samo wyświetlają się pojednyczo :(

Mogę zrobić innym sposobem że dam stringa w którym Znajdują się wszystkie komunikaty i po wykonaniu metody zamiast dodawać odejmuje komunikaty ale to i tak nie to bo jak wrócę na jakiegoś inputa i zmienię na ciąg znaków zły dla wyrażenia regularnego to nie pokazuje się komunikat, bym musiał znowu sprawdzać czy w stringu jest dany komunikat jeśli nie dodawać i dla każdego inputa..., a właśnie chciałbym zrobić minimalistycznie jakoś.

0

Chcesz, zeby tekst pojawial sie pod inputem, czy np. wszystko grupowo? Zaraz na szybko Ci stworze kod i wszystko objasnie i powiem co bylo zle :)

0

no więc tak mam taki przykładowy formularz:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Przykladowa strona</title>
    <link href="../css_files/style1.css" rel="stylesheet" type="text/css" />
    <script src="../js_files/script1.js" type="text/javascript"></script>
</head>
<body>
    <div class="blad" id="blad"></div>
    <div class="content">
        <h3>Formularz zamówienia</h3>
        <form action="zamowienie.html" method="get" name="zamówienie" id="zamowienie">
            <ul>
                <li>
                    <label>Nazwa produktu :</label>
                    <div><input name="produkt" type="text" id="produkt" /></div>
                </li>
                <li>
                    <label>Ilość :</label>
                    <div><input name="" type="text" id="ilosc" /></div>
                </li>
                <li>
                    <label>Imię :</label>
                    <div><input name="imie" type="text" id="imie" /></div>
                </li>
                <li>
                    <label>Nazwisko :</label>
                    <div><input name="nazwisko" type="text" id="nazwisko" /></div>
                </li>
                <li>
                    <label>Email :</label>
                    <div><input name="email" type="text" id="email" /></div>
                </li>
                <li>
                    <label>Adres :</label>
                    <div><textarea name="adres" cols="12" rows="4" id="adres"></textarea></div>
                </li>
                <li>
                    <label>Akceptuję regulamin :</label>
                    <div><input name="regulamin" type="checkbox" id="regulamin" /></div>
                </li>
            </ul>
            <div class="wyslij"><input name="wyslij" type="submit" value="Wyślij" id="wyslij" /></div>
        </form>
    </div>
</body>
</html>

i do tego mam taki kod js:

function waliduj() 
{
    var button = document.getElementById("zamowienie").onsubmit = function()
    {
        if(walidujInput("adres","blad") && walidujInput("ilosc","blad") && walidujInput("produkt","blad") && walidujInput("imie","blad") && walidujInput("nazwisko","blad") && walidujInput("email","blad"))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

function walidujInput(par, blad)
{
    var walidacja = /[a-z]/i;
    if (par == "email")
    {
        walidacja = /\w[@]\w/;
    }
    if (par == "produkt")
    {
        walidacja = /\w[a-z]\W[a-z]|\w[a-z]/;
    }
    if (par == "ilosc")
    {
        walidacja = /[0-9]/;
    }
    if (par == "adres")
    {
        walidacja = /\w[a-z0-9\/]/;
    }
    var zmienna = document.getElementById(par);
    
    if(walidacja.test(zmienna.value) == true)
        {
            document.getElementById(blad).innerHTML = "";
            return true;
        }
     else
        {
            sprawdzWprowadzenie(par, blad);
            return false;
        }
}

function sprawdzWprowadzenie(par, blad)
{
    if(par == "imie")
    {
        document.getElementById(blad).innerHTML += "Wprowadz imie";
    }
    if(par == "nazwisko")
    {
        document.getElementById(blad).innerHTML += "Wprowadz nazwisko";
    }
    if(par == "email")
    {
        document.getElementById(blad).innerHTML = "Wprowadz email";
    }
    if(par == "produkt")
    {
        document.getElementById(blad).innerHTML = "Wprowadz produkt";
    }
    if(par == "ilosc")
    {
        document.getElementById(blad).innerHTML = "Wporwadz ilosc";
    }
    if(par == "adres")
    {
        document.getElementById(blad).innerHTML = "Wprowadz adres";
    }
}
window.onload = function()
{
    waliduj();
}

I chciałbym aby w divie o id="bledy" wyświetlane były komunikaty w zależności od stanu uzupełnienia inputów jeden pod drugim.
Na razie otrzymałem efekt że wszystko działa, ale nie wyświetlają mi się wszystkie komunikaty tylko pojedyncze. Wcześniej kolega uświadomił mi że nadpisuje bledy.innerHTML i to prawda tylko dopiero zaczynam i tak średnio wiem jak to pozmieniać żeby było w miarę minimalistycznie a nie 100 linijek kodu dla takiego czegoś..

1

Proszę, oto kod :)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form id="form">
    	<input type="text" data-validator="name">
    	<input type="text" data-validator="email">
    	<input type="submit">
	</form>
	<div id="errorMessage"></div>
</body>
</html>
<script>
window.onload = function() {
	var form = document.getElementById("form");

	form.onsubmit = function() {
		return validateForm(this); // przekazujemy this, który pokazuje na nasz formularz, dzieki temu mamy dostep do niego w formularzu
	}
}

//funkcja walidujaca zwracajaca albo true albo false
function validateForm(form) {
	var formElements = form.getElementsByTagName("input"),
		errorDiv = document.getElementById("errorMessage"),
		invalidElems = []; // bedziemy tu wrzucac te inputy, ktore nie przeszly walidacji

// Główna pętla, której celem jest użycie odpowiedniego walidatora dla odpowiedniego elementu, czyli przechodzimy po wszystkich elementach w tagu form
	for (var i = 0; i < formElements.length; i++) {
		var tmpElement = formElements[i], //przy kazdym obrocie petli tutaj jest jeden z naszych inputow
			validationType = tmpElement.getAttribute("data-validator"), //trzymamy typ walidatora
			validationResult;

		switch(validationType) {
		    case "name": // jezeli data-validator=name to waliduje imie i przypisuje rezultat do validationResult
		        validationResult = validateName(tmpElement);
		        if(!validationResult) {
		        	invalidElems.push("imię");
		        }
		        break; 
		    case "email": // jezeli data-validator=email to waliduje imie i przypisuje rezultat do validationResult
		        validationResult = validateEmail(tmpElement);
				if(!validationResult) {
		        	invalidElems.push("adres email");
		        }
		        break;
		    default:
		}

	}

	if(invalidElems.length === 0) { // jezeli tablica jest pusta to znaczy ze wszysto ok
		return true;
	}

	errorDiv.innerHTML = buildErrorMessage(invalidElems); // dopiero tutaj ruszam inner html, zwracam na to uwage bo Ty go nadpisywales prawdopodobnie

	return false;
}

function validateName(elem) {
	var elemValue = elem.value;

	if(elemValue.match(/[a-z]+/i)) {
		return true;
	}
	return false;
}

function validateEmail(elem) {
	var elemValue = elem.value;

	if(elemValue.match(/[a-z]+@[a-z]+.(com|pl)/ig)){
		return true;
	}
	return false;
}

function buildErrorMessage(invalidElems) {
	return "Proszę uzupełnić następujące pola: " + invalidElems.join(", ");
}
</script>

Jak piszesz to dobrze jest sobie zaplanować co po kolei będzie realizowane i trzymać się tego, że dana funkcja robi jedną rzecz. Oczywiscie mozna to jeszcze rozbic np. na funkcje ktorej przekazujesz input i ona sobie tam sprawdza co to z typ i zwraca Ci true/false itd.

0

dzięki wielkie za gotowe rozwiązanie. Nie wiedziałem że na takie niby tylko sprawdzenie formularza wyjdzie tyle kodu. Musze jeszcze baaardzo dużo się pouczyć i może kiedyś ja będę mógł pomóc tobie :) .

a tak jeszcze chciałem się zapytać czy obecnie lepiej zacząć uczyć się asp.net czy php ?

0

jeszcze chciałem wrócić na chwilę do tego bo mam pytanie chciałbym żeby po kliknięciu submitt przeniosło mnie na inną stronę, na którą wskazałem, ale coś nie działa.
Sprawdziłem robiąc takie coś:

 <input type="button" id="newsite" value="newsite"/>

window.onload = function()
{
    var btnNewSite = document.getElementById("newsite");
    btnNewSite.onclick = function()
    {
        window.location.assign("stronaPrzykladowa.html");
    }
}

tak działa, ale jak chcę wrzucić w tym miejscu

    if(invalidElems.length === 0) { // jezeli tablica jest pusta to znaczy ze wszysto ok
        window.location.assign("stronaPrzykladowa.html");
        return true;
    }

lub

window.onload = function() {
    var form = document.getElementById("form");
 
    form.onsubmit = function() {
         if(validateForm(this))
{
   window.location.assign("stronaPrzykladowa.html");
   return true;
} 
return false;
    }
}

To nie działa(sugeruję się kodem, który wrzucił @Fi3rce (za co mu bardzo dziękuję )). Czy mógłby mi ktoś wytłumaczyć dlaczego?

0

Usuń return albo spróbuj z:

window.location.replace("link");

Jak nie zadziała dalej to wrzuć tam jakiegoś alerta żeby sprawdzić, czy w ogóle spełnia się warunek.
PS. Na konsoli żadnych błędów nie ma?

0

błędów brak.
Alerty wrzucałem już wcześniej i wszystko się wykonuje poza tym przekierowaniem do innej strony
próbowałem też z

window.location.replace("link");

ale niestety też nie działa :(

tutaj cały kod który mam wrzucam (jest prawie taki sam jak wcześniej wrzucał @Fi3rce) tylko zrobiłem jedną funkcję do sprawdzania imienia i maila zamiast dwóch i wprowadziłem button żeby sprawdzić czy działa ogólnie te

 window.location.assign("stronaPrzykladowa.html");

no i nazewnictwo inne.

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js_files/script1.js" type="text/javascript"></script>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" id="newsite" value="newsite"/>
    <form id="form">
        <input type="text" data-validator="name">
        <input type="text" data-validator="email">
        <input type="submit">
    </form>
    <div id="errorMessage"></div>
</body>
</html>

window.onload = function()
{
    var btnNewSite = document.getElementById("newsite");
    btnNewSite.onclick = function()
    {
        window.location.assign("stronaPrzykladowa.html");
    }
    var form = document.getElementById("form");
    form.onsubmit = function ()
    {
        return validateForm(this);
    }
}

function validateForm(form)
{
    var inputValue = document.getElementsByTagName("input");
    var errorDiv = document.getElementById("errorMessage");
    var errorMsg = [];

    for(var i=0; i < inputValue.length; i++)
    {
        var tmpInputValue = inputValue[i];
        var inputAttribute = tmpInputValue.getAttribute("data-validator");

        var validationResult;

        switch (inputAttribute)
        {
            case "name":
                validationResult = validateInput(tmpInputValue);
                if (!validationResult) {
                    errorMsg.push("imie");
                }
                break;
            case "email":
                validationResult = validateInput(tmpInputValue);
                if (!validationResult) {
                    errorMsg.push("email");
                }
                break;
            default:
        }
    }
    if(errorMsg.length === 0)
    {
        alert("trueValueSubmitForm"); //alert działa
        window.location.assign("stronaPrzykladowa.html"); //to już się nie wykonuje 
        return true; //zwraca prawdę 
    }
        errorDiv.innerHTML = errorBuilder(errorMsg);
        return false;
}
function errorBuilder(errorMsg)
{
    return "Brak danych w polach: " + errorMsg.join(", ");
}
function validateInput(value) {
    var valueInput = value.value;
    var inputTypeAtt = value.getAttribute("data-validator");
    if (inputTypeAtt === "name" && valueInput.match(/[a-z]/i)) {
        return true;
    }
    if (inputTypeAtt === "email" && valueInput.match(/[a-z]+@[a-z]+.(com|pl)/i)) {
        return true;
    }
    return false;
}

Pytam się o wszystko bo zaczynam przygodę z javascriptem i nie chcę później palnąć się na czymś co było jakąś podstawową zależnością.

1

@marianoo jeżeli używasz onsubmit i chcesz przenieść się w ten sposób to musisz przerwać domyślne działanie eventu submit tzn. return false zawsze, ale w zależności od tego co zwraca Ci funkcja validate to różne działania podejmujesz. Jeżeli chcesz to zrobić ładniej to możesz w funkcji submit przekazać event jako argument i użyć funkcji preventDefault(), czyli doslownie zapobiegnij domyślnemu.

window.onload = function() {
    var form = document.getElementById("form");

    form.onsubmit = function(event) {
        e.preventDefault();
        if (validateForm(this)) { // jak true to przenosi cie na inna strone
            window.location.assign("stronaPrzykladowa.html");
        } // else niekonieczny bo errorDiv.innerHTML = errorBuilder(errorMsg); dodaje sie w funkcji validate, a domyślne działanie forma i tak jest zatrzymane
    }
}

I staraj się nie wstrzykiwać logiki przejścia do validateForm. ValidateForm powinien zwracać true lub false i tyle, a co ktoś już sobie zrobi z tym wynikiem, czy wyświetli śmieszne koty, czy przejdzie na inna stronę to już jego sprawa :P Bo później jak ktoś będzie chciał wykorzystać twoją funkcję (albo Ty sam w innym meijscu) to będzie miał więcej rzeczy do przerabiania, dobrze jest tak robić żeby to było uniwersalne.

0

dzięki wielkie @Fi3rce . Myślałem właśnie że coś nie tak ze zwracaną warością ale nie wiedziałem jak się do tego zabrać :)

Formularz w javascript walidowanie błąd

1 użytkowników online, w tym zalogowanych: 0, gości: 1

Praca dla programistów

Forum dyskusyjne

Sprawy administracyjne

O nas

Skontaktuj się z nami