[JavaScript] Problem z walidacją formularza Opcje

[ermar]

Witam.
W JS jestem zielony jak szczypior na wiosnę i potrzebuję pomocy.

Mam dwa inputy określające szerokość i wysokość pola.
Warunkiem jest , że jeden z wymiarów nie może przekroczyć 150 cm

Wymyśliłem taki kod

[HTML] pobierz, plaintext 
<script type="text/javascript">
var szerokosc = new LiveValidation('szerokosc', { validMessage: " " });
var wysokosc = new LiveValidation('wysokosc', { validMessage: " " });
 
if (wysokosc > 150)
{
szerokosc.add( Validate.Numericality, { minimum: 1, maximum: 150, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna szerokość to 1 cm!", tooHighMessage: "Jeden z wymiarów nie może przekraczać 150cm!"} );
}else
{
szerokosc.add( Validate.Numericality, { minimum: 1, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna szerokość to 1 cm!"} ); 
}
 
if (szerokosc > 150)
{
wysokosc.add( Validate.Numericality, { minimum: 1, maximum: 150, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna wysokość to 1 cm!", tooHighMessage: "Jeden z wymiarów nie może przekraczać 150cm!"} );
}
else
{
 wysokosc.add( Validate.Numericality, { minimum: 1, notANumberMessage: "Podaj tylko cyfry w centymetrach!",  tooLowMessage: "Minimalna wysokość to 1 cm!" } );
}
 
 
</script>
[HTML] pobierz, plaintext 

Ale pętla nie bardzo działa. Działa walidacja, pilnuje czy wartości nie są za małe i czy sa liczbami ale to wszystko.

Proszę uprzejmie o pomoc zielonemu.

Pozdrawiam
ermar

[croc]

Jaka pętla?

Sprawdź co zwraca konsola błędów.

[ermar]

Nie działa warunek z if jeżeli szerokość jest >150 tylko wykonuje się to co w else. To samo tyczy się drugiego if.
W Konsoli nie ma błędów dotyczących js, w firebug też error jest czysty.

Z pewnością źle coś robię ze zmiennymi ale nie wiem czego szukać ;/

[skowron-line]

1.

[JAVASCRIPT] pobierz, plaintext 
 alert(wysokosc);
alert(szerokosc);
[JAVASCRIPT] pobierz, plaintext 

sprawdz co jest w tych zmiennych
2.

[JAVASCRIPT] pobierz, plaintext 
alert(typeof wysokosc);
alert(typeof szerokosc);
[JAVASCRIPT] pobierz, plaintext 

3.

[JAVASCRIPT] pobierz, plaintext 
parseInt(wysokosc) > 150 // albo parseFloat(wysokosc)
parseInt(szerokosc) > 150 // albo parseFloat(szerokosc)
[JAVASCRIPT] pobierz, plaintext 

[ermar]

alert (zmienna) - wyskakuje okienko a w nim [object Object]

alert (typeof zmienna) - wyskakuje okienko a w nim object

A ostatnie parseInt(wysokosc) > 150 - nie działa skrypt.
tzn działa ale tak jak działał. Nie bierze warunku z if pod uwagę - działa tylko else

Ten post edytował ermar 5.11.2011, 09:59:47

[skowron-line]

A co ta klasa zwraca (IMG:style_emoticons/default/questionmark.gif) Jaki obiekt (IMG:style_emoticons/default/questionmark.gif) Dowiedz się tego a rozwiążesz problem.

[piotr.kazmiercza...]

Dlatego do debugowania stosować lepiej console.log(). Zmienić te alerty i zobacz co wyskoczy. Wynik console.log możesz zobaczyć w konsoli:
- Chrome wciśnij CTRL+SHIFT+i
- Firefox dograj firebuga
- IE zmień przeglądarkę na inną

[croc]

Zmienne wysokosc i szerokosc przechowują obiekty. Nie możesz bezpośrednio porównać obiektów do liczb. Dowiedz się co zawierają te obiekty. Prawdopodobnie będzie trzeba porównać pole tych obiektów do liczb.

[ermar]

Ok - z manula wiem już że zwraca
Returns:

true if valid or throws a Validate.Error object containing the failure message

Tylko teraz pytanie - bo nie bardzo kumam - jak mam sprawdzić czy jest true skoro mam jakby to sprawdzenie wewnątrz if.

Wiem, że to banalne pytania ale js to dla mnie czarna magia

[croc]

Nieważne co zwraca. Ważne, jakie pola zawiera.

[ermar]

Z całym szacunkiem ale zaczęło się pisanie dla sztuki.
Ja wiem, że nie wiem. Nie znam js i nie kryje się z tym.
Nie wiem jak się dobierać do obiektów w js.


Walidacja przy pomocy LiveValidation jest super dla takiego lamera jak jak. Odpalam i działam bez większych problemów jeżeli chodzi o normalny formularz.

W php jest prosto - przesyłam sobie dane do skryptu i wszystko widzę.


Pytam w przedszkolu bo to chyba miejsce dla takich jak ja. Przecież ja nie znając podstaw nie wiem nawet dokładnie o co odpytać google.

Ta walidacja to ułomek całej aplikacji phpowej na którą mam mało czasu i dlatego proszę o pomoc ludzi doświadczonych w tej dziedzinie bo wykładam się na czymś prostym dla praktyka js.

Zdaje sobie sprawę, że daje się wędkę a nie rybę ale naprawdę mam nóż na gardle.

Wymyśliłem sobie takie coś bo myślałem, że ruszy:L

[HTML] pobierz, plaintext 
if (document.wysokosc.value>150) 
[HTML] pobierz, plaintext 

ale to zupełnie nie działa.

Obiecuje, że chętnie się z js podszkolę jak skończę to co aktualnie dłubie bo jest niestety coraz bardziej potrzebne.

Jeżeli dążymy do tego aby opłacić poradę to proszę o info o cenie za usługę pomocy z js.

Pozdrawiam

[croc]

Skoro to gotowy skrypt, to chyba jest do tego jakaś instrukcja? (IMG:style_emoticons/default/smile.gif)

[ermar]

Tak - jest.
Odnosi się jednak do standardowej walidacji pól.
Z tym nie mam problemu.

To opis
"
Numericality (static function) Top

Validates that the value is numeric and: is an integer, is a specific number, is more than a minimum number, less than a maximum number, is within a range of numbers, or a combination of these

NB - numbers expressed in scientific form (ie 2e3, being 2000) are handled correctly, as are negative numbers, and floats.
Arguments:

value - {mixed} - value to be checked
paramsObj (optional) - {Object} - object containing parameters to be used for the validation
Parameters for paramsObj:

notANumberMessage (optional) - {String} - message to be used when validation fails because value is not a number (DEFAULT: “Must be a number!”)
notAnIntegerMessage (optional) - {String} - message to be used when validation fails because value is not an integer (DEFAULT: “Must be an integer!”)
wrongNumberMessage (optional) - {String} - message to be used when validation fails when ‘is’ param is used (DEFAULT: “Must be {is}!”)
tooLowMessage (optional) - {String} - message to be used when validation fails when ‘minimum’} param is used (DEFAULT: “Must not be less than {minimum}!”)
tooHighMessage (optional) - {String} - message to be used when validation fails when ‘maximum’} param is used (DEFAULT: “Must not be more than {maximum}!”)
is (optional) - {mixed} - the value must be equal to this numeric value
minimum (optional) - {mixed} - the minimum numeric allowed
maximum (optional) - {mixed} - the maximum numeric allowed
onlyInteger (optional) - {Boolean} - if true will only allow integers to be valid (DEFAULT: false)
Returns:

true if valid or throws a Validate.Error object containing the failure message
Example:

// check that value is an integer between -5 and 2000 exists in the string, case insensitive...
Validate.Numericality( 2e3, { minimum: -5, maximum: 2000 } );
"

Podziwiam, że warto się tak dowartościowywać kosztem niewiedzy innej osoby.

Ten post edytował ermar 5.11.2011, 13:54:12

[croc]

Kto się niby dowartościowuje? Mimo Twojego niegrzecznego zachowania odpowiem Ci.

Dopiero teraz zauważyłem, że przypisujesz wartość LiveValidation do zmiennej, którą walidujesz. Napisałeś, że zwraca to prawdę/fałsz. Przypisz LiveValidation do innych zmiennych, np. szerokoscWalidacja/wysokoscWalidacja. Wtedy szerokosc i wysokosc pozostaną nietknięte.

[ermar]

To nie jest tak do końca, że moje zachowanie jest niegrzeczne.
Po prostu frustrujący jest brak rzeczowej odpowiedzi, poza lakoniczną wstawką o czytaniu manuala z emotikonem na końcu.
Trudno - odebrałem jako sarkazm - jeżeli uraziłem Cię - przepraszam.
Co do skryptu to naprawdę nie wiem jak dalej. Zastosowałem sie do Twojej rady i podmieniłem zmienne ale nie działa.

[HTML] pobierz, plaintext 
<script type="text/javascript">
var szerokoscWalidacja = new LiveValidation(\'szerokosc\', { validMessage: " " });
var wysokoscWalidacja = new LiveValidation(\'wysokosc\', { validMessage: " " });
 
 
if (document.test.wysokosc.value>150)    
 
{
szerokoscWalidacja.add( Validate.Numericality, { minimum: 1, maximum: 150, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna szerokość to 1 cm!", tooHighMessage: "Jeden z wymiarów nie może przekraczać 150cm!"} );
}else
{
szerokoscWalidacja.add( Validate.Numericality, { minimum: 1, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna szerokość to 1 cm!"} ); 
 
}
if (document.test.szerokosc.value>150)
 
{
wysokoscWalidacja.add( Validate.Numericality, { minimum: 1, maximum: 150, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna wysokość to 1 cm!", tooHighMessage: "Jeden z wymiarów nie może przekraczać 150cm!"} );
}
else
{
 wysokoscWalidacja.add( Validate.Numericality, { minimum: 1, notANumberMessage: "Podaj tylko cyfry w centymetrach!",  tooLowMessage: "Minimalna wysokość to 1 cm!" } );
 
}
 
 
 
</script>
[HTML] pobierz, plaintext 

Pewnie czegoś nie rozumiem. A jedyny error który dostaje w firebug to "document.test is undefined". Form ma nadany id="test".

[Niktoś]

Zamiast dokument.test spróbuj dać document.forms[0].Może to pomoże.
Dziwne ale document.test też powinien działąc-może masz jakąś literówkę -wielkość liter w nazwach też ma znaczenie.

[croc]

Masz kilka błędów. Spróbuj tak:

[HTML] pobierz, plaintext 
<script type="text/javascript">
var szerokosc = document.test.szerokosc.value;
var wysokosc = document.test.wysokosc.value;
var szerokoscWalidacja = new LiveValidation(szerokosc, { validMessage: " " });
var wysokoscWalidacja = new LiveValidation(wysokosc, { validMessage: " " });
 
 
if (wysokosc>150)    
 
{
szerokoscWalidacja.add( Validate.Numericality, { minimum: 1, maximum: 150, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna szerokość to 1 cm!", tooHighMessage: "Jeden z wymiarów nie może przekraczać 150cm!"} );
}else
{
szerokoscWalidacja.add( Validate.Numericality, { minimum: 1, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna szerokość to 1 cm!"} ); 
 
}
if (szerokosc>150)
 
{
wysokoscWalidacja.add( Validate.Numericality, { minimum: 1, maximum: 150, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna wysokość to 1 cm!", tooHighMessage: "Jeden z wymiarów nie może przekraczać 150cm!"} );
}
else
{
 wysokoscWalidacja.add( Validate.Numericality, { minimum: 1, notANumberMessage: "Podaj tylko cyfry w centymetrach!",  tooLowMessage: "Minimalna wysokość to 1 cm!" } );
 
}
 
 
 
</script>
[HTML] pobierz, plaintext 

[ermar]

Raczej nie mam błędu w nazwach. document.form[0] też nie działa.
Dam może jeszcze form do obejrzenia

[HTML] pobierz, plaintext 
<form onchange="return true;" class="coords" method="post" action="index.php" id="test">
......
 
'<h4 style="font-size: 13px; color: #e84e02; margin: 0 0 10px 0; padding: 0;">Rozmiar</h4>
<input type="text" id ="szerokosc" name="szerokosc" style="width: 40px; margin: 0 5px 0 0; padding: 0; border: solid 1px #ccc;"> x 
<input type="text" id ="wysokosc" name="wysokosc" style="width: 40px; margin: 0 5px 0 5px; padding: 0; border: solid 1px #ccc;"> <br><br>
<span style="color: #e84e02;">UWAGA!</span> Jeden z wymiarów nie może przekraczać 150 cm. (max szerokość zadruku)<br><br>
 
<script type="text/javascript">
var szerokoscWalidacja = new LiveValidation(\'szerokosc\', { validMessage: " " });
var wysokoscWalidacja = new LiveValidation(\'wysokosc\', { validMessage: " " });
 
 
if (document.forms[0].wysokosc.value>150)    
 
{
szerokoscWalidacja.add( Validate.Numericality, { minimum: 1, maximum: 150, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna szerokość to 1 cm!", tooHighMessage: "Jeden z wymiarów nie może przekraczać 150cm!"} );
}else
{
szerokoscWalidacja.add( Validate.Numericality, { minimum: 1, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna szerokość to 1 cm!"} ); 
 
}
if (document.forms[0].szerokosc.value>150)
 
{
wysokoscWalidacja.add( Validate.Numericality, { minimum: 1, maximum: 150, notANumberMessage: "Podaj tylko cyfry w centymetrach!", tooLowMessage: "Minimalna wysokość to 1 cm!", tooHighMessage: "Jeden z wymiarów nie może przekraczać 150cm!"} );
}
else
{
 wysokoscWalidacja.add( Validate.Numericality, { minimum: 1, notANumberMessage: "Podaj tylko cyfry w centymetrach!",  tooLowMessage: "Minimalna wysokość to 1 cm!" } );
 
}
 
 
 
</script>
 
</form>
[HTML] pobierz, plaintext 

croc - niestety nie działa - tzn nic się nie dzieje.
Nie dostaje komunikatu o błędzie. Nie ważne czy wpisuje tekst czy cyfry nic się nie dzieje.
W firebug tylko
document.test is undefined
[Wstrzymuj na tym błędzie] var szerokosc = document.test.szerokosc.value;
Po prostu skrypt leży i kwiczy.

Skończyły mi się pomysły. Czuję się jak bym naprawiał samochód (IMG:style_emoticons/default/smile.gif) Jeżdżę bo umiem i znam obsługę auta ale pewnych rzeczy nie naprawię.

Wkleiłem wyżej forma - może coś to da . Mam już tam ustawione zdarzenie może to bruździ ? Nie wiem naprawdę.

Ten post edytował ermar 5.11.2011, 14:44:47

[Niktoś]

Spróbuj dać cały blok <script type="text/javascript"></script>poza obszar formularza. Nie wiem czy prawidłowo ,zrobiłeś umieszczając cały js w tagu<form>.

[ermar]

Wyrzuciłem za form ale niestety żadnej zmiany.