MarcinPaul.pl

Tag JavaScript

Dodawanie walidacji JavaScript do formularzy jest bardzo proste. Trzeba utworzyć obiekt FORM do reprezentowania formularza:

<script type="text/javascript">
//< ![CDATA[
 var myForm= new VarienForm('formId', true);
//]]>
</script>

Pierwszy parametr to identyfikator (ID) formularza. Drugi ustawiony na TRUE powoduje automatyczne ustawienie kursora w pierwszym polu formularza. Ustawiony na FALSE nie ustawia kursowa.

Następnie tworzymy formularz z odpowiednimi regułami sprawdzającymi poprawność danych pól.

<label for="name">URL Address *</label>
<input type="text" id="url" name="url" value="" class="required-entry validate-url"/>
<label for="email">Email Address *</label>
<input type="text" id="email" name="email" value="" class="required-entry validate-email"/>

Istnieje cała masa gotowych klas, które wystarczy przypisać do odpowiednich pól formularza.

validate-select
Wybierz opcję

required-entry
To pole jest wymagane

validate-number
Proszę podać prawidłowy numer

validate-digits
Proszę używać tylko cyfr. Należy unikać spacji lub innych znaków, takich jak kropki lub przecinki

validate-alpha
Tylko litery (a-z lub A-Z).

validate-code
Tylko litery (a-z), cyfry (0-9) lub znak podkreślenia (_), pierwszy znak powinien być literą.

validate-alphanum
Tylko litery (a-z lub A-Z) lub cyfry (0-9). Spacje i inne znaki są niedozwolone

validate-street
Tylko litery (a-z lub A-Z) lub cyfry (0-9) lub spacje i #.

validate-phoneStrict
Proszę podać prawidłowy nr telefonu. Np. (123) 456-7890 lub 123-456-7890.

validate-phoneLax
Proszę podać prawidłowy nr telefonu. Np. (123) 456-7890 lub 123-456-7890.

validate-fax
Proszę podać prawidłowy nr faxu. Np. (123) 456-7890 lub 123-456-7890.

validate-date
Proszę podać prawidłową datę

validate-email
Proszę podać prawidłowy adres e-mail. Np. johndoe@domain.com.

validate-emailSender
Tylko litery (a-z lub A-Z), cyfry (0-9) , znak podkreślenia (_) lub spacje.

validate-password
Proszę wpisać 6 lub więcej znaków. Wiodące lub końcowe spacje są ignorowane.

validate-admin-password
Proszę podać 7 lub więcej znaków. Hasło powinno zawierać znaki numeryczne i alfabetyczne

validate-cpassword
Proszę upewnić się, że hasła są poprawne

validate-url
Prawidłowy adres URL. http:// jest wymagany

validate-clean-url
Proszę podać prawidłowy adres URL. Np. http://www.example.com lub www.example.com

validate-identifier
Proszę podać poprawny identyfikator. Np. example-page, example-page.html lub anotherlevel/example-page

validate-xml-identifier
Wpisz poprawny identyfikator XML. Np. something_1, block5, id-4

validate-ssn
Proszę podać poprawny numer ubezpieczenia społecznego. Na przykład 123-45-6789

validate-zip
Proszę podać kod pocztowy. Np. 90602 lub ​​90602-1234

validate-zip-international
Proszę podać prawidłowy kod pocztowy

validate-date-au
Proszę użyć tego formatu daty: dd / mm / rrrr. Np. 17/03/2006 dla 17 marca 2006

validate-currency-dollar
Proszę podać prawidłową kwotę $. Np. $100,00

validate-one-required
Proszę wybrać jedną z powyższych opcji.

validate-one-required-by-name
Proszę wybrać jedną z opcji.

validate-not-negative-number
Proszę podać poprawny numer

validate-state
Proszę wybrać State/Province

validate-new-password
Proszę wpisać 6 lub więcej znaków. Wiodące lub końcowe spacje są ignorowane

validate-greater-than-zero
Proszę podać cyfrę większą od 0

validate-zero-or-greater
Proszę podać cyfrę 0 lub większą

validate-cc-number
Proszę podać prawidłowy numer karty kredytowej.

validate-cc-type
Numer karty kredytowej nie zgadza się typ karty kredytowej

validate-cc-type-select
Typ karty nie zgadza się numer karty kredytowej

validate-cc-exp
Nieprawidłowa data ważności karty kredytowej

validate-cc-cvn
Proszę podać prawidłowy numer weryfikacyjny karty kredytowej.

validate-data
Tylko litery (a-z lub A-Z), cyfry (0-9) lub znak podkreślenia (_), pierwszy znak powinien być literą.

validate-css-length
Proszę podać prawidłową długość CSS. Np. 100px lub 77pt lub 20em lub .5ex lub 50%

validate-length
Maksymalna długość

· ·

Prosty kawałek kodu jQuery ustawiający domyślny tekst w polach formularza input oraz textarea. Kod składa się z dwóch funkcji jQuery: blur (powoduje ustawienie wartości dla pola, które jest nieaktywne) oraz focus (zeruje wartość pola po jego kliknięciu).

jQuery(document).ready(function() {
    jQuery(".defaultText").focus(function() {
        if (jQuery(this).val() == jQuery(this)[0].title) {
            jQuery(this).removeClass("defaultTextActive");
            jQuery(this).val("");
        }
    });
    jQuery(".defaultText").blur(function() {
        if (jQuery(this).val() == "") {
            jQuery(this).addClass("defaultTextActive");
            jQuery(this).val(jQuery(this)[0].title);
        }
    });
    jQuery(".defaultText").blur();        
});

·