Blady214
(Blady214)
7 Styczeń 2014 09:38
#1
Witam,
posiadam stronę z przygotowanym formularzem w HTML 5, a jak dobrze wiemy niestety nie wszystkie przeglądarki są w stanie to obsłużyć, dlatego też chciałem skorzystać z metody, która wydaje mi się najprostsza, a mianowicie html5form (http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-validation-html5.html ).
Zrobiłem wszystko jak trzeba, a mianowicie:
Zaimportowałem w sekcji head bibliotekę jQuery:
W sekcji head również zaimportowałem bibliotekę html5form:
Na końcu sekcji body wywołałem właściwą metodę dla formularza, czyli:
Niestety walidacja formularza nadal działa po html5, również na potrzeby testów uaktywniłem działanie skryptów pod każdą przeglądarką. Podczas próby przejścia na stronę z formularzem w konsoli otrzymuję błąd:
Uncaught TypeError: Object [object Object] has no method 'html5form'
Może ktoś z Was jest w stanie wskazać, gdzie robię błąd, bym mógł go poprawić. Z góry dziękuję za pomoc.
Jim1961
(Jim1961)
7 Styczeń 2014 09:53
#2
Blady214
(Blady214)
7 Styczeń 2014 10:17
#3
Po zmianie kodu na
<script src="http://html5form.googlecode.com/svn/trunk/jquery.html5form-1.5-min.js"></script>
nadal bez zmian, ten sam błąd dostaję.
Jim1961
(Jim1961)
7 Styczeń 2014 11:11
#4
pokaż HTMLa, bo u mnie nie ma (błędu) na żadnej
Blady214
(Blady214)
7 Styczeń 2014 14:40
#5
Ok, to poniżej wklejam kod HTML formularza, bo sądzę, że inne elementy nie mają tutaj znaczenia:
<form id="trialForm" action="trial.php" method="POST">
<p>Wypełnij poniższy formularz:</p>
<div class="error global"></div>
<div class="error email"></div>
<!--[if IE]><label for="email">Email:</label><![endif]-->
<input name="email" id="email" type="email" class="standinput" placeholder="e-mail" required /><br />
<div class="error login"></div>
<!--[if IE]><label for="login">Login:</label><![endif]-->
<input name="login" id="login" type="text" class="standinput" placeholder="login" required="true" pattern="[a-z0-9@._-]{5,100}" /><br />
<div class="error password"></div>
<!--[if IE]><label for="password">Hasło:</label><![endif]-->
<input name="password" id="password" type="password" class="standinput" placeholder="hasło" required="true" min="7" /><br />
<!--[if IE]><label for="re_password">Powtórz hasło:</label><![endif]-->
<input name="re_password" id="re_password" type="password" class="standinput" placeholder="powtórz hasło" required="true" min="7" /><br />
<div class="error product"></div>
<!--[if IE]><label for="product">Wybierz pakiet:</label><![endif]-->
<select name="product" id="product" class="standinput list">
<option value="freemium">Test</option>
</select>
<!--[if IE]><label for="discount_code">Wybrany pakiet wymaga kodu rabatowego:</label><![endif]-->
<input name="discount_code" id="discount_code" type="text" class="standinput" placeholder="wybrany pakiet wymaga kodu rabatowego" /><br />
<p>Dane billingowe</p>
<!--[if IE]><label for="is_company">Firma:</label><![endif]-->
<select name="is_company" id="is_company" class="standinput list">
<option value="person">osoba fizyczna</option>
<option value="company">firma</option>
</select>
<!--[if IE]><label for="name">Nazwa:</label><![endif]-->
<input name="name" id="name" type="text" class="standinput" placeholder="nazwa" /><br />
<!--[if IE]><label for="vatin">NIP:</label><![endif]-->
<input name="vatin" id="vatin" type="text" class="standinput" placeholder="vatin" /><br />
<!--[if IE]><label for="first_name">Imię:</label><![endif]-->
<input name="first_name" id="first_name" type="text" class="standinput" placeholder="imię" /><br />
<!--[if IE]><label for="last_name">Nazwisko:</label><![endif]-->
<input name="last_name" id="last_name" type="text" class="standinput" placeholder="nazwisko" /><br />
<!--[if IE]><label for="street">Ulica:</label><![endif]-->
<input name="street" id="street" type="text" class="standinput" placeholder="ulica" required="true" /><br />
<!--[if IE]><label for="city">Miasto:</label><![endif]-->
<input name="city" id="city" type="text" class="standinput" placeholder="miasto" required="true" /><br />
<!--[if IE]><label for="postal_code">Kod pocztowy:</label><![endif]-->
<input name="postal_code" id="postal_code" type="text" class="standinput" placeholder="kod pocztowy" required="true" /><br />
<!--[if IE]><label for="country">Kraj:</label><![endif]-->
<input name="country" id="country" type="text" class="standinput" placeholder="kraj" required="true" /><br />
<!--[if IE]><label for="phone">Telefon:</label><![endif]-->
<input name="phone" id="phone" type="text" class="standinput" placeholder="telefon" required="true" /><br />
<div class="error personal"></div>
<input type="checkbox" id="personal" name="personal" class="left" required="true" /><p class="personal_terms left">Akceptuję </p>
<button type="submit" class="standardbutton">
pobierz i wypróbuj za darmo
</button>
</form>
Może ma tutaj znaczenie fakt, że formularz jest wysyłany ajaxem przez jQuery?